关于提高ThreeJS性能的建议

Question

​

我是美国宇航局新的伽马射线星座页面的主要开发者，这是一个互动的外联工具，用来突出夜空在不同波长下的样子：

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

您目前正在以每秒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号

Answer 2

根据不同的视图位置和角度，您的应用程序产生多达600个画框调用。通过在浏览器控制台中键入renderer.info.render，您可以很容易地看到这一点。在性能优化的背景下，一个很好的起点是减少抽签调用。您可以通过多种方法来实现这一点，例如，将多个几何图形合并到一个单独的几何图形中，使用实例渲染或避免多个物质对象。如果您的应用程序是CPU绑定的，减少抽签调用可以大大提高3D应用程序的性能。

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

顺便说一句:关于three.js论坛中的性能优化，有很多有趣的讨论。

Answer 3

我注意到的第一件事是创建70个绘制调用的网格线。然后是由多条线组成的星座。

对于网格，我将使用像下面这样的自定义着色器，并在主网格内制作一个较小的球体，并添加混合lines.html。

对于星座，我要么使用LineSegments，要么将线条组渲染成纹理，然后在场景中使用这些https://threejsfundamentals.org/threejs/lessons/threejs-rendertargets.html