examples/hanzo-app/apps/apogee.html

<!--hz {"title":"Orbit","archetype":"WebGL / 3D","creator":"gfx","desc":"WebGL2 signed-distance-field raymarcher: orbit the camera, change the shape, retune the material and lighting live.","nav":[["#/","Scene"]]} -->
<div class="split r">
  <div class="pane"><header>Renderer <span class="spacer"></span><span class="small muted" id="fps">—</span></header>
    <canvas id="gl" style="width:100%;display:block;background:#05060a;aspect-ratio:16/10"></canvas>
    <div class="body"><p class="hz-note" style="margin:0">Drag to orbit, scroll to dolly. Every pixel is raymarched against an analytic distance field in a fragment shader — no meshes, no textures, no asset downloads.</p></div>
  </div>
  <div class="col">
    <div class="pane"><header>Scene</header><div class="body col" id="ui"></div></div>
    <div class="pane"><header>Fragment shader</header><div class="body"><pre id="src" style="max-height:230px;font-size:11px"></pre></div></div>
  </div>
</div>
<script>
const {h,fill,$,store} = hz;
const cv = $('#gl'), gl = cv.getContext('webgl2', {antialias:false, powerPreference:'high-performance'});
const P = store('orbit', {shape:0, rough:0.35, glow:0.55, twist:0.5, hue:0.58});

const FS = `#version 300 es
precision highp float;
uniform vec2 R; uniform float T; uniform vec3 CAM; uniform float SH,RO,GL,TW,HU;
out vec4 O;
float sdSphere(vec3 p,float r){return length(p)-r;}
float sdBox(vec3 p,vec3 b){vec3 q=abs(p)-b;return length(max(q,0.))+min(max(q.x,max(q.y,q.z)),0.);}
float sdTorus(vec3 p,vec2 t){vec2 q=vec2(length(p.xz)-t.x,p.y);return length(q)-t.y;}
float sdOct(vec3 p,float s){p=abs(p);return (p.x+p.y+p.z-s)*0.57735;}
mat2 rot(float a){float c=cos(a),s=sin(a);return mat2(c,-s,s,c);}
float map(vec3 p){
  vec3 q=p; q.xz*=rot(T*0.25); q.xy*=rot(q.z*TW*0.55+T*0.1);
  float d;
  if(SH<0.5) d=sdTorus(q,vec2(1.05,0.36));
  else if(SH<1.5) d=sdBox(q,vec3(0.78));
  else if(SH<2.5) d=sdOct(q,1.25);
  else d=min(sdSphere(q-vec3(0.,0.65,0.),0.62), sdSphere(q+vec3(0.,0.65,0.),0.62));
  float rip=0.045*sin(8.*q.x+T*1.4)*sin(8.*q.y)*sin(8.*q.z);
  return d+rip;
}
vec3 nrm(vec3 p){vec2 e=vec2(0.0012,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)));}
vec3 hsv(float hh,float s,float v){vec3 k=vec3(1.,2./3.,1./3.);vec3 pp=abs(fract(hh+k)*6.-3.);return v*mix(vec3(1.),clamp(pp-1.,0.,1.),s);}
void main(){
  vec2 uv=(gl_FragCoord.xy*2.-R)/R.y;
  vec3 ro=CAM, ta=vec3(0.);
  vec3 f=normalize(ta-ro), r=normalize(cross(vec3(0.,1.,0.),f)), u=cross(f,r);
  vec3 rd=normalize(uv.x*r+uv.y*u+1.6*f);
  float t=0.; float glow=0.; bool hit=false;
  for(int i=0;i<96;i++){
    vec3 p=ro+rd*t; float d=map(p);
    glow+=0.014/(0.03+d*d);
    if(d<0.0014){hit=true;break;}
    if(t>18.)break;
    t+=d*0.85;
  }
  vec3 col=vec3(0.02,0.025,0.04);
  if(hit){
    vec3 p=ro+rd*t, n=nrm(p);
    vec3 l1=normalize(vec3(0.8,1.,0.5)), l2=normalize(vec3(-0.7,0.3,-0.6));
    float dif=max(dot(n,l1),0.), dif2=max(dot(n,l2),0.);
    vec3 hlf=normalize(l1-rd);
    float spe=pow(max(dot(n,hlf),0.),mix(90.,6.,RO));
    float fres=pow(1.-max(dot(n,-rd),0.),3.);
    vec3 base=hsv(HU+0.12*n.y,0.62,0.85);
    col=base*(0.16+0.82*dif)+hsv(HU+0.5,0.5,0.35)*dif2*0.5;
    col+=vec3(1.)*spe*(1.-RO)*1.3;
    col+=hsv(HU+0.08,0.4,1.)*fres*0.55;
    col*=exp(-0.035*t*t);
  }
  col+=hsv(HU+0.06,0.55,1.)*glow*GL*0.09;
  col=pow(col/(col+0.85),vec3(0.4545));
  O=vec4(col,1.);
}`;
const VS = `#version 300 es
void main(){vec2 p=vec2((gl_VertexID<<1)&2,gl_VertexID&2);gl_Position=vec4(p*2.-1.,0.,1.);}`;

