如何在 Three.js 中补间 10,000 多个粒子？

Question

我有一个 THREE.Points 对象，由许多 (10,000+) 个顶点（a.k.a。粒子）组成。

但是，当我尝试对单个粒子的位置进行补间时，我运行遇到了性能问题。这是预期的，因为我正在使用以下代码循环遍历所有粒子并为每个粒子分配补间。

var duration = 500;

for( var i = 0; i < particles.geometry.vertices.length; i++ ){

    // http://threejs.org/examples/css3d_sprites.html

    var currentVertex = particles.geometry.vertices[i];

    new TWEEN.Tween( currentVertex )
        .to( 
            {
                x: newVertices[i].x,
                y: newVertices[i].y,
                z: newVertices[i].z,
            },
            duration * ( Math.random() + 1 ) 
        )
        .easing( TWEEN.Easing.Exponential.InOut )
        .onUpdate( function(){

            particles.geometry.verticesNeedUpdate = true;
        })
        .start();
}

有没有更好的方法来解决这个问题？
我不介意是否所有粒子都在一次绘制调用中更新到它们新的中间位置。

Answer 1

仅在 javascript 中设置那么多粒子动画，您可能永远无法获得想要的性能。
您最好的选择可能是将您的动画代码移动到着色器，以便它由 GPU 处理，GPU 应该能够轻松地为您提供您想要的性能。

有一篇博客 post 介绍了如何使用代码示例执行此操作：Animating a Million Letters Using Three.js

Answer 2

琢磨了一会儿，明白了运行

解决方案是结合使用缓冲区几何 (as seen here) 和使用 @2pha 建议的着色器。

补间功能已移至顶点着色器，可以在其中伪造每个像素的补间。 tween函数需要的各种数据都存储在ShaderMaterial uniforms和BufferGeometry属性中。

一些伪代码，

// Buffer Geometry

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( bPositions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( bColors, 3 ) );
geometry.addAttribute( 'targetPosition', new THREE.BufferAttribute( bPositions2, 3 ) );


// Shader Material

var material = new THREE.ShaderMaterial({
    uniforms: {
        elapsedTime : {
            type: "f",
            value: 0.0
        },
        duration : {
            type: "f",
            value: 0.0
        }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

// Vertex Shader

uniform float elapsedTime;
uniform float duration;
attribute vec3 targetPosition;

float exponentialInOut( float k ){
    // https://github.com/tweenjs/tween.js/blob/master/src/Tween.js
    if( k <= 0.0 ){
        return 0.0;
    }
    else if( k >= 1.0 ){
        return 1.0;
    }
    else if( ( k *= 2.0 ) < 1.0 ){
        return 0.5 * pow( 1024.0, k - 1.0 );
    }
    return 0.5 * ( - pow( 2.0, - 10.0 * ( k - 1.0 ) ) + 2.0 );
}

void main(){

    // calculate time value (also vary duration of each particle)
    float t = elapsedTime / ( duration * ( 1.0 + randomNum.x ) );

    // calculate progress
    float progress = exponentialInOut( t );

    // calculate new position (simple linear interpolation)
    vec3 delta = targetPosition - position;
    vec3 newPosition = position + delta * progress;

    // something
    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}

如何在 Three.js 中补间 10,000 多个粒子？

How to tween 10,000+ particles in Three.js?

tween

three.js

tween.js