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 · Fuerzas en un shader

Ripple

Anillos desde el centro. La piedra al lago.

sin(length(p) - T), ondas concéntricas que se expanden desde el centro. Como tirar una piedra a un lago. La distancia crea los anillos, T los empuja hacia afuera.

Sumamos el ripple al warp, las ondas deforman el material en vez de pintarse encima. El camo se ondula como si alguien hubiera golpeado la superficie.

La piedra que tiraste al lago.

sin(length(p) - T)length(p) = distancia al centro (anillos). Restarle T = los anillos se mueven hacia afuera. Multiplicar por amplitud = qué tanto deforman.
PruebaCambia el d*12. a d*4., ondas anchas. A d*30., ondas apretadas y nerviosas. Cambia el T*2.5 a T*0.5, ondas perezosas. A T*6., golpe fuerte.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float d = length(p);
  float ripple = sin(d*12.-T*2.5)*.5+.5;
  float ring = smoothstep(.04,.0,abs(fract(d*3.-T*.5)-.5)-.2);
  ripple *= smoothstep(1.5, 0., d);
  float center = smoothstep(.12,.1, d);
  float shadow = smoothstep(0.,.2, length(p+vec2(.03,-.05))-.12);
  vec3 col = vec3(.015,.02,.08) * shadow;
  col += vec3(.2,.35,.9) * ripple;
  col += vec3(.65,.85,1.) * ring * .3;
  col += vec3(.4,.6,.95) * center;
  col += vec3(.8,.9,1.) * exp(-d*3.) * .4;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close