改善ThreeJS性能的建议

Question

我是NASA新的伽马射线星座页面的首席开发人员，该页面是一个交互式的扩展工具，可以突出显示不同波长下的夜空：

https://fermi.gsfc.nasa.gov/science/constellations/

我使用ThreeJS组合了交互式内容，尽管页面在现代笔记本电脑上可以正常工作，但我一直在寻找提高旧设备和移动平台性能的方法。

如果这个问题太宽泛，我深表歉意，但是对于在这种应用程序中如何提高ThreeJS的效率的任何评论，我将不胜感激。特别是，我很想知道经验丰富的ThreeJS编码器将如何整合/合并几何结构以减少CPU /内存开销。我是一名科学家，担负着程序员的双重职责，因此，对如何改善当前代码性能的任何建议将不胜感激。

这是交互式场景的基本构造方式，但是完整的代码可以在上面的链接中找到：

1. 创建并构造“天空”球体
2. 将相机放置在球体内
3. 沿球体创建网格线
4. 创建光学星座线
5. 创建伽马射线星座线
6. 创建几何以包含星座图
7. 创建透明的点击捕获几何形状以切换星座图

最终产品具有1083个几何图形，75个纹理，125336个顶点和40642个面。在我的2016 MacBook Pro上浏览页面几分钟，将其加热到足以煎鸡蛋的程度。任何有关使代码更有效的最佳实践的建议，将不胜感激。

Answer 1

根据视图位置和角度，您的应用程序每帧生成多达 600 次绘制调用。您可以通过renderer.info.render在浏览器控制台中键入来轻松查看。性能优化的一个很好的起点是减少绘制调用。您可以通过多种方式完成此操作，例如将多个几何图形合并为一个几何图形、使用实例渲染或避免使用多材质对象。如果您的应用程序受 CPU 限制，减少绘制调用可以大大提高 3D 应用程序的性能。

由于您正在使用three.js R84，我建议您升级到最新版本。今年我们实现了一些性能特性，例如统一缓存或避免混合上下文中的冗余状态更改。类似的东西也可能对您的应用程序的性能产生积极影响。

BTW：three.js 论坛中有很多关于性能优化的有趣讨论 。

Answer 2

您当前正在每秒渲染场景60次。只有在需要时才渲染，才能最大程度地提高性能。

对于静态场景，只需要在摄像机移动时进行渲染即可，而不需要动画循环。

例如，如果您OrbitControls要控制相机，则可以使用此模式。

var controls = new THREE.OrbitControls( camera, renderer.domElement );

// call this only in static scenes (i.e., if there is no animation loop)
controls.addEventListener( 'change', render ); 

另外，即使您在演示中使用TWEEN，也可以通过使用如下模式来仅在补间期间实例化动画循环：

// start animate loop
var id;
animate();

// tween
var time = { t: 0 };
new TWEEN.Tween( time )
    .to( { t : 1 }, 1000 )
    .onStart( function() {
        // custom
    } )
    .onUpdate( function() {
        // custom
    } )
    .onComplete( function() {
        // custom
        cancelAnimationFrame( id );
    } )
    .start();

function animate() {

    id = requestAnimationFrame( animate );

    TWEEN.update();

    render();

}

function render() {

    renderer.render( scene, camera );

}

three.js r.97