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

【问题标题】：How to create noise inside WEBGL shader?如何在 WEBGL 着色器中创建噪声？
【发布时间】：2016-09-14 20:52:11
【问题描述】：

我正在寻找在 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>

【问题讨论】：

“GLSL 噪音”的快速谷歌搜索带来了很多。 These ones on stackoverflow for example。 This article from the Book of Shaders。搜索 shadertoy.com 也会弹出lots of examples
Here 是一个很棒的存储库，具有多种不需要纹理或其他统一输入的噪声函数。每个文件都是完全自给自足的。只需将整个文件复制粘贴到您的着色器中即可享受。
谢谢大家。我说的是 WEBGL，看着你提出的这些链接（我以前看过）我有更多的问题。什么是 .glsl 文件等。我想在 HTML 的着色器脚本中添加噪音。我认为没有任何 .glsl 文件 c++ 示例和其他疯狂的东西是可能的。我可能错了 - WEBGL 新手。
谢谢，现在我知道我可以使用 .glsl 了，以为它与 WEBGL 无关。

标签： glsl webgl shader

【解决方案1】：

这是一种方法：

首先，我们通过将gl_Position.xy 除以gl_Position.ww 来计算屏幕空间 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，我们可以通过随机纹理或着色器中的一些数学计算来应用屏幕空间噪声。假设你生成了一个随机纹理，那么噪声就是：

vec4 noise = texture2D(u_randomTexture, screenUV);

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

【讨论】：

是的，我确实想要在着色器本身内部进行计算。并且仍然不知道shadertoy如何提供帮助。不知道，因为在着色器玩具中我们没有顶点/片段着色器，我们有一段我不能在 javascript 中使用的代码。
啊，现在我明白了你的想法，让它工作。虽然使用 gl_Position 没有给出任何随机化，但我没有使用随机纹理，想要不使用任何其他纹理连接。是否有可能使用来自 js 或任何其他语言的 Math.random() 等函数？
没有。 EL5：您所做的是将github.com/ashima/webgl-noise/blob/master/src/noise2D.glsl 复制并粘贴到着色器中，然后将噪声计算为float noise = snoise(screenUV);
太好了，谢谢。我似乎无法使用.glsl，我想我需要无论如何连接这些文件或上传到任何浏览器或系统文件夹等。