1

我正在使用移动相机在 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 中做到这一点？我知道可以存储颜色。也许我可以将位置编码为颜色，但是位置可以具有比颜色更高的值以及负值。

4

1 回答 1

2

谷歌 GPGPU 和 three.js。

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

这是最近的一个：

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

三.js r.56dev。

于 2013-02-11T23:12:19.103 回答