Try the live fog demo

see the latest demo over at GLGE

Demo Video Below:

In addition this week I’ve added parsing of color value attributes in the XML so you can now specfy light/material colours using the normal HTML syntax ie “#ff0000″ “red” “rgb(255,0,0)”. I also sorted out the ambient lighting properly which until now was just tacked on top.

See the latest demo over at GLGE.org

GLGE Website

I’ve also spent a few days coming up with a more impressive demo. Please bare in mind I’m no pro CG artist, just a now and then amateur, so  imagine what could be achieved by the pros in a very short space of time. It’s not showing off 100% of the current feature set, some of which I think still needs rewriting and finishing off. But, hopefully it’ll be enough to change the mind of at least some of the WebGL naysayers, encourage more rapid development and make 2010 the year of 3D on the web.

Annoyingly it isn’t working on firefox (at least not my GFX card) there seems to be a bug where you can only map 4 textures to a shader Hopefully, they’ll get that fixed soon. In the mean time I’ve tested it on chrome and it runs at an okay frame rate, although I do think it’s time to get some optimization in there.

Play the demo live

The Video:(Still trying to figure out how to capture well in linux)

As a demo it’s still a bit lacking, since the speed of the control is framerate dependant, mainly due to my own laziness .

It has very basic collision detection to stop you walking through walls and allow to to climb stairs, basically just a 2D hight map. It looks like it’s going to be a killer trying to write a 3D physics engine in JS

There maybe some issues on the mac as I’ve still not figured out why the last demo didn’t work, please let me know any error messages you get. Looks like I may need to invest in a mac mini just to test on

First off this weeks demo. A very simple first person level:

Ths demo mainly shows off the new input control classes in the library. It also makes good use of normals maps for the walls. I believe it also contains the first mouse look control system for a webgame? I couldn’t make it work in the classical sence due to browser limitations so instead I took insperation from the wii version of metroid.

As a demo it’s still a bit lacking, since the speed of the control is framerate dependant, mainly due to my own laziness .

It has very basic collision detection to stop you walking through walls and allow to to climb stairs, basically just a 2D hight map. It looks like it’s going to be a killer trying to write a 3D physics engine in JS

There maybe some issues on the mac as I’ve still not figured out why the last demo didn’t work, please let me know any error messages you get. Looks like I may need to invest in a mac mini just to test on

I’ve got a complete and working XML parsing class so everything can now be easily declared in XML and imported into the engine. So it now take very little javascript to get started, for example:

var renderer=new GLGE.Renderer({canvas element});
var GLGEdoc=new GLGE.Document("library.xml");
GLGEdoc.onload=function(){
    renderer.setScene(GLGEdoc.getElement("scene"));
    renderer.render();
}

I’m now hosting the code on github: http://github.com/supereggbert/GLGE

Work on an offical website has begun but with so much other stuff to get done it’s a low priority at the moment.

I’m still having some issues with the directional lighting, I WILL get that fixed this week. I’ve done some research into shadows and I think I’ve got it straight in my head now so I’ll hopefully add to the library in the very near future.

I’ve added the blender scripts I’ve been using to export meshes, etc to the repositry.  They’re still very basic and requires tweeking on a per export basis so you will need at least a little knowledge of blender and python to use them.

More coming soon..

4) fog is on hold until untill I’ve got round to doing some turrain to demo it

Targets acheived this week:

1) Spotlights are now done and dusted

2) Made the animation system more generic (the aim is to make everything easy to animate), see the scrolling material layer on the floor of this weeks demo and the movement of the spot lights

3) Started writting an XML file format to make things a bit easier when it comes to handling resources

4) Fog is on hold until untill I’ve got round to doing some terrain to demo it

The latest demo is up, sorry for the insane animated material but I just wanted to do something to demo the animation system.

See the Latest Demo Here

(Sorry still no video under linux again)

It’s been a very very busy week I’ve nearly doubled the size of the library. I looked into importing collada files and I don’t think It’s all that practical, for more then basic mesh import. It’s an excellant generic format but it’s highly involved and since the whole purpose of the library was to abstract away the complexity I’ve decided to try and map a very simple XML format directly to the library. I may still reconsider and start a collada import but it will be some time off.

