对于非常简单的伪随机的东西，我使用这个在线程序，我在互联网上找到的地方:

float rand(vec2 co){
    return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}

你也可以使用任何你喜欢的PRNG生成一个噪音纹理，然后以正常的方式上传这个，并在你的着色器中采样值;如果你愿意，我可以稍后再找一个代码样本。

另外，查看Stefan Gustavson的Perlin和Simplex噪声的GLSL实现文件。

这里还有一个由McEwan和@StefanGustavson描述的很好的实现，看起来像柏林噪声，但“不需要任何设置，即不需要纹理或统一数组。只需将它添加到你的着色器源代码，并在任何你想要的地方调用它”。

这非常方便，特别是考虑到Gustavson早期的实现，@dep链接到，使用1D纹理，这在GLSL ES (WebGL的着色语言)中是不支持的。

Gustavson的实现使用1D纹理

不，从2005年开始就没有了。只是人们坚持下载旧版本。您提供的链接上的版本仅使用8位2D纹理。

我和阿希玛的Ian McEwan共同开发的新版本没有使用纹理，但是在典型的桌面平台上，纹理带宽很大，运行速度只有它的一半左右。在移动平台上，无纹理版本可能更快，因为纹理通常是一个重要的瓶颈。

我们积极维护的源存储库是:

https://github.com/ashima/webgl-noise

这里是无纹理和使用纹理的噪音版本的集合(只使用2D纹理):

http://www.itn.liu.se/~stegu/simplexnoise/GLSL-noise-vs-noise.zip

如果您有任何具体的问题，请直接给我发电子邮件(我的电子邮件地址可以在经典噪声*中找到)。glsl来源。)

我突然想到，你可以使用一个简单的整数哈希函数，并将结果插入到浮点数的尾数中。IIRC, GLSL规范保证32位无符号整数和IEEE binary32浮点表示，因此它应该是完全可移植的。

我刚才试过了。结果非常好:我尝试的每个输入看起来都像静态的，根本没有可见的模式。相比之下，在相同的输入条件下，流行的sin/fract代码片段在我的GPU上有相当明显的对角线。

一个缺点是它需要GLSL v3.30。虽然它看起来足够快，但我还没有对它的表现进行实证量化。AMD的Shader Analyzer声称HD5870上的vec2版本每个时钟有13.33个像素。与sin/fract片段的每个时钟16像素相比。所以它肯定会慢一点。

这是我的实现。我把它写成了不同的形式这样更容易推导出你自己的函数。

/*
    static.frag
    by Spatial
    05 July 2013
*/

#version 330 core

uniform float time;
out vec4 fragment;



// A single iteration of Bob Jenkins' One-At-A-Time hashing algorithm.
uint hash( uint x ) {
    x += ( x << 10u );
    x ^= ( x >>  6u );
    x += ( x <<  3u );
    x ^= ( x >> 11u );
    x += ( x << 15u );
    return x;
}



// Compound versions of the hashing algorithm I whipped together.
uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }
uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }
uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }



// Construct a float with half-open range [0:1] using low 23 bits.
// All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.
float floatConstruct( uint m ) {
    const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask
    const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32

    m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)
    m |= ieeeOne;                          // Add fractional part to 1.0

    float  f = uintBitsToFloat( m );       // Range [1:2]
    return f - 1.0;                        // Range [0:1]
}



// Pseudo-random value in half-open range [0:1].
float random( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }
float random( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }
float random( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }
float random( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }





void main()
{
    vec3  inputs = vec3( gl_FragCoord.xy, time ); // Spatial and temporal inputs
    float rand   = random( inputs );              // Random per-pixel value
    vec3  luma   = vec3( rand );                  // Expand to RGB

    fragment = vec4( luma, 1.0 );
}

截图:

我在一个图像编辑程序中检查了截图。有256种颜色，平均值是127，这意味着分布均匀，涵盖了预期的范围。

一个直的、锯齿状的1d柏林版本，本质上是一个随机的lfo之字形。

half  rn(float xx){         
    half x0=floor(xx);
    half x1=x0+1;
    half v0 = frac(sin (x0*.014686)*31718.927+x0);
    half v1 = frac(sin (x1*.014686)*31718.927+x1);          

    return (v0*(1-frac(xx))+v1*(frac(xx)))*2-1*sin(xx);
}

我还在shadertoy所有者inigo quilez perlin教程网站上找到了1-2-3-4d perlin噪音，voronoi等等，他有完整的快速实现和代码。

