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

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

Tags: , , ,

7 Responses to “WebGL – GLGE Updates and Demos .. Video & Canvas Textures Plus Filters”

  1. seamonkey says:

    Yeah!

  2. Dennis says:

    Awesome new additions! Thanks!!

  3. aa says:

    All demos crash minefield/Linux + ati hd 4340 or something like that.

    Error in first demo in Chromium:
    Fragment shader failed to compile with the following errors:
    ERROR: 0:21: error(#202) No matching overloaded function found pow
    ERROR: error(#273) 1 compilation errors. No code generated.

    Video demo doesn’t work on chromium (only sound with black box).

  4. Giles says:

    Looks pretty cool! They all worked for me except the first one, where I got the same error as aa did. I’m using Minefield, Windows Vista, ATI HD2400.

  5. [...] Some great new demos for Paul Brunt’s GLGE: 2D filters, video textures and canvas-based textures. [...]

  6. Denny says:

    Hi Paul,
    gratulations for the new features!

    Here are the Safari result:
    1. “No overloaded function for pow”
    2. No video texture is shown (but i think something was loading data in the background)
    3. Same as 2. but drawing works fine :)

    I hope that it won’t be to hard to fix that!

    Again nice work!

    Greetings,
    Denny

  7. Paul Brunt says:

    I think I’ve sorted the pow issue, fingers crossed. I’m so glad that shader validation is here :-)

Leave a Reply