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 · Domain warping

Liquid Metal

Figuras que se derriten y fusionan. T-1000.

Una lava lamp no scrollea, sus blobs flotan, se deforman, se separan. El truco: dos warps con T a velocidades diferentes. Uno empuja vertical, otro empuja diagonal. Los blobs se mueven en direcciones distintas y se deforman entre sí.

T * 0.12 es lento, gelatinoso. Los blobs no tienen prisa.

Mercurio derretido bajo gravedad cero.

Dos warps con TUn warp con T solo en Y = sube. Otro warp con T en X e Y a velocidades diferentes = se retuerce. Combinados = blobs que flotan de forma fluida.
PruebaCambia el 0.15 (la velocidad lenta) a 0.04 para cámara ultra lenta. A 0.4 y los blobs se vuelven nerviosos. Cambia el 0.1 (tamaño base de cada blob) a 0.18 y los blobs crecen hasta fusionarse en una sola masa.

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float slow = T * 0.15;
  float field = 0.0;
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    vec2 c = vec2(sin(slow*(.4+fi*.1)+fi*2.1)*.6, cos(slow*(.3+fi*.08)+fi*1.7)*.5);
    float r = 0.1+sin(fi*3.3)*.03;
    vec2 d = p-c;
    float shape = mix(length(d), max(abs(d.x),abs(d.y)), sin(fi*2.7)*.5+.5);
    field += r*r/(shape*shape+0.0001);
  }
  float edge = smoothstep(0.6,1.0,field);
  float body = smoothstep(1.0,2.0,field);
  float core = smoothstep(3.0,5.0,field);
  float spec = smoothstep(6.0,10.0,field);
  vec3 col = vec3(0.02,0.02,0.04);
  col += vec3(.15,.15,.2)*edge*(1.-body);
  col = mix(col, vec3(.55,.58,.65), body);
  col = mix(col, vec3(.8,.82,.88), core);
  col = mix(col, vec3(1.,.98,.95), spec);
  col += vec3(.1,.1,.15)*pow(edge,2.)*(1.-body);
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.0);
}
close