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

Turbulence

Tres frecuencias. Los cuadrados nunca se calman.

Una sola fuerza se siente mecánica. Tres fuerzas a frecuencias diferentes se sienten fluidas, porque nunca se alinean. El movimiento nunca se repite exactamente.

Bandera en día de viento.

Tres sin() sumadossin(T*0.3) + sin(T*0.17) + sin(T*0.07). Las frecuencias son irracionales entre sí. El ciclo antes de repetirse es de más de una hora. Eso es turbulencia real.
PruebaCambia el .35 (amplitud principal) a 0.1, turbulencia sutil. A 0.8, caos total. Cambia el T*.3 a T*.1, todo lento, contemplativo. A T*1., frenético.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  vec3 col = vec3(0.05, 0.02, 0.1);
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    float ox = sin(T*.3+fi)*.35+sin(T*.17+fi*2.)*.18+sin(T*.07+fi*3.)*.12;
    float oy = sin(T*.23+fi)*.3+sin(T*.13+fi*2.5)*.15;
    vec2 c = vec2(-0.6+fi*.3+ox, oy);
    float rot = ox*.5;
    float ca=cos(rot),sa=sin(rot);
    vec2 rp = p-c; rp = vec2(rp.x*ca-rp.y*sa,rp.x*sa+rp.y*ca);
    float sz = 0.1+fi*.02;
    vec2 q = abs(rp)-vec2(sz);
    float d = max(q.x,q.y);
    vec2 rs = rp+vec2(.04,-.05);
    col *= smoothstep(-.02,.12,max(abs(rs.x)-sz,abs(rs.y)-sz));
    col += vec3(.92-fi*.15,.35+fi*.12,.08+fi*.15) * smoothstep(.01,-.01,d) * (.6+fi*.1);
    col += vec3(.45-fi*.07,.18+fi*.06,.04+fi*.08) * exp(-max(d,0.)*5.) * .2;
  }
  gl_FragColor = vec4(col, 1.);
}
close