如何使用噪声制作一系列彩色矩形?
How do I make a series of colorful Rectangles using noise?
我目前正在学习如何在 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 颜色”变量,我都无法让它显示各种颜色的矩形。
我的问题是:如何调整我的代码,使其分解为少数几个矩形而不是正方形和矩形,以及如何使我的颜色应用于这些矩形?这对我来说仍然很陌生,所以感谢任何帮助。
how can I make my color apply to those rectangles
你必须将 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, 1.0, 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, 1.0, 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);
}
我目前正在学习如何在 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 颜色”变量,我都无法让它显示各种颜色的矩形。
我的问题是:如何调整我的代码,使其分解为少数几个矩形而不是正方形和矩形,以及如何使我的颜色应用于这些矩形?这对我来说仍然很陌生,所以感谢任何帮助。
how can I make my color apply to those rectangles
你必须将 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, 1.0, 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, 1.0, 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);
}