刚找到这个版本的GPU 3d噪声，据说它是最快的一个可用的:

#ifndef __noise_hlsl_
#define __noise_hlsl_

// hash based 3d value noise
// function taken from https://www.shadertoy.com/view/XslGRr
// Created by inigo quilez - iq/2013
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// ported from GLSL to HLSL

float hash( float n )
{
    return frac(sin(n)*43758.5453);
}

float noise( float3 x )
{
    // The noise function returns a value in the range -1.0f -> 1.0f

    float3 p = floor(x);
    float3 f = frac(x);

    f       = f*f*(3.0-2.0*f);
    float n = p.x + p.y*57.0 + 113.0*p.z;

    return lerp(lerp(lerp( hash(n+0.0), hash(n+1.0),f.x),
                   lerp( hash(n+57.0), hash(n+58.0),f.x),f.y),
               lerp(lerp( hash(n+113.0), hash(n+114.0),f.x),
                   lerp( hash(n+170.0), hash(n+171.0),f.x),f.y),f.z);
}

#endif

黄金的噪音

// Gold Noise ©2015 dcerisano@standard3d.com
// - based on the Golden Ratio
// - uniform normalized distribution
// - fastest static noise generator function (also runs at low precision)
// - use with indicated fractional seeding method. 

float PHI = 1.61803398874989484820459;  // Φ = Golden Ratio   

float gold_noise(in vec2 xy, in float seed){
       return fract(tan(distance(xy*PHI, xy)*seed)*xy.x);
}

现在就在浏览器中查看黄金噪音!

这个函数在2017年9月9日@appas的回答中改善了当前函数的随机分布:

@appas函数也是不完整的，因为没有提供种子(uv不是种子-每帧都是一样的)，并且不能与低精度芯片组一起工作。默认情况下，Gold Noise以低精度运行(快得多)。

请看下面的例子如何添加白噪声渲染纹理。 解决方案是使用两种纹理:原始白噪声和纯白噪声，就像这个:wiki白噪声

private static final String VERTEX_SHADER =
    "uniform mat4 uMVPMatrix;\n" +
    "uniform mat4 uMVMatrix;\n" +
    "uniform mat4 uSTMatrix;\n" +
    "attribute vec4 aPosition;\n" +
    "attribute vec4 aTextureCoord;\n" +
    "varying vec2 vTextureCoord;\n" +
    "varying vec4 vInCamPosition;\n" +
    "void main() {\n" +
    "    vTextureCoord = (uSTMatrix * aTextureCoord).xy;\n" +
    "    gl_Position = uMVPMatrix * aPosition;\n" +
    "}\n";

private static final String FRAGMENT_SHADER =
        "precision mediump float;\n" +
        "uniform sampler2D sTextureUnit;\n" +
        "uniform sampler2D sNoiseTextureUnit;\n" +
        "uniform float uNoseFactor;\n" +
        "varying vec2 vTextureCoord;\n" +
        "varying vec4 vInCamPosition;\n" +
        "void main() {\n" +
                "    gl_FragColor = texture2D(sTextureUnit, vTextureCoord);\n" +
                "    vec4 vRandChosenColor = texture2D(sNoiseTextureUnit, fract(vTextureCoord + uNoseFactor));\n" +
                "    gl_FragColor.r += (0.05 * vRandChosenColor.r);\n" +
                "    gl_FragColor.g += (0.05 * vRandChosenColor.g);\n" +
                "    gl_FragColor.b += (0.05 * vRandChosenColor.b);\n" +
        "}\n";

共享的片段包含参数uNoiseFactor，该参数在主应用程序每次渲染时都会更新:

float noiseValue = (float)(mRand.nextInt() % 1000)/1000;
int noiseFactorUniformHandle = GLES20.glGetUniformLocation( mProgram, "sNoiseTextureUnit");
GLES20.glUniform1f(noiseFactorUniformHandle, noiseFactor);

散列: 现在有webGL2.0，所以整数可以在(w)GLSL中使用。 ->用于高质量的便携式哈希(成本与丑陋的浮动哈希相似)，我们现在可以使用“严肃的”哈希技术。 IQ在https://www.shadertoy.com/view/XlXcW4中实现了一些(以及更多)

例如:

  const uint k = 1103515245U;  // GLIB C
//const uint k = 134775813U;   // Delphi and Turbo Pascal
//const uint k = 20170906U;    // Today's date (use three days ago's dateif you want a prime)
//const uint k = 1664525U;     // Numerical Recipes

