Dennis Ippel | Freelance Developer London | United Kingdom

Menu

Widgets

Search

Social Media

Hands-on WebGL: Basic GLGE Tutorial

In a previous tutorial I explained how to draw a triangle on the screen with pure low-level WebGL. A lot had to be done before anything could be drawn to the screen: define shaders, set up matrices, create shader programs, depth testing, vertex attributes, etc. Pretty interesting stuff if you’re into the technical details of WebGL but a true pain if you just want to create a nice 3D scene.

Fortunately there has been quite a lot of activity around WebGL already. The specification hasn’t been finished yet but there are already numerous libraries utilising WebGL:

GLGE

For this tutorial I’m going to use GLGE. It is very easy to set up and already has loads of features (from the GLGE website):

Keyframe animation

Perpixel lighting directional lights, spot lights and point lights

Normal mapping

Animated materials

Skeletal animation(WIP)

Collada format support

Parallax Mapping

Text rendering(probably bitmap)

Fog

Depth Shadows

Shader based picking

This tutorial will show you how to set up a simple scene, add a box, material and a texture.
If you don’t have a WebGL-enabled browser installed, here’s how to get one.

Setting up the scene

GLGE materials, meshes, cameras, animations, etc and the scene graph can all be specified through JavaScript or XML. The most convenient way is to do it in XML. This is an example of a very basic scene:

First the mesh data is defined. In this case, the mesh data is exported from Blender using the included exporter script or the Blender to WebGL script. I don’t think there is a built in way to add primitives to the scene as of now (please tell me if I’m mistaken).

Then a camera is defined. Only one property is defined, loc_z or the z position.

A simple color material is defined (#990000, crimson red). Later on we will use a texture.

Then the scene graph is defined. It consists of a simple point light and a box primitive. Note how the mesh and materials nodes are referenced by their ids (mesh=”#box” and material=”#boxmaterial”).

HTML & JavaScript

Once this is all defined we can start coding the HTML and JavaScript. First download the GLGE library files and put them in a folder called “glge”. Then include the following script in the HTML page:

Here we’ve added a new <texture> node that point to a jpeg file. Then a material layer is defined (a material can have multiple layers). The texture attribute contains a reference to the <texture> node. The mapinput attribute references the <uv1> node that was defined in the <mesh> node.

Not much to it, right? You can specify the duration by passing a number to the frames attribute. Then you add an <animation_curve> node for every property you want to animate. In this case we’re rotating the y rotation (RotY). The values in the <linear_point> nodes specify the frame number and the value (in radians, -6.283 = 2 * PI = 360 degrees).

See the result here:

That’s it for this very basic tutorial. If this has whetted your appetite and you want to see more tutorials then do let me know :-)