Performance 提高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);
  }

var image=THREE.ImageUtils.loadTexture（“img/idlew.png”）；
函数addPlayer（）{
var mesh=new THREE.Sprite（{map:image}）；/，affectedByDistance:false，useScreenCoordinates:false}）；
图像。推送（网格）；
mesh.position.set（Math.floor（Math.random（）*500）、Math.floor（Math.random（）*500）、10）；
场景。添加（网格）；
网格.uvScale.x=96/1152；
网格比例x=0.1；
网格比例y=0.1；
}
var imgBackground=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'img/grass.jpg'））
});
var background=新的三点网格（新的三点平面几何体（10001000），imgBackground）；
场景。添加（背景）；
场景。添加（摄影机）；
camera.rotation.x=-（Math.PI/2）；
添加（新的3.AmbientLight（0xFFFFFF））；
addPlayer（）；
渲染器。渲染（场景、摄影机）；
var moveUp=false；
勾选（）；
var-ticker=0；
var usedOne=0；
函数tick（）{
ticker++；
如果（股票代码%10==0）{
对于（var i=0；i

我回答了自己的问题，意识到通过放置

renderer.render(scene, camera); 

---

在正确的位置编写代码，以便仅在需要时调用

我已经编写了一个显示动画纹理的代码示例，示例位于：

资料来源：

有用的部分是我编写的自动处理偏移的函数。功能（从上面的链接中提取）如下所示：

function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration) 
{   
    // note: texture passed by reference, will be updated by the update function.

    this.tilesHorizontal = tilesHoriz;
    this.tilesVertical = tilesVert;

    // how many images does this spritesheet contain?
    //  usually equals tilesHoriz * tilesVert, but not necessarily,
    //  if there at blank tiles at the bottom of the spritesheet. 
    this.numberOfTiles = numTiles;
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );

    // how long should each image be displayed?
    this.tileDisplayDuration = tileDispDuration;

    // how long has the current image been displayed?
    this.currentDisplayTime = 0;

    // which image is currently being displayed?
    this.currentTile = 0;

    this.update = function( milliSec )
    {
        this.currentDisplayTime += milliSec;
        while (this.currentDisplayTime > this.tileDisplayDuration)
        {
            this.currentDisplayTime -= this.tileDisplayDuration;
            this.currentTile++;
            if (this.currentTile == this.numberOfTiles)
                this.currentTile = 0;
            var currentColumn = this.currentTile % this.tilesHorizontal;
            texture.offset.x = currentColumn / this.tilesHorizontal;
            var currentRow = Math.floor( this.currentTile / this.tilesHorizontal );
            texture.offset.y = currentRow / this.tilesVertical;
        }
    };
}       

可以使用（例如）初始化材质：

并在每次渲染前使用以下命令进行更新：

var delta = clock.getDelta(); 
annie.update(1000 * delta);

---

希望这有帮助

欢迎使用Stack Overflow，很高兴您解决了这个问题！所以你知道，在下面的答案部分回答你自己的问题是完全可以接受的，并且（在短暂的等待之后）将其标记为已接受的答案。这有助于将来可能遇到相同问题的其他人更快地找到解决方案；但是，我不太明白这是如何加快渲染速度的。现在，我的应用程序的上限是20fps（这是最佳点），精灵每帧移动一次（x和y值），动画每10次移动一次（偏移量变化）。渲染会在每一帧更改时重新进行。我现在遇到的问题是，当我的场上有太多精灵时，渲染速度太慢…移动相机时，有100个精灵移动并更改UV偏移，速度非常慢+1我用精灵（其中476个）填充视口，所有精灵都具有透明度和8帧动画。使用这种方法，我仍然可以获得30+每秒。谢谢你好我编写了同一想法的另一个实现，并将其打包为模块。我还将使用uv偏移，但将所有计算移动到着色器。你怎么认为？使用imagemagick的标准几何图形将帧组合到单个子画面中，需要从左到右、从上到下读取。为了使其兼容，我修改了更新方法中的Y位置：

texture.offset.Y=1-（currentRow/this.tilesVertical）-（1/this.tilesVertical）@crowjonah-是的，我注意到，你的代码很有用，谢谢。此外，Lee的爆炸jpg文件具有从右下角到左上角的子图像序列，但他的代码期望序列从左下角到右上角运行。生成的动画不是平滑的。
var delta = clock.getDelta(); 
annie.update(1000 * delta);