Прямо сейчас я работаю над онлайн-игрой и решил использовать webgl, а не холст HTML5 из соображений производительности. Я использую фреймворк three.js и намерен создать движущиеся анимированные спрайты. Сами спрайты размещаются на листах спрайтов, и я использую UVOffset и UVScale, чтобы использовать правильное изображение и переключать изображение спрайта в течение времени. Мне было интересно, есть ли способ улучшить производительность этого кода, потому что прямо сейчас он начинает тормозить около 300 «игроков» на поле одновременно.
С уважением
Ниже приведена самая важная часть моего кода:
var image = THREE.ImageUtils.loadTexture( "img/idlew.png" );
function addPlayer(){
var mesh = new THREE.Sprite({map:image});//, affectedByDistance: false, useScreenCoordinates: false});
images.push(mesh);
mesh.position.set(Math.floor(Math.random() * 500), Math.floor(Math.random() * 500), 10);
scene.add(mesh);
mesh.uvScale.x = 96/1152;
mesh.scale.x = 0.1;
mesh.scale.y = 0.1;
}
var imgBackground = new THREE.MeshLambertMaterial({
map:THREE.ImageUtils.loadTexture('img/grass.jpg')
});
var background = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000),imgBackground);
scene.add(background);
scene.add(camera);
camera.rotation.x = -(Math.PI/2);
scene.add(new THREE.AmbientLight(0xFFFFFF));
addPlayer();
renderer.render(scene, camera);
var moveUp = false;
tick();
var ticker = 0;
var usedOne = 0;
function tick(){
ticker++;
if(ticker%10==0){
for (var i = 0; i < images.length; i++) {
images[i].uvOffset.x = usedOne * 0.0835;
};
usedOne++;
if(usedOne == 12) usedOne = 0;
addPlayer();
addPlayer();
addPlayer();
console.log(images.length);
}
requestAnimationFrame( tick );
renderer.render(scene, camera);
}