如何在 WEBGL 着色器中创建噪声？

Question

我正在寻找在 WEBGL 着色器中创建一些噪音的方法。着色器本身内部顶点位移或颜色随机化的一些噪声。我想将它放在着色器中，以便不考虑我正在渲染的内容。只是为了使当前片段颜色随机化或顶点位置移动一点。

你可以在这里看到我的着色器代码： https://github.com/rantiev/webgl-learning/blob/master/stars/index.html

这是简单的着色器：

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;    
    varying vec2 vTextureCoord;    
    uniform sampler2D uSampler;    
    uniform vec3 uColor;    
    void main(void) {
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }   
</script>

Answer 1

这是一种方法：

首先，我们通过 gl_Position.xy 除以 gl_Position.ww 计算屏幕 space uv，并将其从 (-1, +1) 重新映射到 (0 到 1)。

vec4 projCoords = projection * view * model * attr_pos;

vec2 screenUV = projCoords.xy/projCoords.ww; // (from -1 to 1)
screenUV = screenUV * 0.5 + 0.5; // remap to (0 to 1)

然后使用此 uv，我们可以通过随机纹理或着色器中的一些数学计算来应用屏幕 space 噪声。假设您生成了一个随机纹理，那么噪音就是：

vec4 noise = texture2D(u_randomTexture, screenUV);

如果您想在着色器中使用计算，请研究实现类似 perlin2D 噪声的东西，或者可能在 shadertoy 中搜索。

如何在 WEBGL 着色器中创建噪声？

How to create noise inside WEBGL shader?

shader

glsl

webgl