是否可以使用 Three.js 将着色器顶点位置存储在纹理中？

Question

我正在使用移动相机在 Three.js 中制作循环 3D 星空，但在 CPU 上执行此操作对我的帧率不利。如果这可以通过顶点着色器以某种方式完成，那就太好了。

这是我想在着色器中执行的 javascript 代码：

SW.Starfield = function ( position, scene ) {
    var scale = 10000;
    var particleCount = 2000;
    var x, y, z;
    var particles;

    var material = new THREE.ParticleBasicMaterial( { sizeAttenuation: false, size: 1, color: '#FFFFFF' } );
    var geometry = new THREE.Geometry();

    for ( var i=0; i <= particleCount; i++ ) {
        do {
            x = Math.random() * scale - scale/2 + position.x;
            y = Math.random() * scale - scale/2 + position.y;
            z = Math.random() * scale - scale/2 + position.z;
        } while (new THREE.Vector3( x, y, z ).length()> scale/2);

        geometry.vertices.push( new THREE.Vector3( x, y, z ) );
    }

    particles = new THREE.ParticleSystem( geometry, material );
    particles.dynamic = true;
    particles.position = position;
    particles.sortParticles = true;
    scene.add( particles );

    this.update = function( shipPos ) {
        for ( i=0; i <= particleCount; i++ ) {
            var particleVec = new THREE.Vector3().copy( particles.geometry.vertices[ i ] );
            var shipVec = new THREE.Vector3().copy( shipPos );

            if ( shipVec.sub(particleVec).length() >= scale/2 ) {
                particles.geometry.vertices[ i ].add(shipVec.multiplyScalar(2.0));
            }
        }
    }
}

如果我理解正确，我将不得不将星星的位置存储在纹理中以使其在着色器中工作，因为我认为您不能仅根据星星计算星星的新位置在这种情况下，具有方程的初始位置。如果您查看更新功能，应该清楚我的意思。

有没有办法在 Three.js 中做到这一点？我知道可以存储颜色。也许我可以将位置编码为颜色，但位置可以具有比颜色更高的值，也可以是负值。

Answer 1

Google GPGPU 和 three.js。

网上有几个例子。他们中的大多数都是老的。

这是最近的一个：

http://jabtunes.com/labs/3d/gpuflocking/webgl_gpgpu_flocking3.html

three.js r.56dev.