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

Pulse

El hexágono pulsa. Ondas salen del golpe.

En vez de mover las coordenadas, mueves la intensidad del warp. warp * (0.5 + 0.3 * sin(T * 0.4)), la deformación sube y baja. El material se expande y contrae.

Inhala. Exhala. El warp respira.

Modular la amplitudNo mueves el material, lo aprietas y lo sueltas. Los patrones se concentran (contrae) y se relajan (expande). Es la técnica que hace que un shader se sienta vivo sin moverlo.
PruebaCambia el T*1. a T*0.3, pulsa muy lento. A T*3., hiperventila. Cambia el 0.15 (la amplitud del beat) a 0.05, pulso sutil. A 0.4, pulso enorme.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float beat = pow(sin(T*1.)*.5+.5, 2.)*.5 + pow(sin(T*1.+.35)*.5+.5, 2.)*.3;
  float r = 0.3 + beat * 0.15;
  vec2 ap = abs(p);
  float d = max(ap.x*.866+ap.y*.5, ap.y) - r;
  float shape = smoothstep(.02, -.02, d);
  float rings = sin(length(p)*20.-T*3.)*.5+.5;
  rings *= smoothstep(r+.3, r, length(p));
  vec2 sp = abs(p+vec2(.05,-.07));
  float shadow = smoothstep(0.,.25, max(sp.x*.866+sp.y*.5,sp.y)-r*1.1);
  float glow = exp(-max(d,0.)*3.) * .5;
  vec3 col = vec3(.06,.02,.12) * shadow;
  col += vec3(.85,.08,.35) * shape;
  col += vec3(1.,.55,.7) * rings * .15;
  col += vec3(.9,.3,.5) * glow;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close