2

私はthree.jsが初めてで、それぞれ異なるサイズと色の1000個の粒子を追加する最良の方法を見つけようとしています。各パーティクルのテクスチャは、キャンバスを描画することによって作成されます。ParticleSystem を使用すると、すべてのパーティクルが同じ色とサイズになります。パーティクルごとに ParticleSystem を作成するのは非常に非効率的です。これを処理する効率的な方法はありますか？

4

1 に答える 1

4

私の経験では、これを行う最善の方法は、カスタマイズされたシェーダー マテリアルを作成することです。次に、パーティクルごとに異なるプロパティであるアトリビュートを含めることができます。シェーダー コードは次のようになります。

頂点シェーダー:

attribute vec3 customColor;
attribute float customSize;
varying vec3 vColor;
void main() 
{
    vColor = customColor; // set color associated to vertex; use later in fragment shader
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = customSize * ( 300.0 / length( mvPosition.xyz ) );
    gl_Position = projectionMatrix * mvPosition;
}

フラグメント シェーダー:

uniform sampler2D texture;
varying vec3 vColor; // colors associated to vertices; assigned by vertex shader
void main() 
{
    // calculates a color for the particle
    gl_FragColor = vec4( vColor, 1.0 );
    // sets particle texture to desired color
    gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}

同様の実際の例については、以下をご覧ください。

http://stemkoski.github.io/Three.js/ParticleSystem-Attributes.html

于 2013-08-17T22:51:18.127 に答える