2

こんにちは、これを手伝ってくれる人はいますか？このシェーダーがあります。THREE.Mesh では機能しますが、THREE.Particlesystem では機能しませんか?

各パーティクルに特定のマップ (テクスチャ) の一部を持たせ、それに応じて位置を変更するようにします。

<script id="vs" type="x-shader/x-vertex">


            uniform sampler2D map;

            varying vec2 vUv;

            void main() {

                vUv = uv;

                vec4 color = texture2D( map, vUv );
                float value = ( color.r + color.g + color.b ) / 3.0;

                vec4 pos = vec4( position.xy, value * 100.0, 1.0 );

                                gl_PointSize = 20.0;

                gl_Position = projectionMatrix * modelViewMatrix * pos;

            }

        </script>

<script id="fs" type="x-shader/x-fragment">

            uniform sampler2D map;

            varying vec2 vUv;

            void main() {

                gl_FragColor = texture2D( map, vUv );

            }

</script>
4

1 に答える 1

2

ParticleSystem は UV を実際にはサポートしていません。面がなく、単一のポイントがあるだけだからです。テクスチャ マッピング パーティクルは gl_PointCoord (IIRC) で行われますが、すべてのパーティクルに対して同じマッピングが得られます。同じテクスチャの異なる部分を各パーティクルに与えるには、BufferGeometry を使用する必要があります。これは、three.js の最新バージョンでは、カスタム属性を含むすべての属性をサポートしています (非常に効率的で高速です!)。次に、各パーティクルに vec2 オフセット アトリビュートを指定します。このオフセットと gl_PointCoord から正しい UV を取得します。

于 2013-03-29T08:09:58.327 に答える