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

Tu pieza de noise

Dos capas. Dos direcciones. Tu pieza.

Todo lo que aprendiste en Noise. Dos capas de FBM moviéndose en direcciones opuestas, colores sunset, recortado con vignette.

La terminal completa. Cada técnica que aprendiste, cayendo.

PruebaCambia el 6. (densidad vertical de gotas) a 12., caen más rápido y apretadas. Cambia el 8. (cantidad de columnas) a 4. y son columnas anchas. Cambia el 0.3 y el 0.8 en speed para que el ritmo entre columnas cambie. Este noise es tuyo.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float d = length(p);
  float glitch = step(0.93, h2(vec2(floor(T * 5.0), floor(p.y * 6.0))));
  p.x += glitch * 0.2;
  float shift = 0.04;
  float col_id = floor(p.x * 8.0);
  float speed = 0.3 + h2(vec2(col_id, 0.0)) * 0.8;
  float scroll = p.y + T * speed;
  float data = step(0.45, h2(vec2(col_id, floor(scroll * 6.0))));
  float trail = exp(-fract(scroll * 6.0) * 2.5);
  float r = step(0.45, h2(vec2(floor((p.x+shift) * 8.0), floor(scroll * 6.0))));
  float b = step(0.45, h2(vec2(floor((p.x-shift) * 8.0), floor(scroll * 6.0))));
  vec3 col = vec3(r * 0.6, data * 0.9, b * 0.5) * trail;
  col += vec3(0.0, 0.85, 0.65) * step(0.9, data) * trail;
  col += vec3(0.9, 0.0, 0.5) * glitch * 0.5;
  vec2 gridLine = abs(fract(p * 8.0) - 0.5);
  float grid = 1.0 - smoothstep(0.0, 0.03, min(gridLine.x, gridLine.y));
  col += vec3(0.0, 0.2, 0.15) * grid * 0.15;
  float scan = step(0.5, sin(gl_FragCoord.y * 1.5) * 0.5 + 0.5) * 0.1;
  col *= 1.0 - scan;
  col *= 1.0 - d * 0.15;
  col += vec3(0.015, 0.01, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close