function sh(t,s){const o=gl.createShader(t);gl.shaderSource(o,s);gl.compileShader(o);
  if(!gl.getShaderParameter(o,gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(o)); return o;}
const prog = gl.createProgram();
gl.attachShader(prog, sh(gl.VERTEX_SHADER,VS)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER,FS));
gl.linkProgram(prog); gl.useProgram(prog);
const U = n => gl.getUniformLocation(prog,n);
$('#src').textContent = FS.split('void main(){')[1] ? FS.slice(FS.indexOf('float map')) : FS;

let yaw=0.6, pitch=0.35, dist=4.2, drag=null, t0=performance.now(), frames=0, tlast=t0;
cv.addEventListener('pointerdown', e => { drag=[e.clientX,e.clientY]; cv.setPointerCapture(e.pointerId); });
cv.addEventListener('pointerup', () => drag=null);
cv.addEventListener('pointermove', e => { if(!drag) return;
  yaw -= (e.clientX-drag[0])*0.008; pitch = Math.max(-1.3, Math.min(1.3, pitch+(e.clientY-drag[1])*0.008));
  drag=[e.clientX,e.clientY]; });
cv.addEventListener('wheel', e => { e.preventDefault(); dist = Math.max(2.2, Math.min(9, dist + e.deltaY*0.003)); }, {passive:false});

function slider(k,label,min,max,step){
  const i = h('input',{type:'range',min,max,step,value:P.get()[k],
    oninput:e=>P.set(v=>({...v,[k]:+e.target.value}))});
  return h('div.field',{style:{margin:0}}, h('label',label), i);
}
fill($('#ui'),
  h('div.field',{style:{margin:0}}, h('label','Shape'),
    h('select',{onchange:e=>P.set(v=>({...v,shape:+e.target.value}))},
      ['Torus','Rounded box','Octahedron','Bi-sphere'].map((n,i)=>h('option',{value:i,selected:P.get().shape===i},n)))),
  slider('rough','Roughness',0,1,0.01), slider('glow','Volumetric glow',0,1,0.01),
  slider('twist','Twist',0,1.6,0.01), slider('hue','Hue',0,1,0.005),
  h('button.g',{onclick:()=>{P.reset();fill($('#ui'));location.reload();}},'Reset scene'));

function resize(){
  const dpr = Math.min(devicePixelRatio||1, 2);
  const w = Math.round(cv.clientWidth*dpr), hh = Math.round(cv.clientHeight*dpr);
  if(cv.width!==w||cv.height!==hh){cv.width=w;cv.height=hh;gl.viewport(0,0,w,hh);}
}
function frame(now){
  resize();
  const p = P.get(), t = (now-t0)/1000;
  gl.uniform2f(U('R'), cv.width, cv.height);
  gl.uniform1f(U('T'), t);
  gl.uniform3f(U('CAM'), Math.cos(yaw)*Math.cos(pitch)*dist, Math.sin(pitch)*dist, Math.sin(yaw)*Math.cos(pitch)*dist);
  gl.uniform1f(U('SH'), p.shape); gl.uniform1f(U('RO'), p.rough);
  gl.uniform1f(U('GL'), p.glow); gl.uniform1f(U('TW'), p.twist); gl.uniform1f(U('HU'), p.hue);
  gl.drawArrays(gl.TRIANGLES,0,3);
  if(++frames>=30){ $('#fps').textContent = Math.round(frames*1000/(now-tlast))+' fps · '+cv.width+'×'+cv.height; frames=0; tlast=now; }
  requestAnimationFrame(frame);
}
if(!gl){ $('#fps').textContent='WebGL2 unavailable'; } else requestAnimationFrame(frame);
</script>