alert("Use the touch controls to move and look around"); var lights=[ [[-5,20,-3],[1,1,1]] ]; var fov=90; var mind=0; var maxd=10; var eps=.01; var maxs=80; var attr=.8; //Best controllable from 0-2 attr=attr<0?0:attr>3?3:attr; var orient=[0,0,0]; var pos=[0,3,-5]; var sp=.01; var sens=.5; var quality=1/8; 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)); } function scene(p,rc) { var cb=Math.hypot(...[p[0],p[1]-.75,p[2]].map((x,y)=>Math.max(Math.abs(x)-.75,0)))-.005; var sp=Math.hypot(p[0]+Math.cos(Date.now()/1000)*2,p[1]+Math.sin(Date.now()/540)*2-2,p[2])-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) { 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 rot2d(x,z,ang) { var c=Math.cos(ang); var s=Math.sin(ang); return [c*x+s*z,c*z-s*x]; } function rot3d(x,r) { var t0=rot2d(x[1],x[2],r[0]); var t1=rot2d(x[0],t0[0],r[2]); var t2=rot2d(t0[1],t1[0],r[1]); return [t2[1],t1[1],t2[0]]; } function main(co) { var ro=pos; var rd=normalize([(co[0]-w/2)/h,(co[1]-h/2)/h-.4,1/Math.tan(fov/180*Math.PI/2)]); rd=rot3d(rd,orient); var dsa=march(ro,rd); var d=dsa[0]; if(dx+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])),0),.2)*6; var col=dsa[1]; return dif.map((x,y)=>x*fog*col[y]); } var t=(normalize(rd)[1]+1)/2; return [(1-t)+t*.3,(1-t)+t*.5,(1-t)+t]; } function dot(a,b) { return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; } function cross(a,b) { return [a[1]*b[2]-a[2]*b[1],a[2]*b[0]-a[0]*b[2],a[0]*b[1]-a[1]*b[0]]; } function normalize(a) { var len=Math.hypot(...a); return a.map(x=>x/len); } var sz; var bgn=[0,0]; var touched; var drag=[]; document.addEventListener("ontouchstart" in document?"touchend":"mouseup",()=>{ touched=false; drag=[]; }); document.addEventListener("ontouchstart" in document?"touchmove":"mousemove",e=>{ if(e.changedTouches) e=e.changedTouches[0]; if(drag.length!==0) { var mx=(e.clientX-drag[0])/sz*sens*Math.PI; var my=(e.clientY-drag[1])/sz*sens*Math.PI; orient[0]-=my; orient[1]-=mx; drag=[e.clientX,e.clientY]; return; } if(!touched) return; bgn=[e.clientX,e.clientY]; }); document.addEventListener("ontouchstart" in document?"touchstart":"mousedown",e=>{ if(e.changedTouches) e=e.changedTouches[0]; var d=Math.hypot(e.clientX-(sz-sz/6),e.clientY-(sz-sz/6)); bgn=[e.clientX,e.clientY]; if(dw) { 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); ctx.fillStyle="white"; ctx.globalAlpha=.4; ctx.beginPath(); ctx.arc(sz-sz/6,sz-sz/6,sz/6,0,2*Math.PI); ctx.fill(); ctx.closePath(); var d=Math.hypot(bgn[0]-(sz-sz/6),bgn[1]-(sz-sz/6)); var average=120/(1000/(performance.now()-ls)); if(d>0) { var ang=Math.atan2(bgn[1]-(sz-sz/6),bgn[0]-(sz-sz/6)); if(d>sz/6) { bgn[0]=Math.cos(ang)*sz/6+sz-sz/6; bgn[1]=Math.sin(ang)*sz/6+sz-sz/6; } var fw=rot3d([Math.cos(ang),0,-Math.sin(ang)],orient); fw[1]=0; pos=pos.map((x,y)=>x+fw[y]*sp*average); } ctx.globalAlpha=.7; ctx.beginPath(); ctx.arc(bgn[0],bgn[1],sz/12,0,2*Math.PI); ctx.fill(); ctx.closePath(); } setInterval(frame);

Movable Raymarcher in 3D