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

La esfera

Un SDF: una fórmula que mide qué tan lejos está la superficie.

¿Cómo sabe el rayo que pegó en algo? Con una SDF (signed distance function). Le das un punto del espacio y te dice la distancia al objeto más cercano. La esfera es la más simple: length(p)-1.0. Negativo adentro, positivo afuera, cero justo en la cáscara.

El rayo avanza hasta que la SDF devuelve casi cero, ahí tocó. De momento solo pintamos la silueta en blanco contra el cielo.

length(p)-rlength(p) es la distancia del punto al centro. Le restas el radio r y obtienes la distancia a la superficie. Esta resta es el corazón de todo: cambia la fórmula, cambia la forma.
PruebaCambia el radio 1.0 a 1.6 y la esfera crece hasta llenar el cuadro.

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 hit=0.0;
  for(int i=0;i<48;i++){
    vec3 pos=ro+rd*t;
    float d=map(pos);
    if(d<0.001){ hit=1.0; break; }
    t+=d*0.90;
    if(t>10.0) break;
  }
  vec3 sky=mix(vec3(0.05,0.06,0.12), vec3(0.18,0.26,0.50), uv.y*0.5+0.5);
  vec3 col=mix(sky, vec3(1.0), hit);
  gl_FragColor=vec4(col,1.0);
}
close