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并将其从（-1，+ 1）重新映射到（0到1）来计算屏幕空间uv。

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，我们可以通过随机纹理或着色器中的某些数学计算应用屏幕空间噪声。假设你生成了一个随机纹理，那么噪音很简单：

vec4 noise = texture2D(u_randomTexture, screenUV);

如果要在着色器中使用计算，请考虑实现类似perlin2D噪声或者在shadertoy中搜索。

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

1 个答案: