Lab · GLSL · Three.js · outil gratuit

Un shader que vous pouvez modifier.

C'est la surface de notre page d'accueil. Changez un nombre à droite et l'image change à gauche. Cassez-le, et l'erreur vous dit où.


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.); }

Compilé. Dessiné à chaque image sur votre GPU.

Comment ça marche

Le texte est compilé en fragment shader WebGL par Three.js chaque fois que vous arrêtez de taper. Les uniforms t, res et mouse sont fournis. Un quad plein écran l'exécute pixel par pixel.

Tous les outils du Lab →

Dites-nous ce qu'il faut construire.

Un ingénieur le lit et vous répond en quelques minutes, dans votre langue. Chaque projet commence par un prototype de deux semaines à prix fixe.

Démarrer un projet Nous écrire sur WhatsApp