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 3 de 10 · Ruido en GLSL

Capas

Más capas. Más resolución.

Un solo layer de noise es liso. Apilar capas le da detalle: la primera da la forma grande, la segunda agrega textura, la tercera agrega grano. Se llaman octavas.

Bajo, medio, agudo. La señal tiene profundidad.

OctavasCada capa duplica la frecuencia y reduce la amplitud. 3 capas se ven bien.
PruebaPon // al inicio de la línea b3 para apagarla, solo quedan dos capas, menos detalle. Apaga también b2 con //, solo queda la forma grande. Cambia el 6. (la frecuencia de b1) a 12. y la forma grande se aprieta.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float b1 = step(0.5, sin(p.y*6.+n2(vec2(p.y*2.,1.))*3.)*.5+.5);
  float b2 = step(0.5, sin(p.y*12.+n2(vec2(p.y*4.,2.))*3.)*.5+.5);
  float b3 = step(0.5, sin(p.y*24.+n2(vec2(p.y*8.,3.))*3.)*.5+.5);
  float scan = step(0.5, sin(gl_FragCoord.y*1.5)*.5+.5)*.08;
  vec3 col = vec3(0.01, 0.02, 0.03);
  col += vec3(0.0, 0.4, 0.35) * b1;
  col += vec3(0.5, 0.0, 0.6) * b2 * 0.5;
  col += vec3(0.9, 0.0, 0.4) * b3 * 0.35;
  float peak = b1 * b2 * b3;
  col += vec3(0.9, 0.95, 1.0) * peak * 0.5;
  float edge = abs(b1 - b2) * abs(b2 - b3);
  col += vec3(0.0, 0.8, 0.6) * edge * 0.3;
  col *= 1.0 - scan;
  col += vec3(0.015, 0.01, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close