Question

为了学习顶点/片段着色器，我决定通过更新顶点着色器中某点的y位置并使用Three.js PointCloud将其重置为动画来创建简单的降雨效果。我让它在屏幕上动画一次，但在重置y位置后卡住了。

uniform float size;
uniform float delta;

varying float vOpacity;
varying float vTexture;
void main() {
    vOpacity = opacity;
    vTexture = texture;
    gl_PointSize = 164.0;       
    vec3 p = position;
    vec3 p = position;

    p.y -= delta * 50.0;
    vec4 mvPosition = modelViewMatrix * vec4(1.0 * p, 1.0 );
    vec4 nPos = projectionMatrix * mvPosition;

    if(nPos.y < -200.0){
        nPos.y = 100.0;
    }
    gl_Position = nPos;
}

有什么想法吗？感谢

Answer 1

着色器不会永久更改顶点位置

这意味着

gl_Position = nPos;

不会传播到几何体中的位置属性

着色器仅在显卡上运行，无法访问浏览器内存

您可以将代码更改为：

nPos.y = mod(nPos.y, 300.0) - 200.0;

现在y坐标应该根据需要改变（从100到-200然后再回到100）

Three.js / Webgl vertex.y不会更新

1 个答案: