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

Wind

El viento empuja los bloques. Sopla y regresa.

La gravedad va en una dirección para siempre. El viento va y viene. sin(T) oscila, empuja para un lado, frena, regresa. El material ondula como tela en una ventana abierta.

Cortina que no se decide.

sin(T * vel) * ampvel = qué tan rápido sopla. amp = qué tan lejos empuja. sin(T * 0.5) * 0.3 = brisa suave. sin(T * 2.0) * 1.0 = vendaval.
PruebaCambia el 0.35 (velocidad del viento) a 1.5, ráfaga rápida. Cambia el 0.5 (amplitud) a 1.0, empuja más lejos. Mete viento en Y también: p.y += sin(T * 0.3) * 0.15;

El código

void main(){
  vec2 p = (2.*gl_FragCoord.xy - R) / min(R.x, R.y);
  float wind = sin(T * 0.35) * 0.5;
  float gust = sin(p.y * 2.5 + T * 0.5) * 0.2;
  vec3 col = vec3(0.02, 0.04, 0.12);
  for(int i = 0; i < 5; i++){
    float fi = float(i);
    float w = wind*(.4+fi*.2) + gust*(.3+fi*.15);
    float x = -0.8+fi*.4 + w;
    float y = -0.5+fi*.25;
    vec2 sz = vec2(.12+fi*.01, .07+fi*.02);
    vec2 q = abs(p-vec2(x,y))-sz;
    float d = max(q.x, q.y);
    vec2 qs = abs(p-vec2(x+.06,y-.07))-sz;
    col *= smoothstep(-.02,.15,max(qs.x,qs.y));
    col += vec3(.1+fi*.18,.4+fi*.12,.9-fi*.12) * smoothstep(.01,-.01,d) * (.55+fi*.12);
    col += vec3(.05+fi*.1,.2+fi*.05,.5-fi*.05) * exp(-max(d,0.)*5.) * .2;
  }
  col = hueShift(col, 0.0);
  gl_FragColor = vec4(col, 1.);
}
close