Game Development Reference
In-Depth Information
Understanding WebGL
WebGL is a JavaScript API based on OpenGL ES 2.0. OpenGL ES 2.0 is the API
for 3D rendering on smartphones running on the iPhone and Android platforms.
WebGL enables web content to perform 3D rendering in HTML canvas in browsers
that support it. Hence, to learn game development using WebGL, you need to
understand JavaScript and HTML basics. If you have an understanding of the
mathematics involved in 3D graphics, that's great. However, it is not a must to
understand this topic. The WebGL program consists of a JavaScript control code
and a shader code. The shader code executes on the computer's GPU.
Differentiating WebGL from the
game engine
WebGL only provides 3D rendering capability. It is simple, straightforward, and
insanely fast. It is good at what it does, that is, rendering 2D and 3D graphics. It is a
low-level programming interface with a very small set of commands.
WebGL is not a game engine like Unity, Cocos2D, or Jade. A game engine has many
other features, such as collision detection, ray casting, particle effects, and physics
simulation. Using WebGL, you can create your own game engine.
WebGL provides functionalities to draw basic primitives such as lines, circles, and
triangles that can be used to draw any complex 3D object. It does not provide a direct
function to add a camera to your scene. However, a camera class can be evolved
to do the same. This is what this topic will help you with. It will help you create a
library on top of WebGL tailored for creating games and gaming functions.
Understanding basic 3D mathematics
Developing a WebGL game requires a good understanding of 3D mathematics.
But we will not cover 3D mathematics in its entirety, since that would require
a complete topic in itself. In this section, we will cover some basic aspects of 3D
mathematics that are required to understand WebGL rendering. We will also build
an understanding of the 3D mathematics library that we intend to use in our game.
In this section, we will cover a very powerful JavaScript library called
glMatrix
(
http://glmatrix.net
).
