GLSL：如何在顶点着色器中使用随机值更新每个顶点的位置？答案

【问题标题】：GLSL: How to update the position of each vertex with random values in vertex-shader?GLSL：如何在顶点着色器中使用随机值更新每个顶点的位置？
【发布时间】：2018-11-07 03:09:17
【问题描述】：

我是 vertex-shader 的新手，我正在使用 threejs morphTargets 和 Points 材质来渲染我的对象的网格，我正在使用 vertex-shader 来渲染和动画网格。

在每个顶点我都放置了一个球体图像（比如分子），我希望它们在 x 和 y 方向上随机振动。我正在尝试添加一些随机值，以便它们在随机方向上以相同的速率振动。

void main() {

    //Morph the position based on morphTargets
    vec3 morphed = vec3( 0.0 , 0.0 , 0.0 );
    morphed += ( morphTarget0 - position ) * morphTargetInfluences[0];
    morphed += position;

    // // vibrate the molecules based on temperature
     float degrees = temperature + 60.0;
     float amplitude = degrees + 100.0 / degrees;
     float rand1 = (random * rand(position.xy)  * amplitude) * 0.00001;
     morphed.x = morphed.x + rand1;
     morphed.y = morphed.y + rand1;
    //morphed.z = morphed.z + rand1;

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

上面的代码是在同一个方向振动分子，看起来整个分子容器在移动而不是分子。

那么我怎样才能得到每个顶点的随机振动呢？

【问题讨论】：

据我所知，WebGL 中没有 random 函数 - 您需要为每个球体传入一个随机数字，每次都会更新。
或者你可以编写自己的rand()函数。 Tutorial.
另一个注意事项是，即使你得到一个随机函数，你也需要更新每个点并保存输出，以便位置是连续的（假设你的位置从 0,0 变为（- 1, 0 ) 到 (37, 0) 等。更便宜的解决方案可能是对随机偏移使用噪声函数。

标签： three.js glsl blender vertex-shader

【解决方案1】：

使用noise function，它应该保证运动是连续的。

【讨论】：