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

Estática

El ruido crudo. Hash puro.

En Forces usaste fb() como caja negra, generaba textura irregular y tú la movías. Ahora vamos a abrirla. Todo empieza aquí: el ruido crudo. Piensa en la estática de una TV vieja, ruido visual que llena la pantalla.

h2() genera eso. Le das una coordenada, te devuelve un número entre 0 y 1 que parece aleatorio. Caos controlado.

h2() genera caos. Cada celda, un dado digital.

h2(p)Un hash. Posición 2D entra, valor pseudo-aleatorio sale. La base de todo lo que viene, y de la fb() que ya conoces.
PruebaCambia el 12. a 50., más fino, granito digital. A 3., bloques grandes como tile de baño.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec2 grid = floor(p * 12.0);
  float id = h2(grid);
  float dead = step(0.92, id);
  float scan = step(0.5, sin(gl_FragCoord.y * 1.5) * 0.5 + 0.5) * 0.12;
  vec3 col = vec3(0.0);
  col.r = step(0.6, h2(grid + 0.1)) * 0.8;
  col.g = step(0.5, h2(grid + 0.2)) * 0.9;
  col.b = step(0.55, h2(grid + 0.3)) * 0.7;
  col *= 1.0 - dead;
  col += vec3(0.9, 0.0, 0.4) * dead * 0.3;
  col *= 1.0 - scan;
  col += vec3(0.01, 0.02, 0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close