How to implement a 3D engine in HTML5

How to implement a 3D engine in HTML5

视频网址：http://www.hiwebgl.com/?p=728

   So my name is marius gundersen,i am here to show how to implement a 3d engine in HTML5 and javascript eh...in a 2D canvas in 45 minitues,eh... So ..this is going to be contenlogy ,now before we start ,you may have few questions for example eh.. what is 3D engine? And Why would everyone build one in html5?

WHAT IS 3D engine?

<canvas width="200" height="200" id="c"></canvas>

<script>

Var canvas=document.getElementById="c";

Var ctx=canvas.getContext="2d";

Ctx.fillStyle="red";

ctx.lineStyle="black";

ctx.fillRect=(128,96,64,48);

ctx.strokeRect(128,96,64,48);

</script>

why build one in HTML5?

Because we can.

  eh..The firs question kinda of difficult to answer,we need the whole 45 minitues to explain it.the second one you see it you want build one in html5?because we can,you see, the canvas take and throngh Javascript is not possible to make a 3d engine,using just 2d context,this is new element in html5.how many people there have been working with the canvas before?raise your hands?

   Excellent,,so you know all the property...getting the 2d canvas,and drawing with for example vertex and color and everything..

   Eh..javascript now is incredible fast.it's you probable don't know how fast it is.unless you work with it.eh.. Canvas on the button right,now shows you the cubic left running and the number moving back.it's a frame for second.this is how many times we can redraws that red tag.so, 7000/second,we can run the coji.

Now with the same pro..and..........so, what is 3d engine,why would we need it ?

Eh...everyone probable play 3d,you have 3d in your computers,while we don't really ,because ,the computer screen is too ...and on the 2d screen,you can only have 2d graphics.what we can do ?yes ,we can cheat,if you can do simple 2d shapes,like the histogram and wine,we get somebody said it cubic ,if we combine them.

So ,3d engine.now if you are javascript developer .you love this ,this actually active controller.this is 3D words.

3D engine

Model(the world)

View (the screen)

Controller(the render function)

  

All the shapes,the textures,everything is in the world,we want to project the world,the screen,this is the view,you have height and width.finally we have a controller,

So how does this work?

This is on the left side,you eye ,image you standing here,you look straight forward,then you see something .it could be a plane,a supermarket, a bird  a superman,the thing is you don't know what you going to see,it's somewhere outer,and you can't tell how far away it is ?it could be very large plane very far away or a small bird right closing.all they know is direction. Which is the line.now let's furthese  you stand in  doors,looking through the window,right present the ...and you got more and more curtain is a superman.is it or isn't it...it just you friend stick to the window,so that why you see  you think you see superman out the sky.the question now we got is where may the place the superman is under the window for you to think something outside.and the other is where the ..set.

We can reduce this into a simple shape,and the other is obviously triangles...you havn't said this is ..between your eyes and superman outside the air.we also have wine this is above you .and we have distance ,the distance you and the window or just the screen just in case.the question now becomes what's your white pb.where should the superman under the window,so it looks he is here.while this are relagete ,simple relationship.and if you were rearrange,this relationship we get the answer ...that's it ,that all we need to make 3D engine,so it's look exacte the same,with this you can make very simple 3D engine.i will do that today.before we start through,the rest present is going to be,we going to make a simple engine first,and then we going to add do it.making more and more advance.each direction ..we will start up with a simple map,with a fingure,and then i will choose some soticode,the soticode will translate the javascript.i am not going to through the javascript in a detail,we don't have time for that.and there is certain no point.the point of javascript is showing you only few lines of codes is needed to make the 3D engine,and finally you will have what we have just made.

So first engine,we will going to project some point.really simple.what do we need.while we need world,the world look like this it's just 8 simple points,each one has three ....and if you look  this and  figure out for a while ,you find 8 points means a cub,that we are going to project.quite simple.

                               The world

                               Var world={

                                   Vertices:[

               {x:100,y:100,z:500},

               {x:100,y:100,z:500},

               {x:100,y:100,z:500},

               {x:100,y:100,z:500},

               {x:100,y:100,z:300},

               {x:100,y:100,z:300},

               {x:100,y:100,z:300},

               {x:100,y:100,z:300},

]

}；

Nest view of you ,let's by camera of project,eh... And this has few peculiarity.Depth,that's the distance between you and the screen.the divaree ..you will see the screen ,the 2D context,the dome.the height and width of the screen.and we have offset this is just to fix the ..of the projection in the middle of the screen and to the left corner.

The camera={

     Depth:350,

          Screen:Demo.ctx,

                  Width:Demo.canvas.width,

                   Height:demo.canvas.height,

                 offsetX:demo.canvas.width/2,

                offsetY:demo.canvas.height/2

}

  Then the render function,three line of conclusion.for each vertex,project onto the screen and draw on screen.

               The render function (psedocode)

For each vertex

  Project onto screen

Draw on screen

  and the javascript,it's 10 or 9 lines of code.the first three lines is quite simple,the function,the loop which is the vertices.then the four lines of the middle ,that the projection we had before,exactly the same code,and finally we use a simple way to fill it to fell .eh...right the triangle .the demo look like this.

Function render(world,camera){

              For(var i=0;i<world.vertices.length,i++){

              Var vertex=world.vertices[i];

                  Var scale=camera.depth/vertex.z;

                         Var posX=scale*vertex.x+camera.offsetX;

                         Var posY=scale*vertex.y+camera.offsetY;

      Var size=scale*10;

                            camera.screen.fillRect(posX-size/2,posY-size/2,size,size);

}

}

  Eh...let's look what's actually happening here.we have the points in the middle,as you can see,and we also have access right and downwords  ,...in front the camera project ,they  have the screen,that is the black tangle,that's actually the screen. It's important to realize.....that means all the 8 points are now somewhere behind the screen,far wary,and now if you move the camera closer, they are now somewhere between the camera and you.eh...so ,let's add all the stuff to do it.

  So, we start of a movement,move the camera,as i said the the corner of the vertex  means  you bread.and we could move you head to change 3D view.and the screen ,that this screen,and we can't go back of the screen either.

  Instead ,what we can do?it's moving everything else...and it's the same,if move the camera to the right, and move the vertex to the left.it's exactly the same thing.so,what we are going to do,instead? To move the camera closing to the vertex and move the vertex closing to the camera.we will do this each frame,

      The camera with position

Var camera={

X:0,

Y:0,

Z:0,

     Depth:350,

                   Screen:demo.canvas.width,

                   Width:demo.canvas.height,

                    Height:demo.canvas.height,

                     offsetX:demo.canvas.width/2,

                      offsetY:demo.canvas.height/2,

}

未完。。。。待续