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

Cambio de color

El campo recibe su capa.

Hasta ahora cada pixel pintaba un solo color. Ahora calculas el patrón tres veces, una por cada canal RGB, y desplazas las coordenadas un poquito entre ellas. El rojo no cae donde cae el azul.

Eso es aberración cromática: la señal se separa en sus primarios. El efecto clásico de TV rota o cámara barata.

Aberración cromática. La pantalla rota que ves bonita.

Tres muestreos, un offsetEl mismo cálculo de step+sin se repite tres veces. Uno con p + shift alimenta el rojo, otro con p alimenta el verde, otro con p - shift alimenta el azul. El shift respira con sin(T).
PruebaCambia el 0.06 (shift base) a 0.0 y la señal se recompone. A 0.2 y la aberración se vuelve psicodélica. Cambia el 0.5 (velocidad del respiro) a 2. y el efecto se acelera.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float shift = 0.06 + 0.03 * sin(T * 0.5);
  float scan = step(0.5, sin(gl_FragCoord.y * 2.0) * 0.5 + 0.5) * 0.08;
  vec2 pr = p + vec2(shift, 0.0);
  vec2 pb = p - vec2(shift, 0.0);
  float r = step(0.5, sin(pr.x * 15.0 + n2(vec2(pr.y * 3.0, 1.0)) * 4.0) * 0.5 + 0.5);
  float g = step(0.5, sin(p.x * 15.0 + n2(vec2(p.y * 3.0, 2.0)) * 4.0) * 0.5 + 0.5);
  float b = step(0.5, sin(pb.x * 15.0 + n2(vec2(pb.y * 3.0, 3.0)) * 4.0) * 0.5 + 0.5);
  vec3 col = vec3(r * 0.85, g * 0.9, b * 0.75);
  col *= 1.0 - scan;
  col += vec3(0.02);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close