/* WORK IN PROGRESS! class Camera { constructor(x,y,z,rx,ry) { this.pos = [x,y,z]; this.rot = [rx,ry]; } () { } }*/ //var camo = new Camera(0,0,-.09,0,0); var shine = 1; var reflective = false; var camfollow; var camp = [0,.01,-.02]; var neg = [false,false,false]; var drawall = false; var shadefill = true; var shadestroke = true; var sortByDistanceMode = true; var ordertris = true; var orderrotated = true; var fac = 150; var ex = 5000; var specMult = 1; var fill = true; var stroke = true; var clippingdistance = .2/fac; var camrot = [0,0,0]; var ambientStrength = .05; var ffov = .33333; var fov = 1/(ffov/100); var lights = [ [1/fac,.7/fac,-1/fac,[1,1,1],.1] ]; (()=>{ setInterval(update); })(); document.addEventListener("keydown",e=>{ if(e.key==="w") { camp[2]+=.1/fac*Math.cos(camrot[1]); camp[0]+=.1/fac*Math.sin(camrot[1]); } if(e.key==="a") { camp[2]+=.1/fac*Math.sin(camrot[1]); camp[0]-=.1/fac*Math.cos(camrot[1]); } if(e.key==="s") { camp[2]-=.1/fac*Math.cos(camrot[1]); camp[0]-=.1/fac*Math.sin(camrot[1]); } if(e.key==="d") { camp[2]-=.1/fac*Math.sin(camrot[1]); camp[0]+=.1/fac*Math.cos(camrot[1]); } if(e.key==="q") camp[1]-=.1/fac; if(e.key==="e") camp[1]+=.1/fac; if(e.key==="ArrowLeft") camrot[1]-=.02; if(e.key==="ArrowRight") camrot[1]+=.02; if(e.key==="ArrowUp") camrot[0]+=.02; if(e.key==="ArrowDown") camrot[0]-=.02; }); var last; var fps = 120; function update() { c = document.querySelector("canvas"); c.width = innerWidth; c.height = innerHeight; ctx = c.getContext("2d"); //-=-// var now = Date.now(); if(!last) last = now; var delta = now-last; var average = delta/(1000/fps); var ang = now/2000; var si = Math.sin(ang); var co = -Math.cos(ang); var cama = JSON.parse(JSON.stringify(camp)); if(!neg[0]) cama[0]=-cama[0]; if(!neg[1]) cama[1]=-cama[1]; if(!neg[2]) cama[2]=-cama[2]; camfollow = [co*ex*fac,1,si*ex*fac]; var mat = [co,0,-si,0, 0,1,0,0, si,0,co, 0]; draw(points,trngls,mat); ctx.fillStyle="white"; ctx.font=innerHeight/20+"px monospace"; ctx.fillText("FPS: "+(1000/delta).toFixed(1),0,innerHeight/20); last=now; } function averageTri(ps,ts,m) { var av = [0,0,0]; var t1 = [ps[ts[0]*3],ps[ts[0]*3+1],ps[ts[0]*3+2]]; var t2 = [ps[ts[1]*3],ps[ts[1]*3+1],ps[ts[1]*3+2]]; var t3 = [ps[ts[2]*3],ps[ts[2]*3+1],ps[ts[2]*3+2]]; if(orderrotated) { t1 = vertShader(ps[ts[0]*3],ps[ts[0]*3+1],ps[ts[0]*3+2],m); t2 = vertShader(ps[ts[1]*3],ps[ts[1]*3+1],ps[ts[1]*3+2],m); t3 = vertShader(ps[ts[2]*3],ps[ts[2]*3+1],ps[ts[2]*3+2],m); } av[0]+=t1[0]; av[1]+=t1[1]; av[2]+=t1[2]; av[0]+=t1[0]; av[1]+=t1[1]; av[2]+=t1[2]; av[0]+=t2[0]; av[1]+=t2[1]; av[2]+=t2[2]; av[0]/=3; av[1]/=3; av[2]/=3; return av; } function distance(a,b) { var x = a[0]-b[0]; var y = a[1]-b[1]; var z = a[2]-b[2]; return Math.sqrt(x*x+y*y+z*z); } function sortByDistance(pl,tl,m) { var ps = JSON.parse(JSON.stringify(pl)); var ts = JSON.parse(JSON.stringify(tl)); var ou = []; for(var i=0;i{ if(sortByDistanceMode) { var av = averageTri(ps,a,m); var av0 = averageTri(ps,b,m); return distance(av0,camp)-distance(av,camp); } else { var av = [project(points[a[0]]),project(points[a[1]]),project(points[a[2]])]; var av0 = [project(points[b[0]]),project(points[b[1]]),project(points[b[2]])]; var avside = getFacingTriangle(av[0][0],av[0][1],av[1][0],av[1][1],av[2][0],av[2][1]); var av0side = getFacingTriangle(av0[0][0],av0[0][1],av0[1][0],av0[1][1],av0[2][0],av0[2][1]); return av0side-avside; } }); var uo = []; for(var i=0;i=max) return max; else return a; } function add(a,b) { return [a[0]+b[0],a[1]+b[1],a[2]+b[2],a[3]]; } function multiply(val,a) { return [val*a[0],val*a[1],val*a[2],a[3]]; } function negate(a) { return [-a[0],-a[1],-a[2],a[3]]; } function pythagoras(a,b) { var x = a[0]-b[0]; var y = a[1]-b[1]; var z = a[2]-b[2]; return x*x+y*y+z*z; } function cross(a,b) { var result = []; result[0] = a[1]*b[2] - a[2]*b[1]; result[1] = a[2]*b[0] - a[0]*b[2]; result[2] = a[0]*b[1] - a[1]*b[0]; return result; } function triangleNormal(t0,t1,t2) { var edge1 = []; var edge2 = []; edge1[0] = t1[0] - t0[0]; edge1[1] = t1[1] - t0[1]; edge1[2] = t1[2] - t0[2]; edge2[0] = t2[0] - t0[0]; edge2[1] = t2[1] - t0[1]; edge2[2] = t2[2] - t0[2]; return normalize(cross(edge1,edge2)); } function shader(tr0,tr1,tr2,remove,ncolor) { var t0 = [tr0[0]-remove[0],tr0[1]-remove[1],tr0[2]-remove[2]]; var t1 = [tr1[0]-remove[0],tr1[1]-remove[1],tr1[2]-remove[2]]; var t2 = [tr2[0]-remove[0],tr2[1]-remove[1],tr2[2]-remove[2]]; var diffusionColor = [ncolor[0]/255,ncolor[1]/255,ncolor[2]/255]; var ambientColor = [diffusionColor[0]*ambientStrength,diffusionColor[1]*ambientStrength,diffusionColor[2]*ambientStrength]; var speculationColor = [ncolor[0]/255*specMult,ncolor[1]/255*specMult,ncolor[2]/255*specMult]; if(speculationColor[0]>255) speculationColor[0] = 255; if(speculationColor[1]>255) speculationColor[1] = 255; if(speculationColor[2]>255) speculationColor[2] = 255; //console.log(JSON.stringify(tr0)); var normalizedCamera = normalize(camp); var normalizedTriangle = triangleNormal(t0,t1,t2) var color = [0,0,0]; for(var i=0;i0&&!drawall) return; var draww = false; y0=innerHeight-y0; y1=innerHeight-y1; y2=innerHeight-y2; if(x0>0&&x00&&x10&&x20&&y00&&y10&&y2

My 3D engine (Work In Progress)