three.js / webGL / GLSL - 利用随机数学

Question

我正在使用 three.js 来调用片段着色器——该着色器为我的材质指定一种颜色，分解为 rgb——我想看看是否可以将这些颜色乘以一个随机值。这是我目前使用的代码：

gl_FragColor = vec4( color.r*.5, color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values

如果它是 javascript，这就是我想要做的，但显然这在 GLSL 着色器脚本中不起作用：

gl_FragColor = vec4( color.r*Math.random(), color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values

Answer 1

对于着色器中的伪随机值，我强烈推荐Ashima's WebGL noise library。它接受 x/y/z 值并吐出单纯形噪声。这意味着它从帧到帧都是稳定的。如果您需要改变的随机值，请将时间调制值传递给噪声函数。