使用Three.js和Shader进行粒子系统设计

Question

我是这个社区的新手。当我问问题是否有我声称不对的地方时，请纠正我。

至此，我正在使用Three.js库设计一个粒子系统，特别是我正在使用THREE.Geometry（）并使用着色器控制顶点。我希望我的粒子运动被限制在一个盒子内，这意味着当一个粒子越过盒子的一个面时，它的新位置将在那个面的另一侧。

这是我在顶点着色器中的处理方法：

uniform float elapsedTime;

        void main() {
            gl_PointSize = 3.2;
            vec3 pos = position;

            pos.y -= elapsedTime*2.1;

            if( pos.y < -100.0) {
                pos.y = 100.0;
            }



            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0 );
        }

ellapsedTime是从JavaScript动画循环通过统一发送的。并且每个顶点的y位置将根据时间进行更新。作为测试，我想如果一个粒子低于底平面（y = -100），它将移动到顶平面。那是我的计划。这是他们全部触底之后的结果：

开始跌倒

到达底部之后

>>

所以，我在这里想念什么？

我是这个社区的新手。当我问问题是否我声称不正确时，请纠正我。现在，我要使用Three.js库设计一个粒子系统，特别是...

Answer 1

您无法在着色器中更改状态。顶点着色器仅输出为gl_Position（生成点/线/三角形），并将其变化传递给片段着色器。片段着色器的唯一输出是gl_FragColor（通常）。因此，尝试更改pos.y将无济于事。着色器退出更改的那一刻被忘记了。