three.js - 为什么带着色器的粒子系统不起作用？三.js

Question

嗨，有人可以帮我吗？我有这个着色器，它适用于 THREE.Mesh，但不适用于 THREE.Particlesystem？

我希望每个粒子都有给定贴图(纹理)的一部分并相应地改变它们的位置，像这样 http://www.chromeexperiments.com/detail/webcam-displacement/?f=webgl

<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>

Answer 1

粒子系统并不真正支持 UV，因为没有面，只有单个点。纹理映射粒子是使用 gl_PointCoord (IIRC) 完成的，但这为每个粒子提供了相同的映射。为了给每个粒子提供相同纹理的不同部分，您应该使用 BufferGeometry，它在最新版本的 Three.js 中支持所有属性，包括自定义属性(并且非常高效且快速!)。然后，您将为每个粒子提供 vec2 偏移属性:您可以从此偏移和 gl_PointCoord 获得正确的 UV。