New kid on the block: Babylon.js

New kid on the block: Babylon.js

There is a new JavaScript framework called ‘Babylon.js’ by David Catuhe which is the first one for some time that does not rely on Three.JS.

I didn’t have time to play with it yet, but it looks awesome.

Check out the demos on the website!

It is open source under a Microsoft license and the first major contribution from MS to the WebGL community that I know of. Kudos to David and Microsoft!

Source code of the minimal first person webGL demo

I forgot to mention that I uploaded the sources to the minimal FPS that I mentioned in my last post ‘Towards open game engines in the browser‘. Hopefully this gives a head start to someone who wants to combine 3D (Three.JS), physics (Cannon.JS)  and first person controls.

You can find the repository on Github.

 

[EDIT]:

Towards open game engines in the browser

I started a series of experiments towards a game engine in the browser. This is part of a bigger plan that I hopefully get sorted out soon and write down eventually*.

To me, there are two paths to follow towards games** in the browser and I will follow both of them.

The ‘Bananabread’ way

Taking a full fledged game engine like Cube2 is the way that Alon Zakai is following – his Emscripten process is compiling it to pure Javascript and ports Bananabread to the browser. At this very time of writing he is adding the last missing piece to it – network support.

I cannot stress enough how incredibely cool this is.

The JavaScript library way

A ‘game engine’ comprises usually a couple of different components and it turns out that you find open source JavaScript libraries for nearly (?) every purpose of such an engine – sometimes even more than one.

• 2D graphics: Raphaël, D3 (etc etc)
• 3D graphics: Three.JS, SceneJS (etc)
• physics: Cannon.JS, Ammo.JS (etc)
• audio: Webaudio.JS (etc)
• persistence: FileSystem API
• controls: PointerLockControls
• networking: SocketIO, WebRTC
• scripting: well, JavaScript obviously? (or CoffeeScript, Brython)

This list is by far not complete (more complete lists here and here) and I am probably missing some bullets and some libraries which even underlines my point: everything seems to be there.

To get a grip on it myself, I took a 3D engine, a physics engine and the first person controls and build a little demo, sporting an (albeit unsophisticated) Blender model and some dynamic objects:

Why is this important?

There is absolutely nothing wrong with proprietary concepts like the Unity Engine, not even with Flash.

I still think it’s important to be able to create something right in your Browser – both Mozilla and Google are working towards turning their browsers into multimedia engines and add the parts missing in a spectacular speed.

Most of the components needed are already there, so why not use them?

But even more important: all of these libraries are open source. This means we can not only use them for free, but we can learn from them, combine them and maybe enhance them to something that the original authors may have never thought of.

So – what keeps you from building?

* Rob Hawkes (former Mozilla) has written an excellent post which includes some aspects of the bigger plan™.

*Disclaimer: when I say games I mean the good definition of games like in  “cutting edge real-time database network application with multimedia frontend for entertainment” and not the awkward german definition of  “it’s fun so it can’t be serious”.  And no, I won’t grow up.

[EDIT] The source code to the demo is on Github.

[EDIT2]

Blender view

‘The future of web gaming’ – Talk by Colt McAnlis

Colt McAnlis’ (guy, blog) very interesting take on the future of web gaming. He addresses the existing possibilities of HTML5 and JavaScript areas and stretches out to native client code ‘NaCL’ and even multi-device development. About 40 minutes, and very worth the time!

Lyon’s Saint Jean Cathedral in WebGL

This is actually quite impressive.

More WebGL

(note: most of the links in this entry need a webgl enabled browser and somewhat decent hardware.)

Some time ago I posted this entry, stating that the combination of Node.Js and especially WebGL would be a possible Web3D solution of the future. Indeed 2011 brought us many exciting developments and especially ‘The Wilderness Downtown‘ and then ‘3 Dreams of Black‘ from Ricardo Cabello (aka Mr.doob) with a little help from Google.

But it didn’t stop there. CubicVR.js even sports physics now and comes along nicely. The ‘competitors’ – if I may say so – are not lazy either.

Scene.js calls itself a ‘3D Scene Graph Engine for WebGL’ and appears to be under heavy development.

On htmlgamedevs.com I found this entry that leads to a great blog called cyborgdino.com; they create a tutorial for those who want to get their hands dirty on a game engine with webgl.
There are two tutorial steps online already:
step #0
step #1

There are several other developers out there with outstanding demos. Besides the notoriously outstanding mrdoob one has to mention AlteredQualia and I also like the demos from Einar Otto Stangvik a lot.

It’s also a good sign that there are a couple of new blogs out there that deal with webgl and spread the news.

New entries on my watchlist is the beforementioned http://www.html5gamedevs.com/ and http://www.webgl.com/.

Also check out this beautiful demo for the js1K competition!

2011: the year of Web3D?

Some time ago I checked the state of WebGL and it looked not too great. This changed dramatically recently, so I dare to say that the next browser generation coming up will change the 3D capabilities of the web this year.  In the current generation (as of January 2011) there is no regular browser WebGL enabled.

Consequently, to see any WebGL demo you need a so-called nightly build. Here’s a webpage that describes where you can get nightly builds of browsers that already support WebGL (namely Webkit/Safari, Firefox and Chrome).

There are a number of 3D ‘engines’ making it easier on the web developer to include 3D artifacts in their sites. I especially came across MrDoobs outstanding blog and the three.js engine.

It fancies the ‘Or so they say…‘ WebGL Demo (video preview – must see!):

 

Other ways to create WebGL is to do it directly in JavaScript, of course. You will want to check out the resources on the Learning WebGL pages if you go this way.

The Cubic VR 3D engine is about to be ported to WebGL, with the fantastic (albeit somewhat older) ‘Flight of the Navigator’ demo video:

For Blender users, GLGE might be the path to take.

Also the Google Code WebGL samples are worth a look, featuring the Aquarium example that sports a winning software combination IMHO, that might make web3d finally arrive in 2011:

node.js, socket.io and WebGL.