Laboratorio · GLSL · Three.js · herramienta gratuita

Un shader que puede editar.

Esta es la superficie de nuestra página de inicio. Cambie un número a la derecha y la imagen cambia a la izquierda. Si lo rompe, el error le dice dónde.


uniform float t; uniform vec2 res; uniform vec2 mouse; uniform vec2 off; uniform float zoom;
float hash(vec3 p){ return fract(sin(dot(p, vec3(127.1,311.7,74.7)))*43758.5453); }
float hash2(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
float noise(vec3 p){ vec3 i=floor(p), f=fract(p); f=f*f*(3.-2.*f);
  return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),
             mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z); }
float fbm(vec3 p){ float a=.5,s=0.; for(int i=0;i<4;i++){ s+=a*noise(p); p=p*2.03+vec3(1.7); a*=.5; } return s; }
mat2 rot(float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c); }
vec2 uvc(){ return (gl_FragCoord.xy-.5*res)/min(res.x,res.y)*zoom - off; }

float map(vec3 p){ p.xz*=rot(t*.25+mouse.x*1.2); p.yz*=rot(mouse.y*.8); float d=length(p)-1.; d+=(fbm(p*2.2+vec3(0.,t*.35,0.))-.5)*.28; return d+sin(p.y*22.-t*3.)*.004; }
vec3 nrm(vec3 p){ vec2 e=vec2(.0015,0.); return normalize(vec3(map(p+e.xyy)-map(p-e.xyy),map(p+e.yxy)-map(p-e.yxy),map(p+e.yyx)-map(p-e.yyx))); }
void main(){ vec2 uv=uvc(); vec3 ro=vec3(0.,0.,3.2), rd=normalize(vec3(uv,-1.6)); float tt=0.,d; vec3 p; bool hit=false;
  for(int i=0;i<72;i++){ p=ro+rd*tt; d=map(p); if(d<.002){hit=true;break;} tt+=d*.8; if(tt>7.)break; }
  vec3 col=vec3(.024,.043,.12)*(1.-dot(uv,uv)*.6);
  if(hit){ vec3 n=nrm(p); vec3 l=normalize(vec3(-.5,.8,.6)); float dif=max(dot(n,l),0.); float fr=pow(1.-max(dot(n,-rd),0.),3.);
    float scan=smoothstep(.6,1.,sin(p.y*60.-t*4.))*.35; float sh=.55+.45*smoothstep(0.,.25,map(p+l*.25));
    col=vec3(.04,.08,.24)+dif*vec3(.10,.30,.95)*sh+fr*vec3(.13,.88,1.)*.95+scan*fr*vec3(.6,.95,1.); }
  else col+=exp(-length(uv)*2.6)*vec3(.03,.09,.22);
  gl_FragColor=vec4(pow(col,vec3(.92)),1.); }

Compilado. Dibujando cada fotograma en su GPU.

Cómo funciona

Three.js compila el texto como shader de fragmentos WebGL cada vez que deja de escribir. Se proporcionan los uniforms t, res y mouse. Un cuadrilátero a pantalla completa lo ejecuta píxel a píxel.

Todas las herramientas del Laboratorio →

Cuéntenos qué necesita construir.

Un ingeniero lo lee y responde en minutos, en su idioma. Cada proyecto empieza con un prototipo de dos semanas a precio cerrado.

Iniciar un proyecto Escríbanos por WhatsApp