Lab · GLSL · Three.js · kostenloses Werkzeug

Ein Shader, den Sie bearbeiten können.

Das ist die Oberfläche von unserer Startseite. Ändern Sie rechts eine Zahl, und links ändert sich das Bild. Machen Sie es kaputt, und der Fehler sagt Ihnen, wo.


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

Kompiliert. Wird in jedem Frame auf Ihrer GPU gezeichnet.

Wie es funktioniert

Der Text wird von Three.js als WebGL-Fragment-Shader kompiliert, sobald Sie aufhören zu tippen. Die Uniforms t, res und mouse werden bereitgestellt. Ein bildschirmfüllendes Quad führt ihn pro Pixel aus.

Alle Lab-Werkzeuge →

Sagen Sie uns, was gebaut werden soll.

Ein Engineer liest es und antwortet innerhalb von Minuten, in Ihrer Sprache. Jedes Projekt beginnt mit einem zweiwöchigen Prototyp zum Festpreis.

Projekt starten Schreiben Sie uns auf WhatsApp