GLGE WebGL Library/Framework » Demos

Vehicle Physics in WebGL using GLGE and JigLibJS

Paul Brunt — Mon, 25 Jul 2011 17:25:01 +0000

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:

MD2 Models in WebGL using GLGE

Paul Brunt — Sun, 26 Jun 2011 16:19:33 +0000

Just a quick one this time. I’ll hopefully get a chance to post up some more demos during the week, but first off, I finally got round to adding MD2 support to GLGE. It turns out this is an excellent way to get animated models onto the web, being small and simple. Hopefully, I’ll be adding MD3 and MD5 as well before too long. As for using MD2 models it’s very simple:

var myModel=new GLGE.MD2;
myModel.setSrc({path to md2});
myModel.setMaterial({GLGE Material});
scene.addObject(MyModel);

and to animate:
myModel.setMD2Animation({animation name});

Live demo

Video – for some reason it’s a bit choppy :

WebGL Demo: Sky and New Fog options in GLGE

Paul Brunt — Wed, 13 Apr 2011 17:36:07 +0000

Having the need to create a more elegant blend to the sky recently I was finding the current fog system lacking in that no matter what set up I was attempting there was always a seam between the land and sky.

As a consequence GLGE now has a sky shader system. Which allows for procedural skies or ordinary sky boxes; in addition, there are two new fog options FOG_SKYLINEAR and FOG_SKYQUADRATIC. These two new fog options allow you to fade the far distance into the sky as apposed to a solid colour. This results in a more seamless transition from land to sky. There is still an issue when using it in combination with post processing effects but for general purpose use it’s very easy to set up and use. This is an early first attempt I have a few ideas for improvments that will hopefully come through at some point.

Live Demo

Video:

WebGL Demo: JigLib Updates

Paul Brunt — Tue, 22 Mar 2011 19:32:50 +0000

Just a quick one for now, but jiglibjs as well as GLGE has been getting a lot of updates recently. Loads of bug fixes in GLGE. But the exciting news is that JigLibJS now has trimesh support, a new grid system plus a new events system so now you can easily detect collisions within your code. I’m working hard to get a proper GLGE plugin written for JigLib so watch this space. In the meantime here’s a quick demo:

Live Demo

And for those who are lacking the GFX card needed or have yet to update their browser:

New Features and a fun webgl demo

Paul Brunt — Tue, 22 Feb 2011 19:00:12 +0000

It’s now possible to customize the webgl vertex shader in GLGE the idea being that you can let GLGE do most of the hard work and only add in the extra code needed for custom effects. At the moment you can only update vertex positions but I’m planing for more. To use it you simply need to wirte a function in GLSL:

vec3 GLGE_Position(vec3 pos){
//code to update position here
}

then feed it into a GLGE object:
object.setVertexShaderInjection({GLSL code to add});

Expect more additions soon with regard to customizing the shaders. I’ve also added an optional emit pass to the 2dfilter class so you can now do cool glow effects Here’s a small demo showing off the new features:

Features Demo

In addition I’ve also been playing around with the idea of adding a dynamic hair effect to GLGE, I’m still just playing around at the moment. I’ve put together a fun demo to show where things are at, best viewed with sound

Play with the hair ball

Lines and points in GLGE

Paul Brunt — Wed, 06 Oct 2010 18:04:53 +0000

Sorry I’ve been neglecting the blog a bit recently but rest assured work goes on So this is probably one of the most requested features and it’s been a long time coming rendering points and lines in GLGE. You can now specify an object to render as lines in GLGE simply by setting the render type on the object:
myObject.setDrawType(GLGE.DRAW_LINES);
myObject.setDrawType(GLGE.DRAW_TRIS);
myObject.setDrawType(GLGE.DRAW_LINELOOPS);
myObject.setDrawType(GLGE.DRAW_LINESTRIPS);
myObject.setDrawType(GLGE.DRAW_POINTS);
with points you can specify the size with:
myObject.setPointSize(10);

View source in the demo below for more verbose instruction on how it work.

Live Demo

Video:

WebGL – GLGE LOD Support

Paul Brunt — Sun, 05 Sep 2010 12:08:10 +0000

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

Paul Brunt — Sun, 18 Jul 2010 16:23:51 +0000

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

Paul Brunt — Sun, 04 Jul 2010 15:53:27 +0000

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

Paul Brunt — Sun, 09 May 2010 10:55:58 +0000

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: