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 · Ray marching en GLSL

La marcha

El rayo da saltos seguros. Aquí ves cuánto le cuesta llegar.

Este es el truco que le da el nombre al raymarching. El rayo no avanza a ciegas: la SDF le dice la distancia al objeto más cercano, así que puede saltar exactamente esa distancia sin atravesar nada. Llega cerca, vuelve a preguntar, salta menos. Cada vuelta del for es un paso.

Para verlo, pintamos por número de pasos: los rayos que rozan la silueta dan muchos pasitos chicos y se prenden de color; los que se van al vacío escapan en pocos pasos.

t += dt es qué tan lejos avanzó el rayo. d es la distancia segura que devuelve la SDF. Sumarla (t+=d) es el salto. El 0.9 lo acorta un poco, más seguro cerca de los bordes.
PruebaBaja el 0.9 de d*0.9 y la marcha da pasos más cortos: más pasos, halo más grueso. El segundo slider abre el espectro (steps*0.03).

El código

precision highp float;
float map(vec3 p){
  return length(p)-1.0;
}
void main(){
  vec2 uv=(gl_FragCoord.xy*2.0-R)/R.y;
  vec3 ro=vec3(0.0,0.0,3.0);
  vec3 rd=normalize(vec3(uv,-1.5));
  float t=0.0;
  float steps=0.0;
  for(int i=0;i<64;i++){
    vec3 pos=ro+rd*t;
    float d=map(pos);
    if(d<0.001 || t>12.0) break;
    t+=d*0.9;
    steps+=1.0;
  }
  vec3 col=iri(steps*0.03+0.1);
  col*=0.18+steps*0.013;
  gl_FragColor=vec4(col,1.0);
}
close