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.5.2

WebGL – GLGE LOD Support

September 5th, 2010

So I’ve finally got round to adding LOD support to GLGE. You can now specify the mesh and material to use for a given pixel size. This should be partiulay usefull for mobile devices since GLGE will automatically select the mesh and material based on the pixel size of the object. I’ve done the video, though it’s probably a bit tough to see the LOD change in that so why not try the live demo:

Live Demo

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

WebGL – A Platform Game in GLGE v0.5

July 4th, 2010

I’ve finally got round to pulling stuff together for a well overdue release. Since this one is so late I’ve skipped a couple of versions as an indication of how much has been done since v0.2.

Some of the new features:

  • Environment Mapping
  • Bounding Volumes
  • Render to Texture, with built in oblique near-plane clipping, for reflections and refractions
  • Collada Animation support
  • Completely re-done skeletal animation; there is no longer a limit on the number of bones.
  • A new particle system
  • There is also experimental soft shadow support.

You may have noticed that the original GLGE animated man disapeared a little while ago. Unfortunately he doesn’t work in the new system and I seem to have lost the original blend file, so I don’t think I’ll be able to bring him back :-( ; I have however done a completely new test man with animations. As always I’ve had to rush the modeling and animation to get it done – one of these days I’ll spend some proper time on the arty side of things ;-)

Anyway I’ve used the new man in a simple platform game. It’s still very buggy as I’ve not sorted out proper physics yet but it shows off v0.5 quite well:

Play Live Demo

Video:

If you’re intrested I’ve made the blend files for this one available with the export script, which still needs a little manual intevention, but it’s getting there slowly. Download:

file1

file2

WebGL: Reflections and Refractions in GLGE

May 9th, 2010

GLGE now has a render to texture feature within the material system. In addition to rendering to texture GLGE also has common transforms built-in which allows you to create complex effects such as water with only a few lines of mark up. I’ve put together a demo showing how to achieve a water effect with reflections and refractions. The interesting part is that to define the material only took a few lines of XML:

Although this demo show water many other effects can be achieved, reflections on floors mirrors etc. Hopefully it will also allow for portals between scenes shortly, but is currently limited to cameras in the same scene.  This feature is not currently working in firefox and you will need a nightly of a webkit browser to view the demo since the RTT is using the DEPTH_STENCIL_ATTACHMENT which has yet to make it into firefox, fingers crossed it won’t be long!

Try Live Demo

The Video:

WebGL:Particles and Environment Maps in GLGE

April 25th, 2010
GLGE now has a couple of key features that have been missing up to now. The new particle system isn’t as comprahensive as I would like yet so there will no doubt be more update in the coming months, but it should be okay to prduce a vast range of effects.
Video:
In addition to particles I’ve also managed to add cube mapping to GLGE the result is that you can now specify environment maps very easily withing GLGE with just a couple of lines of XML:

I’ve put together a simple demo of environment mapping using the traditional teapot.
Video:

WebGL – Collada Animation and Skinning soon

April 5th, 2010
A collada animation and skining demo is coming soon much of the skeletal animation in GLGE has been rewritten in the last few weeks. But given googles recent quake port I though I’d put it off for a bit. Instead I spent a couple of days putting something together to demonstrate collition detection in GLGE. I’ve imported a level from Nexuiz into GLGE. I’ve not had time for some of the niceties such as shadow maps hopefully I’ll do a fuller demo soon. In the mean time play the live demo here(remember you’ll need a webgl enabled browser):
Play Live Demo
Controls WASD and mouse to move spacebar to jump. Be a little careful you can run out windows ;-)

Or see the video below:

Credit for the map from Nexuiz:
Tymo http://home.arcor.de/dwalinn/

NEW Release:GLGE V0.2

March 7th, 2010
As you may now be aware I’m not very good at drawing a line and issuing a release; there always seems too much left to do. So, I’ve been killing as many bugs as possible the last couple of weeks and fixing shader issues, adding parallax mapping and I can now say that GLGE v0.2 is go.  Since the last release there have been a lot of new additions, including:
  • shadow
  • collada support
  • gpu picking
  • fog
  • text rendering
  • parrallax mapping
  • and many optimizations
I’ve put together a little demo showing off some of the new features; it’s quite large so may take awhile to load on slower connections. I wanted to do something a little more involved but I think that will have to wait for the next release:
Try the demo
The Video
Features in the works, that will be coming in the coming weeks/months:
  • Some better documention and tutorials
  • software picking
  • particle system
  • cube mapping
  • reflections
  • refractions
  • physics
  • and much much more
On a slight side note, something that is definitely worth a look, katalabs have release a very impressive demo of webgl:
A few credits for the models used in the GLGE demo above, if I’ve missed someone off shout:
entertainment cabinet – trigram_QWQ
table and chairs –  © Google CEO at Google Warehouse
sofa – © resources.blogscopia
coffee table – © Alexandre BRETHEAU

COLLADA now supported

February 16th, 2010

I’m back now and fully back in to the swing of things. While I’ve been gone others have been busy, checkout this excellent brain visualization created by Phil Mercurio using GLGE, very impressive and very high poly:

http://thyrd.org/brain

I’m running a little behind schedule on GLGE at the moment but I’ve managed to get native COLLADA support working. The addition of COLLADA meant adding of a couple of other very useful new features to the core api. GLGE now has multimaterial support and also a new group class to allow for transform hierarchies(very useful for animation, and hopefully culling on larger scenes).

The COLLADA support is still a work in progress, there is no animation yet, and it’s not 100% reliable, but it’s on it’s way. I’ve put together a small demo with a few models from www.collada.org:

View Demo – Remember you need a webGL enabled Browser

Video

Version 0.2 of GLGE is coming soon I just want to iron out some bugs and tidy things and maybe include do a demo to showcase the features added since 0.1.

Picking Added

January 17th, 2010

Well another week and another new feature. Since I’ve really only had one sort of feature request from anyone I decieded to give it top priority and implement it ASAP. This turned out to be more challenging then I had first thought, mainly due to hours trying to find a stupid mistake I made early on :-( I’ve still got to do some optimization, but it’s reasonable performance at the moment.
Read the rest of this entry »

Implemented Shadows

January 10th, 2010

Shadows are finally working in GLGE. It’s taken a little longer then expected as rendering a depth map to a texture doesn’t seem to be working in any browsers and checking out the firefox code it would seem it’s just not supported there yet.  Until it is, It’s been hacked a bit encoding and decoding the depth from the rgb values. It works but it’s a more intensive an operation then it should be so spares use is recomended! This one works on firefox but I’m getting slow frame rates and I’m still not sure why, the JS isn’t that that complex and the frame rate is fine on chromium so it’s not the GFX card end either.

In addition this week I’ve added parsing of color values attributes in the XML so you can now specfy light/material colours using the normal HTML syntax ie “#ff0000″ “red” “rgb(255,0,0)”.

Click here to view the latest demo

Demo Video: