1

パーティクル システムの深度マップを生成しようとしていますが、MeshDepthMaterial を使用してパーティクル システムをレンダリングすると、すべてのパーティクルは頂点ごとに 1 つの点としてのみレンダリングされます。テクスチャ マップされたパーティクルが表示される領域全体をカバーするわけではありません。 .

深度マップを生成するために MeshDepthMaterial を使用する必要がありますか、それとも他のオプションはありますか?

4

1 に答える 1

4

現在、MeshDepthMaterial が ParticleSystem のサイズまたはテクスチャを尊重するようにする方法はありません。ただし、それを行うカスタム ShaderMaterial を実装することはそれほど難しくありません。まず、頂点シェーダーとフラグメント シェーダーが必要です。

<script type="x-shader/x-vertex" id="vertexShader">
  uniform float size;
  void main() {
    gl_PointSize = size;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position , 1.0 ); 
  }
</script>

<script type = "x-shader/x-fragment" id="fragmentShader">
  uniform sampler2D map;
  uniform float near;
  uniform float far;

  void main() {
    float depth = gl_FragCoord.z / gl_FragCoord.w;
    float depthColor = 1.0 - smoothstep( near, far, depth );

    vec4 texColor = texture2D( map, vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y ) );
    gl_FragColor = vec4( vec3(depthColor), texColor.a);
  }
</script>

頂点シェーダーは完全に標準で、フラグメント シェーダーはテクスチャー ( sampler2D map) を使用しますが、カラー値に使用する代わりに、アルファ レベルを使用するだけですtexColor.a。RGB の場合、 MeshDepthMaterial と同様に、深度に基づくグレースケール値が使用されます。このシェーダーを使用するには、html を取得して、次のように THREE.ShaderMaterial を作成するだけです。

var material = new THREE.ShaderMaterial({
    uniforms : {
      size : { type: 'f', value : 20.0 },
      near : { type: 'f', value : camera.near },
      far  : { type: 'f', value : camera.far },
      map  : { type: "t", value : THREE.ImageUtils.loadTexture( url ) }
    },
    attributes : {},
    vertexShader: vertShader,
    fragmentShader: fragShader,
    transparent: true
  });

ここで、シェーダーに必要なすべての情報 (カメラの近距離/遠距離範囲、パーティクルのサイズ、マッピングに必要なテクスチャ) を提供しました。

ここで jsFiddle のデモを見ることができます。

于 2012-12-05T08:53:09.883 に答える