What is GLGE?

GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.

The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.

Get GLGE v0.9

Fork me on GitHub

Vehicle Physics in WebGL using GLGE and JigLibJS

July 25th, 2011

I finally have a nice simple implementation of vehicle physics working in GLGE. It’s not using the vehicle classes directly from jiglibflash, as they proved to be very difficult to get working correctly. Instead, it’s a new model which relies on the lower level jiblib classes. It’s slightly simpler than the original jiglibflash version to making things easier to tweak. Adding a new vehicle in GLGE is simply a matter of defining the car class, adding the wheels and then attaching the objects that are to represent them ie:

Or alternatively if you’d prefer to use the API:

In addition to car physics I’ve also added some support for fallback materials. This allows a material to be specified which will be used if the original material fails to work on a particular machine (eg, failing to compile because of too many varyings).

I’ve published a simple demo of vehicle physics in the github repo demonstrating it’s use, but I’ve also put together a more advanced demo to show what can be achieved with only a little effort:

Live Demo of Vehicle Physics

In case you are currently lacking a WebGL browser, here’s the video:

WebGL – GLGE Updates and Demos .. Video & Canvas Textures Plus Filters

July 18th, 2010

Not one or two but three demos this time. I’ve spent a little bit of time pulling togther code thats been hanging around for a while resulting in a number of new features. In addition, thanks to an excellent suggestion from Dennis Ippel I’ve added the ability to chain commands in the API eg:

myGroup.setLocX(10).setLocY(10).addObject(object1).addObject(object2);

Taking it one step further I’ve also added a quick notatation so you need even less code, so the example above can be written as:

myGroup._({LocX:10,LocY:10},object1,object2);

As well as that I’ve also got GLGE working in the latest nightlies of chromium and firefox, I’ve not been able to check webkit so shout if there is an issue. Be warned this may have broken things in older browsers :-(

2D Filters

GLGE now has the ability to apply 2D post processing filters to 3D scene, at the moment you need to write them in GLSL but I will try and build some common ones in(blur,dof,SSAO,bloom etc) before the next release. I’ve put together a demo terrain with some God rays and DOF:

Play Live Demo

Video Textures

GLGE can now apply a video as a texture, although the webgl video texture option seems to still be missing in webkit I’ve worked around it for now by taking the video via the canvas so it should work cross browser. Although the demo is only using ogg theora so I’m not sure about safari?.

Play Live Demo

Canvas Textures

As well as video GLGE can now display 2D canvas as a texture, in addition I’ve added texture coordinates to the ray query so you can interact with the canvas as you would normally. The demo below demostrates this by allowing you to draw onto the canvas that is being mapped to the cube.

Play Live Demo