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.☺