// My personal 3d Engine alert("No libraries or APIS"); class Baron3D { constructor() { this.chunkSize = 25; this.objects = []; this.fog = true; this.sceneNegate = [1,-1,1]; this.fill = true; this.stroke = true; this.showVertNodes = false; this.vertNodeColor = [255,255,255]; this.vertNodeSize = 1; this.drawAll = false; this.camR = [0,0]; this.camP = [0,0,-5]; this.fov = innerWidth/2; this.specMult = 0; this.reflective = false; this.shine = 1; this.lights = []; this.defaultColor = [255,255,255]; this.clippingDistance = .0005; this.ambientStrength = .75; this.autoShade = true; this.fogIntensity = 1; this.fogColor = [0,0,0]; this.desaturationLevel = [0,0,0]; this.desaturation = [1,1,1]; this.saturationLevel = [130,130,130]; this.saturation = [1.15,1.15,1.15]; this.toRayCastMouse = []; } getFogColor() { return this.fogColor; } mouseRayCast(x,y,callback) { this.toRayCastMouse.push([x,y,callback]); } inside(polygon, point) { var x = point[0]; var y = point[1]; var inside = false; for (var i=0,j=polygon.length-1;iy)!=(yj>y)&&x<(xj-xi)*(y-yi)/(yj-yi)+xi) inside = !inside; } return inside; } renderObjects() { var uverts = []; var ufaces = []; for(var i=0;i{ var avg0 = this.averageTriangle(uverts[a.tri[0]],uverts[a.tri[1]],uverts[a.tri[2]]); var avg1 = this.averageTriangle(uverts[b.tri[0]],uverts[b.tri[1]],uverts[b.tri[2]]); return avg1[2]-avg0[2]; }); for(var i=0;i0&&uverts[nfaceu[1]][2]>0&&uverts[nfaceu[2]][2]>0) { var nv = [this.add(uverts[nfaceu[0]],this.camP),this.add(uverts[nfaceu[1]],this.camP),this.add(uverts[nfaceu[2]],this.camP)]; if(this.distance(nv[0],this.camP)>this.clippingDistance&&this.distance(nv[1],this.camP)>this.clippingDistance&&this.distance(nv[2],this.camP)>this.clippingDistance&&this.distance(nv[0],this.camP)0||this.drawAll)) { var shaded; if(!nfaceu[3].unshaded&&this.autoShade) { if(nfaceu[3].color) shaded = this.shader(nv[0],nv[1],nv[2],nfaceu[3].color); else { shaded = this.shader(nv[0],nv[1],nv[2],engine.defaultColor); } } else { if(nfaceu[3].color) shaded = nfaceu[3].color; else shaded = engine.defaultColor; } shaded[0]=Math.round(shaded[0]); shaded[1]=Math.round(shaded[1]); shaded[2]=Math.round(shaded[2]); if(this.fog) { var camdist = this.distance(this.averageTriangle(nv[0],nv[1],nv[2]),this.camP); var nfog = 1-camdist/this.chunkSize; shaded[0]*=nfog; shaded[1]*=nfog; shaded[2]*=nfog; shaded[0]/=this.fogIntensity; shaded[1]/=this.fogIntensity; shaded[2]/=this.fogIntensity; if(shaded[0]this.saturationLevel[0]) shaded[0]*=this.saturation[0]; if(shaded[1]>this.saturationLevel[1]) shaded[1]*=this.saturation[1]; if(shaded[2]>this.saturationLevel[2]) shaded[2]*=this.saturation[2]; shaded[0]+=this.fogColor[0]; shaded[1]+=this.fogColor[1]; shaded[2]+=this.fogColor[2]; } else { if(shaded[0]this.saturationLevel[0]) shaded[0]*=this.saturation[0]; if(shaded[1]>this.saturationLevel[1]) shaded[1]*=this.saturation[1]; if(shaded[2]>this.saturationLevel[2]) shaded[2]*=this.saturation[2]; } ctx.strokeStyle="rgb("+shaded+")"; ctx.fillStyle="rgb("+shaded+")"; ctx.beginPath(); ctx.moveTo(v0[0],v0[1]); ctx.lineTo(v1[0],v1[1]); ctx.lineTo(v2[0],v2[1]); ctx.lineTo(v0[0],v0[1]); if(this.stroke) ctx.stroke(); if(this.fill) ctx.fill(); ctx.closePath(); } if(this.showVertNodes&&(facing>0||this.drawAll)) { ctx.fillStyle="rgb("+this.vertNodeColor+")"; ctx.beginPath(); ctx.arc(v0[0],v0[1],this.vertNodeSize,0,2*Math.PI); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(v1[0],v1[1],this.vertNodeSize,0,2*Math.PI); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(v2[0],v2[1],this.vertNodeSize,0,2*Math.PI); ctx.fill(); ctx.closePath(); } } } } } lerp(value,target,percentage) { return value-(value-target)*percentage; } lerpObjectPosition(object,newposition,percentage) { var pos = object.position; object.position[0]=this.lerp(object.position[0],newposition[0],percentage); object.position[1]=this.lerp(object.position[1],newposition[1],percentage); object.position[2]=this.lerp(object.position[2],newposition[2],percentage); } lerpObjectRotation(object,newrotation,percentage) { object.rotation[0]=this.lerp(object.rotation[0],newrotation[0],percentage); object.rotation[1]=this.lerp(object.rotation[1],newrotation[1],percentage); } lerpObjectScale(object,newscale,percentage) { object.scale[0]=this.lerp(object.scale[0],newscale[0],percentage); object.scale[1]=this.lerp(object.scale[1],newscale[1],percentage); object.scale[2]=this.lerp(object.scale[2],newscale[2],percentage); } removeObject(object) { this.objects.splice(object.id,1); } shader(v0,v1,v2,ncolor) { var diffusionColor = [ncolor[0]/255,ncolor[1]/255,ncolor[2]/255]; var ambientColor = [ncolor[0]*this.ambientStrength,ncolor[1]*this.ambientStrength,ncolor[2]*this.ambientStrength]; var speculationColor = [ncolor[0]/255*this.specMult,ncolor[1]/255*this.specMult,ncolor[2]/255*this.specMult]; if(speculationColor[0]>255) speculationColor[0] = 255; if(speculationColor[1]>255) speculationColor[1] = 255; if(speculationColor[2]>255) speculationColor[2] = 255; var normalizedCamera = this.normalize(this.camP); var normalizedTriangle = this.normalizeTriangle(v0,v1,v2) var color = [0,0,0]; for(var i=0;i=max) return max; else return a; } negate(a) { return [-a[0],-a[1],-a[2],a[3]]; } 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; } distance(v0,v1) { return Math.sqrt(Math.pow(v0[0]-v1[0],2)+Math.pow(v0[1]-v1[1],2)+Math.pow(v0[2]-v1[2],2)); } rotate2D(x,z,rad) { var c = Math.cos(rad); var s = Math.sin(rad); return [x*c-z*s,x*s+z*c]; } facingSide(v0,v1,v2) { return (v1[0]-v0[0])*(v2[1]-v0[1])-(v2[0]-v0[0])*(v1[1]-v0[1]); } sub(v0,v1) { return [v0[0]-v1[0],v0[1]-v1[1],v0[2]-v1[2]]; } add(v0,v1) { return [v0[0]+v1[0],v0[1]+v1[1],v0[2]+v1[2]]; } persp(x,z) { return engine.fov*x/z; } project(v) { return [innerWidth/2+this.persp(v[0],v[2]),innerHeight/2+this.persp(v[1],v[2])]; } averageTriangle(v0,v1,v2) { var res = [0,0,0]; res[0]+=v0[0]; res[1]+=v0[1]; res[2]+=v0[2]; res[0]+=v1[0]; res[1]+=v1[1]; res[2]+=v1[2]; res[0]+=v2[0]; res[1]+=v2[1]; res[2]+=v2[2]; res[0]/=3; res[1]/=3; res[2]/=3; return res; } rotateScene(x,y) { for(var i=0;i{ isHitting = true; target = info; }); setTimeout(()=>{ document.addEventListener("keydown",e=>{ if(e.key==="w") { var c = Math.cos(engine.camR[1]); var s = Math.sin(engine.camR[1]); engine.camP[2]+=c*sp; engine.camP[0]+=s*sp; } if(e.key==="s") { var c = Math.cos(engine.camR[1]); var s = Math.sin(engine.camR[1]); engine.camP[2]-=c*sp; engine.camP[0]-=s*sp; } if(e.key==="a") { var c = Math.cos(engine.camR[1]); var s = Math.sin(engine.camR[1]); engine.camP[2]+=s*sp; engine.camP[0]-=c*sp; } if(e.key==="d") { var c = Math.cos(engine.camR[1]); var s = Math.sin(engine.camR[1]); engine.camP[2]-=s*sp; engine.camP[0]+=c*sp; } if(e.key===" "&&isHitting) { engine.objects[target.parent].faces.splice(target.face,1); } if(e.key==="e") engine.camP[1]-=sp; if(e.key==="q") engine.camP[1]+=sp; if(e.key==="ArrowLeft") engine.camR[1]-=.04; if(e.key==="ArrowRight") engine.camR[1]+=.04; if(e.key==="ArrowUp") engine.camR[0]-=.04; if(e.key==="ArrowDown") engine.camR[0]+=.04; }); engine.addLight([2,7.5,0],[255,255,255],150,true,7,.25); objforrot=engine.addObject([0,-5,5],[0,0],[3,3,3],verts,faces); }); setInterval(frame);