How can I make a 3D shooting game using HTML5 Canvas?

Question

I want to make a 3D shooter (just shooting, no movements or anything) using HTML5 Canvas.

How can I do that? I searched for some tutorials but I couldn't find any good ones.

Answer 1

Here is a nice website with 16 starter tutorials

http://learningwebgl.com/blog/?page_id=1217

Answer 2

First of all I think this question is more suitable for the gamedev stackexchange website (http://gamedev.stackexchange.com/)

As said by the others, you gonna need to learn WebGL , which is the OpenGL ES 2.0 API for the ECMAScript implementation of most browsers. You need a WebGL enabled browser (The latest version of Firefox, Chrome or Safari) and a graphics card driver compatible with OpenGL ES 2.0.

The first thing to learn when beginning with game development imo are the maths about some matrix and vector operations . Search the web for some nice and fast tutorials on how to do matrix multiplication, transposition, how to get the determinant of a 4x4 matrix (which is different from getting a 3x3 or 2x2 matrix determinant) and how to invert a matrix should be enough. Then learn some (pretty easy) vector operations, Dot product, Cross product, adition, multiplication, normalization and scaling.

Then learn about the transformation matrices , the rotation, translation and scale matrices. And the view and projection matrices as well.

A little of the GLSL shading language and what are 3D models ( Vertex positions, normals, texture coordinates and materials ).

Ok, those are the keywords, now google it all. Here is a nice series of tutorials about vector operations for ya: http://www.dickbaldwin.com/KjellTutorial/KjellVectorTutorialIndex.htm

Answer 3

What you are looking for Canvas with 3D content , has now become WebGL .

I found a tutorial: Learning WebGL

Answer 4

You probably want something like three.js . It's primarily a WebGL framework, but you can also use/fallback on (2D) canvas.

Here are some of the 3D canvas demos .

Answer 5

Do you know WebGL? http://en.wikipedia.org/wiki/WebGL