learn GLSL from zero
ToolsCrea con shadersShader MakerCrea shaders gratis en líneaToolkitObras de shaders listas para tu webSketcher LabPinta el hero de tu landing con shaders3D StudioEl editor Three.js en tu navegador
GamesJuega con shadersOnomatoShaderEscribe una palabra y explótalaThe WatcherUn ojo que te sigueAetherVidrio líquido con un ojo adentroBloomcoreUna palabra hace crecer un jardín de luzPyrokineAvienta fuego a la paredVoltaicLa pirámide lanza rayosSurfSurfea un océano de shader

Lección 2 de 10 · Ruido en GLSL

Suave

De bloques a señal.

La estática es interesante pero dura. Para que sea usable necesitas suavizarla. n2() mezcla los bloques vecinos para que la transición sea continua.

La estática aprende a fluir. De bloques a señal.

n2(p)Value noise. Mezcla los 4 bloques vecinos según tu posición. Ondulaciones suaves en vez de bloques.
PruebaCambia 4. a 10., ondas más chicas. A 2., grandes.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float bar = n2(vec2(p.y * 4.0, 0.5));
  float signal = sin(p.x * 20.0 + bar * 8.0) * 0.5 + 0.5;
  signal = smoothstep(0.3, 0.7, signal);
  float noise = n2(p * 8.0) * 0.15;
  vec3 col = vec3(0.0, signal * 0.85, signal * 0.65);
  col += vec3(signal * 0.5, 0.0, signal * 0.3) * step(0.7, bar);
  col += noise;
  col *= 0.9 + 0.1 * step(0.5, sin(gl_FragCoord.y * 2.0) * 0.5 + 0.5);
  col += vec3(0.015, 0.01, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close