如何使用噪声制作一系列彩色矩形？

如何解决如何使用噪声制作一系列彩色矩形？

我目前正在学习有关在GLSL中生成噪声模式的信息。

我正在尝试使用GLSL中的片段着色器创建矩形，颜色和噪点的组合。这是我当前的代码：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;

// 2D Random
float random (in vec2 st) {
    return fract(sin(dot(st.xy,vec2(12.9898,79)))
             * 43758.5453123);
}

float noise (in vec2 st) 
{
    vec2 i = floor(st + 1.0);
    vec2 f = fract(st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0,0.0));
    float c = random(i + vec2(0.0,1.0));
    float d = random(i + vec2(1.0,1.0));

    vec2 u = f*f*(3.0-2.0*f);
    u = smoothstep(0.6,1.0,f);

    // Mix 4 coorners percentages
    return mix(a,b,u.x) +
        (c - a)* u.y * (1.0 - u.x) +
        (d - b) * u.x * u.y;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    vec3 color = vec3(0.423,0.459,1.000);

    vec2 pos = vec2(st * 4.0);

    // Use the noise function
    float n = noise(pos);

    gl_FragColor = vec4(vec3(n),color);
}

目前我能生成的只是黑白正方形和矩形，无论我如何调整“ vec3颜色”变量，我都无法使其显示各种颜色的矩形。

我的问题是：如何调整代码，使其分解为少数几个矩形，而不是正方形和矩形？如何使颜色适用于这些矩形？这对我来说仍然是陌生的，因此不胜感激。

解决方法

如何使颜色适用于这些矩形

您必须将color乘以梯度n：

gl_FragColor = vec4(color * n,1.0);

---

矩形的错位与直线有关

u = smoothstep(0.6,1.0,f)

您必须根据平滑区域的大小移动矩形：

float noise (in vec2 st) 
{
    float smoothsize = 0.2;  
    st -= smoothsize;
    vec2 i = floor(st + 1.0);
    vec2 f = fract(st);

    // [...]

    vec2 u = f*f*(3.0-2.0*f);
    u = smoothstep(1.0- 2.0*smoothsize,f);
    
    // [...]
}

---

如果要生成正方形而不是矩形，则必须按纵横比缩放st.x：

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y; 

---

完整的片段着色器：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;

// 2D Random
float random (in vec2 st)
{
    return fract(sin(dot(st.xy,vec2(12.9898,79))) * 43758.5453123);
}

float noise (in vec2 st) 
{
    float smoothsize = 0.2;
    st -= smoothsize;
    vec2 i = floor(st + 1.0);
    vec2 f = fract(st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0,0.0));
    float c = random(i + vec2(0.0,1.0));
    float d = random(i + vec2(1.0,1.0));

    vec2 u = f*f*(3.0-2.0*f);
    u = smoothstep(1.0- 2.0*smoothsize,f);

    // Mix 4 corners percentages
    return mix(a,b,u.x) + (c-a) * u.y * (1.0-u.x) + (d-b) * u.x * u.y;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    // st.x *= u_resolution.x/u_resolution.y; <--- optional

    // Use the noise function
    float n = noise(st * 4.0);

    vec3 color = vec3(0.423,0.459,1.000);
    gl_FragColor = vec4(color * n,1.0);
}