vec3 hash( uvec3 x )
{
    x = ((x>>8U)^x.yzx)*k;
    x = ((x>>8U)^x.yzx)*k;
    x = ((x>>8U)^x.yzx)*k;

    return vec3(x)*(1.0/float(0xffffffffU));
}

我已经将Ken Perlin的一个Java实现翻译成GLSL，并在ShaderToy的几个项目中使用了它。

以下是我做的GLSL解读:

int b(int N, int B) { return N>>B & 1; }
int T[] = int[](0x15,0x38,0x32,0x2c,0x0d,0x13,0x07,0x2a);
int A[] = int[](0,0,0);

int b(int i, int j, int k, int B) { return T[b(i,B)<<2 | b(j,B)<<1 | b(k,B)]; }

int shuffle(int i, int j, int k) {
    return b(i,j,k,0) + b(j,k,i,1) + b(k,i,j,2) + b(i,j,k,3) +
        b(j,k,i,4) + b(k,i,j,5) + b(i,j,k,6) + b(j,k,i,7) ;
}

float K(int a, vec3 uvw, vec3 ijk)
{
    float s = float(A[0]+A[1]+A[2])/6.0;
    float x = uvw.x - float(A[0]) + s,
        y = uvw.y - float(A[1]) + s,
        z = uvw.z - float(A[2]) + s,
        t = 0.6 - x * x - y * y - z * z;
    int h = shuffle(int(ijk.x) + A[0], int(ijk.y) + A[1], int(ijk.z) + A[2]);
    A[a]++;
    if (t < 0.0)
        return 0.0;
    int b5 = h>>5 & 1, b4 = h>>4 & 1, b3 = h>>3 & 1, b2= h>>2 & 1, b = h & 3;
    float p = b==1?x:b==2?y:z, q = b==1?y:b==2?z:x, r = b==1?z:b==2?x:y;
    p = (b5==b3 ? -p : p); q = (b5==b4 ? -q : q); r = (b5!=(b4^b3) ? -r : r);
    t *= t;
    return 8.0 * t * t * (p + (b==0 ? q+r : b2==0 ? q : r));
}

float noise(float x, float y, float z)
{
    float s = (x + y + z) / 3.0;  
    vec3 ijk = vec3(int(floor(x+s)), int(floor(y+s)), int(floor(z+s)));
    s = float(ijk.x + ijk.y + ijk.z) / 6.0;
    vec3 uvw = vec3(x - float(ijk.x) + s, y - float(ijk.y) + s, z - float(ijk.z) + s);
    A[0] = A[1] = A[2] = 0;
    int hi = uvw.x >= uvw.z ? uvw.x >= uvw.y ? 0 : 1 : uvw.y >= uvw.z ? 1 : 2;
    int lo = uvw.x <  uvw.z ? uvw.x <  uvw.y ? 0 : 1 : uvw.y <  uvw.z ? 1 : 2;
    return K(hi, uvw, ijk) + K(3 - hi - lo, uvw, ijk) + K(lo, uvw, ijk) + K(0, uvw, ijk);
}

我从Ken Perlin's Noise Hardware的第二章附录B中翻译过来:

https://www.csee.umbc.edu/~olano/s2002c36/ch02.pdf

下面是我在Shader Toy上做的一个公共阴影，它使用了张贴噪音功能:

https://www.shadertoy.com/view/3slXzM

在我的研究中，我发现了一些关于噪音的其他好的来源，包括:

https://thebookofshaders.com/11/

https://mzucker.github.io/html/perlin-noise-math-faq.html

https://rmarcus.info/blog/2018/03/04/perlin-noise.html

http://flafla2.github.io/2014/08/09/perlinnoise.html

https://mrl.nyu.edu/~perlin/noise/

https://rmarcus.info/blog/assets/perlin/perlin_paper.pdf

https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch05.html

我强烈推荐这本着色器的书，因为它不仅提供了一个很好的噪音交互解释，而且还提供了其他着色器概念。

编辑:

也许可以通过使用GLSL中提供的一些硬件加速函数来优化翻译后的代码。如果我最终这样做了，我会更新这篇文章。

一定要用这个:

highp float rand(vec2 co)
{
    highp float a = 12.9898;
    highp float b = 78.233;
    highp float c = 43758.5453;
    highp float dt= dot(co.xy ,vec2(a,b));
    highp float sn= mod(dt,3.14);
    return fract(sin(sn) * c);
}

