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

Google GPGPU と three.js。

ネット上にはいくつかの例があります。それらのほとんどは古いです。

ここに最近のものがあります：

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

three.js r.56dev.

于 2013-02-11T23:12:19.103 に答える