랩 · GLSL · Three.js · 무료 도구

직접 편집할 수 있는 셰이더.

홈페이지에 있는 바로 그 표면입니다. 오른쪽에서 숫자를 바꾸면 왼쪽의 그림이 바뀝니다. 망가뜨리면 오류가 어디인지 알려 줍니다.


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

컴파일 완료. 고객님의 GPU에서 매 프레임 그리고 있습니다.

작동 원리

입력을 멈출 때마다 Three.js가 텍스트를 WebGL 프래그먼트 셰이더로 컴파일합니다. 유니폼 t, res, mouse가 제공됩니다. 전체 화면 쿼드가 픽셀마다 이를 실행합니다.

전체 랩 도구 →

만들고 싶은 것을 알려 주십시오.

엔지니어가 직접 읽고 몇 분 안에 고객의 언어로 답변합니다. 모든 프로젝트는 고정 가격의 2주 프로토타입으로 시작합니다.

프로젝트 시작하기 WhatsApp으로 문의하기