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

【问题标题】：why Particle system with shader doesn't work? three.js为什么带有着色器的粒子系统不起作用？三.js
【发布时间】：2013-03-19 20:08:08
【问题描述】：

您好，谁能帮我解决这个问题？我有这个着色器，它适用于 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>

【问题讨论】：

标签： three.js shader particle-system

【解决方案1】：

ParticleSystem 并不真正支持 UV，因为没有面，只有单点。纹理映射粒子是使用 gl_PointCoord (IIRC) 完成的，但它为每个粒子提供了相同的映射。为了给每个粒子赋予相同纹理的不同部分，你应该使用BufferGeometry，它在three.js的最新版本中支持所有属性，包括自定义属性（它非常高效和快速！）。然后为每个粒子提供一个 vec2 偏移属性：从这个偏移和 gl_PointCoord 中获得正确的 UV。

【讨论】：

感谢@Tapio 的快速响应我已经将所有粒子都放在了 BufferGeometry 中:) ...所以我可以只使用 BufferGeometry 来完成所有这些操作，而无需顶点和片段着色器？
不，当然你仍然需要着色器来绘制任何东西。您需要向着色器传递一个额外的属性，它告诉要对纹理的哪一部分进行采样，即“uv”，尽管如果您想将多个纹素映射到一个粒子，您还需要使用 gl_PointCoord 因为只有一个顶点每个粒子（所以只有一个 uv）。
我会试一试，但是由于是着色器编程的新手，如果您知道我可以用作指导的示例，请告诉我，它会很棒。非常感谢@Tapio。