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

Movimiento

Lo estático cobra vida. Una línea.

FBM estático es una foto. Súmale T a las coordenadas y empieza a moverse. La velocidad cambia todo.

Cascada de bits que nadie detuvo.

fb(p + T * vel)El tiempo desplaza las coordenadas. El noise se calcula en una posición que cambia cada frame.
PruebaCambia el 0.5 (velocidad base) a 2., frenético. A 0.1, todo cae lento. Cambia el 1.5 (cuánto varía cada columna) a 0. y todas las columnas caen al mismo ritmo.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float col_id = floor(p.x * 10.0);
  float speed = 0.5 + h2(vec2(col_id, 0.0)) * 1.5;
  float scrolled = p.y + T * speed;
  vec2 grid = vec2(col_id, floor(scrolled * 8.0));
  float id = h2(grid);
  float on = step(0.4, id);
  float bright = step(0.85, id);
  float trail = exp(-fract(scrolled * 8.0) * 3.0);
  vec3 col = vec3(0.0, on * 0.5 * trail, on * 0.4 * trail);
  col += vec3(0.0, 0.9, 0.7) * bright * trail;
  col += vec3(0.01, 0.02, 0.02);
  gl_FragColor = vec4(col, 1.);
}
close