开发者

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

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.


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


Here is a nice website with 16 starter tutorials

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


What you are looking for Canvas with 3D content, has now become 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.org/wiki/WebGL

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