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(.045,.045,.05)*(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(.07,.07,.08)+dif*vec3(.70,.71,.74)*sh+fr*vec3(.96,.96,.98)*.9+scan*fr*vec3(1.)*.5; }
  else col+=exp(-length(uv)*2.6)*vec3(.06,.06,.07);
  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 qui doit changer en premier

Indiquez-nous votre site. Nous étudions votre activité et vous contactons sous un jour ouvré pour convenir d'un court appel.

Réserver un appel de 30 minutesou écrivez à hello@eorbsolutions.com