three.js / webGL / GLSL - 利用随机数学 [英] three.js / webGL / GLSL - utilizing random math

问题描述

我使用three.js调用片段着色器 - 该着色器为我的素材指定颜色，分为rgb - 我想看看是否可以将这些颜色乘以随机值。这是我到目前为止使用的代码：

I am using three.js to call a fragment shader - that shader specifies a color for my material, broken out into rgb - and I want to see if I can multiply those colors by a random value. This is the code I'm using so far:

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着色器脚本中不起作用：

and this is what I'd want to do if it were javascript, though obviously this doesn't work inside a GLSL shader script:

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

推荐答案

着色器中的伪随机值我强烈建议 Ashima的WebGL噪声库。它采用x / y / z值并吐出单纯噪声。这意味着它在帧与帧之间是稳定的。如果需要随机值，则将时间调制值传递给噪声函数。

For psuedorandom values in a shader I highly recommend Ashima's WebGL noise library. It takes in a x/y/z value and spits out simplex noise. This means it's stable from frame to frame. If you need random values that change pass a time-modulated value into the noise function.

这篇关于three.js / webGL / GLSL - 利用随机数学的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！