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

Collision

Dos fuentes orbitan. Las ondas chocan.

Un ripple sale del centro. Dos ripples desde puntos diferentes crean interferencia, donde se cruzan, las ondas se suman o se cancelan. Patrones complejos de interacción.

Dos piedras al mismo lago.

InterferenciaSumar dos sin() desde orígenes diferentes. Donde se alinean = onda fuerte. Donde se oponen = calma. Es como dos altavoces en un cuarto, hay zonas de sonido y zonas de silencio.
PruebaCambia el *.5 de o1 (el radio de la órbita) a *.9, fuentes separadas, interferencia compleja. A *.15, fuentes encimadas, interferencia tirante. Cambia T*.25 a T*1.5 y las fuentes giran rapidísimo.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec2 o1 = vec2(cos(T*.25),sin(T*.25))*.5;
  vec2 o2 = -o1;
  float d1 = length(p-o1), d2 = length(p-o2);
  float r1 = sin(d1*10.-T*2.)*.5+.5;
  float r2 = sin(d2*10.-T*2.)*.5+.5;
  float v = (r1+r2)*.5;
  v *= smoothstep(1.8, 0., min(d1,d2));
  float c1 = smoothstep(.08,.06, d1);
  float c2 = smoothstep(.08,.06, d2);
  float s1 = smoothstep(0.,.15, length(p-o1+vec2(.03,-.04))-.08);
  float s2 = smoothstep(0.,.15, length(p-o2+vec2(.03,-.04))-.08);
  vec3 col = vec3(.06,.02,.1) * s1 * s2;
  col += vec3(.85,.55,.6) * pow(v,.75);
  col += vec3(.95,.3,.4) * c1;
  col += vec3(.4,.3,.95) * c2;
  col += vec3(.95,.8,.85) * pow(v,4.) * .3;
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close