提升 ThreeJS 性能的建议 [英] Advice on Improving ThreeJS Performance

问题描述

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

I'm the lead developer for NASA's new gamma-ray constellations page, which is an interactive outreach tool to highlight what the night sky looks like at different wavelengths:

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

我使用 ThreeJS 来组合交互式内容，虽然页面在现代笔记本电脑上运行良好，但我一直在寻找提高旧设备和移动平台性能的方法.

如果这是一个过于宽泛的问题，我深表歉意，但如果您对如何在此类应用程序中提高 ThreeJS 的效率有任何意见，我将不胜感激.特别是，我很想知道有经验的 ThreeJS 编码员如何潜在地整合/合并几何图形以减少 CPU/内存开销.我是一名身兼程序员双重职责的科学家，因此我们不胜感激任何有关如何提高当前代码性能的建议.

I used ThreeJS to put together the interactive content and while the page works fine on a modern laptop, I've been seeking ways to improve performance on older devices as well as mobile platforms.

My apologies if this is too broad of a question, but I would appreciate any comments on how to improve the efficiency of ThreeJS in such an application. In particular, I'm curious to hear how experienced ThreeJS coders would potentially consolidate/merge geometries to cut down on CPU/memory overhead. I'm a scientist pulling double duty as a programmer, so any suggestions on how to improve the performance of the current code would be greatly appreciated.

以下是交互式场景构建方式的基本细分，但完整代码可以在上面的链接中找到:

Here's a basic breakdown of how the interactive scene is constructed, but the full code can be found at the link above:

1. 创建和纹理天空"球体
2. 将相机定位在球体内
3. 沿球体创建网格线
4. 创建光学星座线
5. 创建伽马射线星座线
6. 创建几何图形以包含星座艺术
7. 创建透明的点击捕获几何图形来切换星座艺术

最终产品有 1083 个几何图形、75 个纹理、125336 个顶点和 40642 个面.在我的 2016 款 MacBook Pro 上查看页面几分钟，它会加热到足以煎鸡蛋.任何有关使代码更高效的最佳实践的建议将不胜感激.

The final product has 1083 geometries, 75 textures, 125336 vertices, and 40642 faces. Viewing the page on my 2016 MacBook Pro for a few minutes will heat it up enough to fry an egg. Any suggestions on best practices to make the code more efficient would be appreciated.

推荐答案

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

You are currently rendering the scene 60 times per second. Your biggest improvement in performance should be achieved by rendering only when needed.

对于静态场景，您只需要在相机移动时进行渲染——不需要动画循环.

For a static scene, you only need to render when the camera moves -- an animation loop is not required.

例如，如果您使用 OrbitControls 来控制您的相机，您将使用此模式.

For example, if you were using OrbitControls to control your camera, you would use this pattern.

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，您也可以使用如下模式仅在补间期间实例化动画循环:

Also, even though you are using TWEEN in your demo, you can instantiate an animation loop only for the duration of the tween by using a pattern like so:

// 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

three.js r.97

这篇关于提升 ThreeJS 性能的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！