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

Todo junto

Todas las fuerzas. Todas las figuras. Una pieza.

Esta lección no enseña nada nuevo. Junta todas las fuerzas que aprendiste en una pieza.

Mira el código, cada bloque ya lo conoces:

Todo se jala hacia el centro. El vórtice gira, el Chladni dibuja, el ripple empuja, la respiración nunca se repite. Todo automático, todo vivo.

Nueve fuerzas corriendo en paralelo. Un solo output.

PruebaCambia el T*1.2 (pulso del círculo) a T*3. y el círculo late nervioso. Cambia el T*.3 (órbita del triángulo) a T*1. y gira en serio. Cambia el length(p)*12. a length(p)*4. y las ondas se abren. Esta pieza es tuya.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float beat = pow(sin(T*1.2)*.5+.5, 4.);
  // Circle, pulses
  float dc = length(p-vec2(-.5,sin(T*.3)*.25))-(.18+beat*.1);
  // Square, falls
  float y = mod(-T*.2+1., 3.)-1.5;
  vec2 sq = abs(p-vec2(0.,y))-vec2(.15);
  float ds = max(sq.x,sq.y);
  // Triangle, orbits
  float a = T*.3;
  vec2 tc = vec2(cos(a),sin(a))*.5;
  float ca=cos(a*2.),sa=sin(a*2.);
  vec2 tp = p-tc; tp = vec2(tp.x*ca-tp.y*sa, tp.x*sa+tp.y*ca);
  vec2 at = abs(tp);
  float dt = max(at.x*.866+tp.y*.5, -tp.y) - .12;
  // Ripple
  float ripple = sin(length(p)*12.-T*2.)*.5+.5;
  ripple *= exp(-length(p)*1.2) * .2;
  vec3 col = vec3(.03,.02,.06);
  col += vec3(.5,.4,.7) * ripple;
  col += vec3(0.,.4,.5) * exp(-max(dc,0.)*3.)*.35;
  col += vec3(.0,.7,.9) * smoothstep(.02,-.02,dc);
  col += vec3(.45,.15,.05) * exp(-max(ds,0.)*3.)*.35;
  col += vec3(.9,.32,.1) * smoothstep(.01,-.01,ds);
  col += vec3(.5,.42,.1) * exp(-max(dt,0.)*3.)*.35;
  col += vec3(.95,.85,.2) * smoothstep(.01,-.01,dt);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close