改变位置 Three.js / webgl 顶点着色器答案

【问题标题】：Change Position Three.js / webgl vertex shader改变位置 Three.js / webgl 顶点着色器
【发布时间】：2015-12-20 12:33:47
【问题描述】：

您好，我制作了一个粒子系统，使用 three.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;',

不改变粒子位置？

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

【问题讨论】：

什么是position？制服？
我没有头绪，我是这样使用的：_this.geometry.addAttribute('position', new THREE.BufferAttribute( _this.particleVertices, 3 ));
好的，所以我刚刚读到，位置是一个属性而不是制服，我认为制服是从主程序更新的，但属性没有？
现在我明白为什么人们使用时间变量了，制服会随着每个渲染循环而更新，这个值可以应用于属性，现在我的粒子正在移动，感谢 Austin。

标签： javascript opengl-es three.js particle-system

【解决方案1】：

搞定了，position是一个Attribute，我需要给Shader传一个uniform，这个可以用来增加position的Attribute。

顶点着色器：

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');

【讨论】：