Question

您好我制作了一个粒子系统，使用三个.js它使用普通的JavaScript循环来改变粒子位置，但这很慢。

因此我开始学习如何通过着色器将其传输到GPU。

我有一个问题，我无法改变位置，每个点都保持在同一位置。

var vertexShader = [
        'void main() {',
        '    vec3 newPosition = position.xyz;',
        '    newPosition.y += 10.0;',
        '    gl_PointSize = 1.00;',
        '    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );',
        '}',
    ].join('\n');

为什么

'    newPosition.y += 10.0;',

不改变粒子位置？

我是否需要某种时间变量，我注意到人们似乎有这些？感谢。

Answer 1

我把它弄出来了，position是一个Attribute，我需要将一个制服传递给Shader，这可以用来增加位置属性。

顶点着色器：

var vertexShader = [
        'uniform float time;',
        'void main() {',
        '   vec3 newPos = position;',
        '   newPos.x += time;',
        '   gl_PointSize = 1.00;',
        '   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPos, 1.0 );',
        '}',
    ].join('\n');

更改位置Three.js / webgl顶点着色器

1 个答案: