3d engine for html5 using canvas element

Hey guys,
I'm making a 3d engine for html5 (canvas) but I have some problems well here is my code for the html document
engine3d.html

<html>
	<head>
		<script src="engine3d.js" language="JavaScript" type="application/javascript"></script>
		<script type="application/javascript">
			function init() {
				//creating canvas
				canvas=document.getElementById("canvas");
				ctx=canvas.getContext("2d");
				ctx.beginPath();
				color3(ctx,0,.5,0)
				ctx.moveTo(0,horizonZ)
				ctx.lineTo(500,horizonZ)
				ctx.moveTo(0,startZ)
				ctx.lineTo(500,startZ)
				translate3WithoutRotation(ctx,100,0,1)
				vector3WithoutRotation(ctx,100,0,90)
				vector3WithoutRotation(ctx,200,0,90)
				vector3WithoutRotation(ctx,200,0,1)
				vector3WithoutRotation(ctx,100,0,1)
				ctx.stroke();
				ctx.fill();
			}
		</script>
	</head>
	<body onload="init();">
		<canvas id="canvas" width="500" height="500">Your browser doesen't support canvas.</canvas>
	</body>
</html>

and the code for engine3d.js is

//the horizon or VP is in the point ... 
horizonZ=250
//the VP is in the point ...
horizonX=250
//where the first point of the viewer is
startZ=500
//rgb
function color3(ctx,r,g,b){	
	r=Math.floor(r*255)
	g=Math.floor(g*255)
	b=Math.floor(b*255)
	ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
}
//rgba
function color4(ctx,r,g,b,a){
	r=Math.floor(r*255)
	g=Math.floor(g*255)
	b=Math.floor(b*255)
	ctx.fillStyle="rgba("+r+","+g+","+b+","+a+")"
}
//set inicial point in a 2 dimensional surface to the point...
function translate2(ctx,x,y){
	ctx.beginPath();
	ctx.moveTo(x,y)
}
//create a line in 2 dimensions
function vector2(ctx,x,y,stroke){
	ctx.lineTo(x,y)
}
//For 1 point perspective 
function translate3WithoutRotation(ctx,x,y,z){
	//x quantity
	xDif=(horizonX-x)*2.5
	zDif=startZ-horizonZ
        //for each x is each z
	xplus = Math.cos(Math.atan(zDif/xDif))
	zplus = Math.sin(Math.atan(zDif/xDif))
        //how many x is need if z is ...
	zplusQuant=z/zplus
        //the x is the x needed for each z by the quantity of z is used plus x
	xf=xplus*zplusQuant+x
	//z quantity
	zf=(Math.atan(z)*horizonZ)/Math.atan(999999999999999999999999999999999999999999)
	//create floating point
	ctx.moveTo(xf,500-zf)
}
function vector3WithoutRotation(ctx,x,y,z){
	//x quantity
	xDif=(horizonX-x)*2.5
	zDif=startZ-horizonZ
	xplus = Math.cos(Math.atan(zDif/xDif))
	zplus = Math.sin(Math.atan(zDif/xDif))
	zplusQuant=z/zplus
	xf=xplus*zplusQuant+x
	//z quantity
	zf=(Math.atan(z)*horizonZ)/Math.atan(999999999999999999999999999999999999999999)
	//create floating point
	ctx.lineTo(xf,500-zf)
}
//For 2 point perspective
function translate3WithoutRotationY(ctx,x,y,z){
	
}
function vector3WithoutRotationY(ctx,x,y,z){

}
//For 3 point perspective
function translate3(ctx,x,y,z){
	
}
function vector3(ctx,x,y,z){

}

The code just functions if the user inserts a really big value in the z.
Also I would want to know of some pages that explain how to make the 2 point perspective and 3 point perspective.
I think I need to change the algorithm I really don't know the math algorithms for 1, 2 and 3 point perspective. I just figured it out. So I need to know the algorithms to create this engine.
if u can give me any advice for making the 3d engine.
thanks in advance.☺

Contributor

Replies

View

louiscos77

Newbie Poster

10 posts since May 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3d engine for html5 using canvas element

This article has been dead for over three months: Start a new discussion instead