04 8 / 2010

GLGE: Taking the pain out of WebGL

GLGE is a library for WebGL that aims to “mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.”  It has a pretty impressive list of features:

  1. Keyframe animation
  2. Perpixel lighting directional lights, spot lights and point lights
  3. Normal mapping 
  4. Animated materials
  5. Skeletal animation
  6. Collada format support
  7. Parallax Mapping
  8. Text rendering
  9. Fog
  10. Depth Shadows
  11. Shader based picking
  12. Environment mapping
  13. Reflections/Refractions
  14. Collada Animations
  15. 2D Filters
  16. Video and Canvas Textures
  17. …And many more!

Dennis Ippel has written a getting started guide for using GLGE, which shows just how easy it is to create your very own 3d scene using data exported from Blender and a bit of XML.

<?xml version="1.0" ?>
<glge>
	<mesh id="box">
		<positions>1.000000,0.999999,1.000000,1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,0.999999,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,0.999999,-1.000001,1.000000,-1.000000,-1.000000,-1.000000,0.999999,-1.000001,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,1.000000,0.999999,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,1.000000,0.999999,-1.000001,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,1.000000,-1.000000,1.000000,1.000000,0.999999,-1.000001,1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,1.000000,0.999999,-1.000001,1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,-1.000000,-1.000000,-1.000000,-1.000000,1.000000,-1.000000</positions>
		<normals>0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,0.000000,1.000000,0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,-0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,-0.000001,0.000000,1.000000,-0.000001,0.000000,1.000000,-0.000001,0.000000,-0.000000,-0.000000,1.000000,-0.000000,-0.000000,1.000000,-0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,-0.000000,1.000000,0.000000,0.000000,-1.000000,0.000000,0.000000,-1.000000,0.000000,0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000,0.000000,-0.000000,-1.000000</normals>
		<uv1>0.333333,0.498471,0.001020,0.500000,0.000000,0.001529,0.333333,0.498471,0.000000,0.001529,0.332314,0.000000,0.000000,0.998471,0.001020,0.500000,0.333333,0.501529,0.000000,0.998471,0.333333,0.501529,0.332314,1.000000,0.665647,0.500000,0.666667,0.998471,0.333333,0.501529,0.666667,0.998471,0.334353,1.000000,0.333333,0.501529,0.998981,0.000000,1.000000,0.498471,0.666667,0.001529,1.000000,0.498471,0.667686,0.500000,0.666667,0.001529,1.000000,0.501529,0.998981,1.000000,0.667686,0.500000,0.998981,1.000000,0.666667,0.998471,0.667686,0.500000,0.334353,0.500000,0.333333,0.001529,0.665647,0.000000,0.334353,0.500000,0.665647,0.000000,0.666667,0.498471</uv1>
		<faces>0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35</faces>
	</mesh>

	<camera id="maincamera" loc_z="20" />

	<material id="boxmaterial" color="#900" />

	<scene id="mainscene" camera="#maincamera" ambient_color="#fff">
		<light id="mainlight" loc_y="5" type="L_POINT" />
		<object id="box" mesh="#box" rot_x="-.8" rot_y=".5" material="#boxmaterial" />
	</scene>
</glge>

Then, load and render the scene using JavaScript.

var doc = new GLGE.Document();

doc.onLoad = function() {
	var renderer = new GLGE.Renderer(document.getElementById("canvas"));
	var scene = doc.getElement("mainscene");
	renderer.setScene(scene);

	//render each millisecond
	setInterval(renderer.render, 1);
}

// load the xml containing the scene data
doc.load("scene1.xml");

After adding some simple textures and animations to the XML scene definition, you get something looking like this:

As you can see, GLGE makes it extremely easy to get started with writing 3d hardware accelerated 3d applications in JavaScript.  Awesome work!

You can check out lots more demos on the GLGE website, the code on Github, and Dennis Ippel’s fantastic GLGE tutorial here.

Tags:

Permalink