javascript - Three.js 项目崩溃移动

Question

我一直在做一个 three.js 项目来尝试学习这个框架。得到一个基本模型，它在桌面浏览器上运行良好，但在移动设备上会反复崩溃。我在我的服务器上上传了项目 http://threedeesneaker.404vanity.com/

有什么方法可以针对移动设备进行优化吗？我在 iPhone 和 iPad 上同时尝试了 chrome 和 safari。

它自己的代码:

(function() {

var scene, camera, renderer;
var geometry, material, mesh, sneaker;

init();
animate();

function init() {

    scene = new THREE.Scene();
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;

        var ambient = new THREE.AmbientLight( 0x444444 );
                scene.add( ambient );

    camera = new THREE.PerspectiveCamera( 3, WIDTH / HEIGHT, 1, 20000 );
    camera.position.z = 1000;



    window.addEventListener('resize', function() {
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;
      renderer.setSize(WIDTH, HEIGHT);
      camera.aspect = WIDTH / HEIGHT;
      camera.updateProjectionMatrix();
    });

    geometry = new THREE.BoxGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );


    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/sneaker.obj', 'models/sneaker.mtl', function(object) {

      object.scale.set(1, 1, 1);
      object.rotation.y = 600;
      object.rotation.z= 600;
      sneaker = object;
      scene.add(sneaker);
    });


  // var loader = new THREE.OBJLoader();
  // loader.load('models/sneaker.obj', function(object) {
  //   sneaker = object;
  //   sneaker.scale.set(1,1,1);
  //   sneaker.rotation.y = 600;
  //   sneaker.rotation.z= 600;
  //   scene.add(sneaker);

  // });





    renderer = new THREE.WebGLRenderer();
    renderer.setSize( WIDTH, HEIGHT );

    renderer.setClearColor(0x333F47, 1);


    var light = new THREE.PointLight(0xffffff);
    light.position.set(-100,200,100);
    scene.add(light);

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    sneaker.rotation.x += 0.01;
    sneaker.rotation.y += 0.02;


    renderer.render( scene, camera );

}

})();

Answer 1

首先对您的 js 发表评论:在请求旋转网格之前检查渲染循环中是否有 typeof sneaker !== 'undefined'，在加载它之前会产生错误。

你的场景崩溃是因为你使用了太详细的 Material ，例如我可以看到一个 4096x4096 的凹凸贴图。它大大增加了桌面上的帧渲染时间，这可能是页面在移动设备上无响应的原因:片段着色器计算变得太大。

然而，完全删除您花时间关注的那些细节将是一种耻辱。你可以做的是在你的js中添加一个设备检测器。您可以使用它在桌面和移动设备上显示两种不同的模型。

但是您还可以带来更重要的改进。因为它们是我原来帖子的一部分，所以我把它们放在那里 :) :

1. 调整纹理大小。您正在使用两个 4.5MB 的 4096 x 4096 jpg，这很重(请注意，这些天发布的启用 webgl 的智能手机只有 500Mo RAM)。此外，您几乎没有什么细节可以证明这一点。您可以更改 uv 以减少很多没有细节的部分，并可能将图片调整为 512x512。最后，使用 JPG 压缩器，可以减轻 70-80% 的重量。根据您的图片，PNG 也是一个更好的选择。设备的 GPU 内存仍然是另一回事，如果您仍然需要提高性能，您可以检查脚本是否客户端支持针对 GPU 内存优化的 .pvr 或 .ktx 纹理格式。

2. 使您的可视化不适合移动设备的一个重要问题是您有 ... 23 次渲染调用，因为您使用了 15 种纹理和 23 种几何体。

这意味着，对于每一帧，您必须在最终帧渲染之前绑定(bind) 23 个不同的几何体。一些移动 CPU-GPU 组合不能每秒执行 60 次。不要为普通移动设备计划超过 10 个渲染调用。这意味着更少的几何形状和更少的 Material 。合并。

我没有详细检查您的 .obj 文件以了解您最终如何获得 23 个几何图形，您的 13 个纹理来自何处，由您决定。

商店中的许多 3D 应用程序 (OpenGL) 当然有超过 23 个对象。但商店知道这些应用，他们知道你的手机，所以他们可以做兼容性工作并将应用隐藏到低端设备。

这里是检查场景中的渲染调用、几何图形和 Material 的提示:在您的主函数中，在设置了renderer 之后，在 window 对象 中包含一个指向它的指针window.renderer = 渲染器。现在，在您的控制台运行时，加载资源后，键入 renderer.info。它将在一个对象中返回这些数据。