Улучшение производительности анимированных спрайтов в three.js

Прямо сейчас я работаю над онлайн-игрой и решил использовать 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);
  }
6
задан gman 21 August 2019 в 04:10
поделиться