不要用这个:

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

您可以在改进OpenGL ES 2.0的规范一行程序GLSL rand()中找到解释

在2010年首次发布这个问题之后，在良好的随机函数和硬件支持方面发生了很大的变化。

从今天的角度来看，这个算法抽取的随机数的一致性很差。均匀性受到输入值大小的很大影响，当从输入值中采样时，例如射线/路径跟踪应用程序，可见的工件/模式将变得明显。

There have been many different functions (most of them integer hashing) being devised for this task, for different input and output dimensionality, most of which are being evaluated in the 2020 JCGT paper Hash Functions for GPU Rendering. Depending on your needs you could select a function from the list of proposed functions in that paper and simply from the accompanying Shadertoy. One that isn't covered in this paper but that has served me very well without any noticeably patterns on any input magnitude values is also one that I want to highlight.

其他类型的算法使用低差异序列来绘制伪随机数，例如带有Owen-Nayar置乱的Sobol序列。Eric Heitz在这一领域做了一些惊人的研究，以及他在Screen Space论文中将蒙特卡罗误差分布为蓝色噪声的低差异采样器。 另一个例子是(迄今为止最新的)JCGT论文基于实用哈希的Owen置乱，它将Owen置乱应用于不同的哈希函数(即Laine-Karras)。

然而，其他类别使用算法来产生具有理想频谱的噪声模式，例如蓝色噪声，它特别“取悦”眼睛。

(我意识到好的StackOverflow答案应该提供算法作为源代码，而不是链接，因为那些可能会中断，但现在有太多不同的算法，我打算把这个答案作为今天已知的好算法的总结)

Lygia，一个多语言着色器库

如果你不想复制/粘贴函数到你的着色器，你也可以使用lygia，一个多语言着色器库。它在GLSL和HLSL中都包含了一些生成函数，如cnoise, fbm, noised, pnoise, random, snoise。还有很多其他很棒的功能。要做到这一点:

#上的接力包括“文件”，由Khronos GLSL标准定义，并被大多数引擎和环境(如glslViewer, GLSL -canvas VS Code插件，Unity等)所支持。

例如:cnoise

使用cnoise。GLSL与#包括:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

#include "lygia/generative/cnoise.glsl"

void main (void) {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    vec3 color = vec3(cnoise(vec3(st * 5.0, u_time)));

    gl_FragColor = vec4(color, 1.0);
}

为了运行这个例子，我使用了glslViewer。

我也有同样的问题，我需要在WebGL 1.0中实现它，所以我不能使用之前回答中给出的一些例子。我尝试了前面提到的Gold Noise，但是PHI的使用并不适合我。(距离(xy * PHI, xy) *种子就等于长度(xy) * (1.0 - PHI) *种子，所以我不明白当它直接乘以种子时，PHI的魔力应该如何发挥作用?

不管怎样，我做了类似的事情，只是没有PHI，而是在另一个地方添加了一些变化，基本上我取xy与框架外的某个随机点之间的距离的tan，然后乘以xy与另一个这样的随机点之间的距离，位于左下角(所以这些点之间没有偶然的匹配)。在我看来还不错。单击生成新的帧。

(function main() { const dim = [512, 512]; twgl.setDefaults({ attribPrefix: "a_" }); const gl = twgl.getContext(document.querySelector("canvas")); gl.canvas.width = dim[0]; gl.canvas.height = dim[1]; const bfi = twgl.primitives.createXYQuadBufferInfo(gl); const pgi = twgl.createProgramInfo(gl, ["vs", "fs"]); gl.canvas.onclick = (() => { twgl.bindFramebufferInfo(gl, null); gl.useProgram(pgi.program); twgl.setUniforms(pgi, { u_resolution: dim, u_seed: Array(4).fill().map(Math.random) }); twgl.setBuffersAndAttributes(gl, pgi, bfi); twgl.drawBufferInfo(gl, bfi); }); })(); <script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script> <script id="vs" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec2 a_texcoord; void main() { gl_Position = a_position; } </script> <script id="fs" type="x-shader/x-fragment"> precision highp float; uniform vec2 u_resolution; uniform vec2 u_seed[2]; void main() { float uni = fract( tan(distance( gl_FragCoord.xy, u_resolution * (u_seed[0] + 1.0) )) * distance( gl_FragCoord.xy, u_resolution * (u_seed[1] - 2.0) ) ); gl_FragColor = vec4(uni, uni, uni, 1.0); } </script> <canvas></canvas>