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.

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.

• javascript
• html
• canvas

Share Improve this question Follow edited Apr 8, 2016 at 14:40 user128511 asked Apr 13, 2011 at 14:01 ThewThew 16k1919 gold badges6161 silver badges102102 bronze badges 2

• I think you're a little ahead of the pack on this one. :) Take a look at this though: blog.nihilogic.dk/2008/03/… – Diodeus - James MacFarlane Commented Apr 13, 2011 at 14:03
• @Diodeus I already searched through that website on my search for tutorials... – Thew Commented Apr 13, 2011 at 14:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

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 patible 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./KjellTutorial/KjellVectorTutorialIndex.htm

Here is a nice website with 16 starter tutorials

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

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

I found a tutorial: Learning WebGL

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.

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