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));
            }
        }
    }
}

如果我理解正确的话，我必须将星星somwhow的位置存储在纹理中以使其在着色器中工作，因为我不认为你只能通过它们来计算星星的新位置在这种情况下，具有等式的初始位置。如果你看看更新功能，我应该清楚我的意思。

有没有办法在Three.js中执行此操作？我知道可以存储颜色。也许我可以将位置编码为颜色，但是位置可以具有比颜色更高的值以及负值。

Answer 1

Google GPGPU和three.js。

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

这是最近的一个：

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

three.js r.56dev。

是否可以在具有Three.js的纹理中存储着色器顶点位置？

1 个答案: