animation - Three.js 在 100 立方体动画上崩溃

Question

在我的场景中，我有 4 个点光源，其中 3 个连接在相机上，还有大约 100 到 300 个立方体。
我有很多类别的立方体，每个类别在 100 到 300 之间。根据用户菜单选择，我的场景中可能会随时出现 1 个类别的立方体。

(具有 100 个立方体的类别)renderer.info:

memory: 
  Objectgeometries: 2
  programs: 3
  textures: 100
render: 
  calls: 203
  faces: 1360
  points: 0
  vertices: 4080

在循环中，我为每个类别生成多维数据集，如下所示:

var materials = [   
    backgroundMaterial,
    backgroundMaterial,
    backgroundMaterial,
    backgroundMaterial,
    productMaterial,
    backgroundMaterial
];

var cubeMaterial = new THREE.MeshFaceMaterial( materials );

var object3D = new THREE.Mesh( geometryBox, cubeMaterial );

Material backgroundMaterial在循环外定义一次；

var backgroundMaterial = new THREE.MeshPhongMaterial({
    color: this.options.models.boxColor,
    specular: this.options.models.boxSpecular,
    //emissive : 0xefefef,
    //side: THREE.DoubleSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: this.options.models.boxShininess,
    reflectivity: this.options.models.boxReflectivity,
    fog:false
});

和 productMaterial 每次在循环内，因为每个立方体的纹理都不同。

var productMaterial = new THREE.MeshBasicMaterial({
    map: productModelTexture,
    color: that.options.models.boxColor,
    specular: that.options.models.boxSpecular,
    //emissive : 0xefefef, 
    side: THREE.FrontSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: that.options.models.textureShininess,
    reflectivity: that.options.models.textureReflectivity,
    opacity: 1,
    fog:false
});

此外，此时我没有将网格添加到场景中，它们被设置为 visible = false
之后我将我的立方体插入一个数组对象中，该对象中的每个数组都是一个长度在 100 - 300 之间的立方体类别。

当我的应用程序启动时，我会运行一个像下面这样的动画，它将一类立方体带入场景。

helix : function( category ) {

    if ( this.models[category] && this.models[category].length > 0 ) {              

        TWEEN.removeAll();

        new TWEEN.Tween( this.camera.position ).to( {x:0,y:0,z:90000}, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start(); 
        new TWEEN.Tween( this.camera.rotation ).to( {x:0,y:0,z:0}, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start();             

        this.models.reset( category );

        for ( var i in this.models[category] ) {

            var model = this.models[category][i];
                model.visible = true;
                this.scene.add( model );

            new TWEEN.Tween( model.position ).to({
                x: model.helix.position.x,
                y: model.helix.position.y,
                z: model.helix.position.z
            }, randBtwn( 1000, 3000 ) ).easing( TWEEN.Easing.Exponential.InOut ).delay( 1001 ).start();

            new TWEEN.Tween( model.rotation ).to( {
                x: model.helix.rotation.x,
                y: model.helix.rotation.y,
                z: model.helix.rotation.z
            }, randBtwn( 1000, 3000 ) ).easing( TWEEN.Easing.Exponential.InOut ).delay( 1001 ).onComplete(function(){

            }).start();
        }

    }

}.bind( that )

此外你会注意到螺旋内部的另一个函数调用，这个: this.models.reset( category );
这是下面的代码，本质上是重置对象位置并将它们设置为 visible = false最后将它们从场景中移除。

reset : function( category, callback ) {

    for ( var j in this.models ) {

        if ( this.models[j] instanceof Array && this.models[j].length > 0 && category !== j ) {

            for ( var i in this.models[j] ) {

                var model = this.models[j][i];
                    model.visible = true;

                new TWEEN.Tween( model.position ).to({
                    x: model.outside.position.x,
                    y: model.outside.position.y,
                    z: model.outside.position.z
                }, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start();

                new TWEEN.Tween( model.rotation ).to( {
                    x: model.outside.rotation.x,
                    y: model.outside.rotation.y,
                    z: model.outside.rotation.z
                }, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).onComplete(function ( m ){

                    m.visible = false;
                    this.scene.remove( m );

                    if ( callback ) {
                        callback();
                    }

                }.bind( that, model )).start();
            }

        }

    }

}.bind( that )  

在 PC 中一切正常，我以 36 fps 运行。我的 GPU 是新的 nvidia GTX(不过我不知道 36 是否可以接受)。

问题是，当我尝试使用最新的 chrome 在我的 nexus 5 上运行我的应用程序时，我在场景外的立方体过渡和进入的其他立方体之间出现了巨大的 fps 损失。大多数情况下，这会导致 chrome 崩溃...除此之外，如果我不更改类别并且没有播放动画，则它在我的手机上运行正常。

PS:我无法合并几何图形，因为每个网格都必须根据用户选择自行移动。(如果我至少没记错的话)

这种性能下降/崩溃的原因可能是什么，您将如何处理将 200 个立方体移到场景外而另外 200 个立方体移动到场景内的类似场景？是否有任何我应该考虑的技巧，请记住我仍然是 Three.js 的新手。

需要任何其他可能是原因的来源，请告诉我，我会更新我的问题。

Answer 1

首先，36 fps 是可以接受的。根据经验，我使用 25 fps 作为最低要求。

现在的问题。 nexus 5 的 GPU 比您的 PC 慢得多。由于着色器直接传递给 GPU，因此速度很重要。当您尝试在预算有限的 PC 上玩孤岛危机时，同样的问题，GPU 不够强大，无法足够快地处理所有数据。

将所有立方体几何图形添加到单个网格可能是一种解决方案，也许使用 THREE.MeshFaceMaterial将不同的 Material 应用于每个立方体。处理 100 个几何图形的单个网格比处理 1 个几何图形的 100 个网格要快。但正如我所说。也可能是这根本解决不了任何问题，它更像是冰雹玛丽。

编辑:在单个网格中添加几何图形并检测单击的几何图形。

我想了想，发现点击的几何体是可能的。它不漂亮，但它可能会给你一些关于如何把它做得漂亮的想法。
只需向几何体的面添加另一个属性。

var addGeometry = function(baseGeometry, addedGeometry){
    for(i in addedGeometry.faces){
        addedGeometry.faces[i].parent = addedGeometry;
    }
    baseGeometry.add(addedGeometry);
}

然后，在进行光线转换时，您不会调用 object属性(property)，但 face.parent属性，它应该包含单击的几何体，您可以随意操作。

但同样，我不知道这将如何在性能方面发挥作用。不过值得一试。

您可以尝试的其他方法是使用 webworkers .