I’m starting to think it’s nearly time to release(at least as an alpha, since the api is still changing on a daily basis). I’ve been looking into github(many thanks to Giles Thomas for pointing me that way). Any other suggestions out there? Github does seem to be the best I’ve checkout so far. I’ve also put up some preliminary documentation for anybody intrested.

Click here to view the second demo

Figures crossed I’ll get spot lights going this week and maybe even the start the fog or collada import….so much to do!!!

Lets hope I can get a proper alpha release ready before xmas.

I’ve started working on a new graphics engine using webgl, it’s still very very early days(pre pre alpha lets say version 0.001). I’ve only been working on it a few of weekends, so consider this just a bit of a taster.

I’ve now got skeletal animation working reasonably well and I’ve started on the material system. Remember this is only a very basic work in progress and the graphics engine is nowhere near even beta so I’m not officially releasing that yet. Any feed back on the FPS your getting on your hardware would be much appricated I’m doing my best to keep things fast. Video below and demo links:

View the demo in a webgl enabled browser:

http://www.paulbrunt.co.uk/webgl/demo1/

Or the video on youtube:

http://ecom.armourhome.co.uk/brochures/armour_hotel/

You can view the final SVG version here:

http://www.paulbrunt.co.uk/svgflip/

Big thanks for the benderart peeps for letting me use blenderart magazine in this demo.

You can download all the code for this demo here:

http://www.paulbrunt.co.uk/svgflip/svgflip.zip

If you want to use and change the pages simply edit the config.xml file.

For anyone wanting to learn from the code, I must sincerely apologise, I wasn’t even sure where I was going to end up in this project so the code turned into a complete mess, so lets call it a “proof of concept”.The transforms work but even I can’t figure out what I was thinking when I wrote them. For that reason, I’m not worried about the copyright on this code, use it, abuse it, do whatever you want, I give you my permission; since I don’t think it’s maintainable enough to warrant an open source license. My only hope is that it inspires someone to do something better. If you really want to see how the effect is achieved there is an excellent tutorial at: http://oreilly.com/javascript/archive/flashhacks.html. It’s written from the perspective of flash but the same principles apply to SVG.

Comments and observations:

• I was originally going to be using SVG masks. Thankfully, I didn’t as the performance was far slower than clipping paths and in the end it wouldn’t have been usable, but I may not have noticed until too late.
• For some reason chrome was rendering the masks offset. I have a feelling it’s applying the transforms in a different order from firefox and opera, so the mask was being applied at a different point.
• Although the performance seems the best in chrome/webkit, I’m putting this down mainly to the fact that chrome seems to render clipping paths with no anti-aliasing by default. Although, there are “render” options within the SVG spec none of the browsers seemed to render any differently no matter what I set. It was also a little unclear as to where you would apply said render options when it came to clipping paths and masks.
• Firefox really needs to have a decent font implementation, webkit’s was also lacking but seems much further advanced. Opera was nearly perfect with their SVG font implementation. In the end I ended up converting the fonts to paths just to make it display consistently across the browsers.
• Chrome doesn’t seem to be too great with filters at the moment,and importantly it’s missing Gaussian blur. It would have been really useful and allowed much more eye candy had I been able to use it.
• From a performance point of view I would say SVG would benefit greatly from having a cache as bitmap option to indicate when the browser doesn’t need to re-render everything from scratch when animating through the DOM. As it was I ended up using proxy images during most of the animation just to get the speed to a decent level.
• It would have been far better if SVG and Canvas were more tightly integrated, there where many points during the development where using a bitmapped version of the SVG would have been far more preferable, unfortunately it seems that as yet you can’t just draw SVG onto the canvas like other image formats.

Conclusion, SVG is getting there very slowly. Hopefully, all the recent press around SVGWeb and the recent SVG Open will spur people on to use it more and we can get out of the chicken and egg situation we seem to be in at the moment.