alert("Move your finger to move the mirror sphere"); var lights=[ [[-5,20,-3],[1,1,1]] ]; var fov=90; var mind=0; var maxd=10; var eps=.01; var maxs=80; var maxb=4; //Bounces of reflection var attr=0; //Best controllable from 0-2 attr=attr<0?0:attr>3?3:attr; function mix(x,y,a) { return x*(1-a)+y*a; } function fsm(d1,d2,k) { return Math.min(Math.max(.5+.5*(d2-d1)/k,0),1); } function unsm(d1,d2,k) { var h=Math.min(Math.max(.5+.5*(d2-d1)/k,0),1); return mix(d2,d1,h)-k*h*(1-h); } function smcol(c0,c1,d1,d2,k) { var cba=fsm(d1,d2,k); return c0.map((x,y)=>mix(x,c1[y],cba)); } var m=[.25,.25]; document.addEventListener("ontouchstart" in document?"touchmove":"mousemove",e=>{ if(e.changedTouches) e=e.changedTouches[0]; m=[e.clientX/sz,e.clientY/sz]; }); function reflect(iv,n) { return iv.map((x,y)=>x-n[y]*dot(iv,n)*2); } function scene(p,rc) { var cb=Math.hypot(...[p[0]-1.5,p[1]-.75,p[2]].map((x,y)=>Math.max(Math.abs(x)-.75,0)))-.005; var sp=Math.hypot(p[0]-(m[0]-.5)*5,p[1]-(-m[1]+.5)*5-1,p[2]-.75)-1; var ts=Math.hypot(p[0],p[1]+100,p[2])-100; var cba=unsm(cb,sp,attr); var pba=Math.min(cba,ts); if(rc) { var c0=[1,0,0]; var c1=[0,1,0]; var tilesize=1; var c2=(Math.floor(p[0]/(tilesize/2))+Math.floor(p[2]/(tilesize/2)))%2===0?[.4,.7,.4]:[.45,.85,.45]; var cbc=smcol(c0,c1,cb,sp,attr); var pbc=pba===ts?c2:cbc; return [pba,pbc]; } return pba; } function march(ro,rd,fm=maxs,nep=eps) { var t=mind; for(var i=0;ix+rd[y]*t),true); t+=d[0]; if(d[0]maxd) return [maxd]; } return [maxd]; } function norm(p) { var d=scene(p); return normalize([d-scene([p[0]-eps,p[1],p[2]]),d-scene([p[0],p[1]-eps,p[2]]),d-scene([p[0],p[1],p[2]-eps])]); } function shadow(ro,rd,dmin,dmax,k) { var res=1; var t=dmin; for(var i=0;i<16;i++) { var h=scene(ro.map((x,y)=>x+rd[y]*t)); res=Math.min(res,k*h/t); t+=Math.min(Math.max(h,.01),.1); if(h<.001||t>dmax) break; } return Math.min(Math.max(res,0),1); } function light(cl,p,d) { var l=normalize(cl[0].map((x,y)=>x-p[y])); var n=norm(p); var sd=shadow(p,l,.1,50,4); var dl=(Math.min(Math.max(dot(n,l),0),1)*.6+.4)*(sd*.6+.4); return cl[1].map(x=>dl*x); } function refl(np,rd) { var n=norm(np); var nr=reflect(rd,n); var nf=np.map((x,y)=>x+nr[y]*eps*2); var d=march(nf,nr,32,.01); return [d,nf,nr]; } function shade(ro,rd,d,dsa,np=5,lk=0,fg=0) { if(np===5) np=ro.map((x,y)=>x+rd[y]*d); var dif=[0,0,0]; for(var i=0;ix+td[y]); } var fog=Math.min(Math.max(1/Math.hypot(...np.map((x,y)=>x-ro[y]))*(maxd/10),0),.2)*6-fg/2; var col=dsa[1]; if(Math.abs(col[0]-1)<.04) { var ng=refl(np,rd); if(ng[0].length===2&&lkx+ng[2][y]*ng[0][0]); return shade(ng[1],ng[2],ng[0][0],ng[0],nl,lk+1,fog); } var t=(normalize(ng[2])[1]+1)/2; return [(1-t)+t*.3,(1-t)+t*.5,(1-t)+t]; } return dif.map((x,y)=>x*fog*col[y]); } function main(co) { var ro=[0,3,-5]; var rd=normalize([(co[0]-w/2)/h,(co[1]-h/2)/h-.4,1/Math.tan(fov/180*Math.PI/2)]); var dsa=march(ro,rd); var d=dsa[0]; if(dx/len); } var sz; function frame() { c=document.querySelector("canvas"); c.width=innerWidth; c.height=innerHeight; ctx=c.getContext("2d"); //-=-// var ls=performance.now(); ctx.imageSmoothingEnabled=false; sz=Math.floor(Math.min(innerWidth,innerHeight)); w=Math.floor(sz/4); h=Math.floor(sz/4); //w=h=8; var nw=sz; var nh=(w/h)*sz; if(h>w) { nw=(h/w)*sz; nh=sz; } nw=Math.floor(nw); nh=Math.floor(nh); var img=ctx.createImageData(w,h); for(var y=0;yimg.data[ind+y]=Math.floor(x*255)); img.data[ind+3]=255; } } ctx.putImageData(img,0,0); ctx.drawImage(c,0,0,w,h,0,0,nw,nh); ctx.fillStyle="lime"; ctx.textBaseline="top"; ctx.fillText((1000/(performance.now()-ls)).toFixed(1)+"FPS",0,0); } setInterval(frame);

Reflection Raymarcher in 3D