Everyday 3D

WebGL never cease to amaze me. The combination of great performance, powerful features (even if they’re not safe :) and the immediate mode of development makes it the perfect tool for joyful tinkering with code, mathematical formulas and visual effects. Here are some of the experiments I did recently:

You’ll need Firefox 4/5 or Chrome and a GPU that supports WebGL to run the examples.

There is more here. I keep adding new stuff almost every week so be sure to check that page from time to time. All the demos are made using a little framework of mine called J3D (didn’t I mention it already?) It is available on github along with the source code of all the demos.

Instead of writing a long article about WebGL pros, cons or whatever, let me just say that if you ever had any interest in realtime graphics, make yourself a favor and try WebGL right now!

I’m happy to announce that “3 Dreams of Black”, a project I was working on for the last 5 months has been released last week.

“3 Dreams of Black” is an interactive music video directed by Chris Milk for Danger Mouse and Daniele Luppi. It features a song from their latest album ROME, performed by Norah Jones. It’s part of the Chrome Experiments series and was created entirely with HTML5 and WebGL.

This is the second time I collaborated with North Kingdom. It was a big project, and other parties involved were the team from Google Creative Labs, including Aaron Koblin and Mrdoob as well as the teams from Mirada L.A. and Radical Media. I would like to take the occasion and say thanks to guys at North Kingdom for letting me be part of it. I have never been working with such talented group of people!

The project was a big challenge and an incredible learning experience. I intend to write a longer post with more details as soon as I get some time. Meanwhile go to ro.me and enjoy the show!

After that, be sure to check the tech page which features information on the technology we used and a very cool model viewer. You can download the entire code base from there too – the project is open source! Mirada prepared a great case study that is worth reading as well.

Last year I did a few training courses in London. I was quite fun, so this year I plan to do more. To start with, I’m preparing a new workshop about webgl.

I have worked with webgl from the beginning of this year. It’s completely different from Unity or Flash/Away3D, and I guess it doesn’t give the “immediate fun” feeling that Unity does when you approach it for the first time. Quite the contrary, the kind of old-school, C style API can be intimidating, and the scarcity of resources adds to the image of a unapproachable technology.

Fortunately, reality is not as bad as it seems. WebGL can be quite fun to play with as soon as you understand some basic rules. Furthermore, it is based on Open GL ES which is an established standard for 3D graphics on mobile devices (implemented both in Android and iOS). Getting to know WebGL is a good way to introduce yourself to these technologies as well.

I’ll be doing the webgl workshop as part of the Flash And The City conference in New York on June 9. The workshop will focus on how to build 3d content from scratch with Javascript and we will see some techniques for importing 3d models and animations right into your browser.

If you don’t want to miss the event, be sure to get your ticket today. The number of places is limited. Use discount code webGL and they get $50 off!

For the workshop make sure to bring your laptop with your favorite Javascript editor along with the latest version of Chrome or Firefox and prepare for some serious (and seriously fun!) 3d stuff.

See you in New York!

[Photo credit]

I started to work with WebGL a few months ago. WebGL (in case you never heard about it) is a new emerging standard for rendering GPU accelerated graphics in the browser, without any plugins. Not all browsers support it yet, but the latest Chrome and Firefox do and others are about to follow (Safari, Opera, sadly not IE for the moment).

Whatever happens, WebGL seems to be here for good and it is definitely worth learning or at least looking at. It is a pretty low level API unlike Flash Away3d, not to mention Unity. In this respect, it’s much closer to Molehill. This can be discouraging at first, but after I got into it a bit, I found out it’s actually pretty fun to play with.

WebGL is a Javascript API. I always had mixed feelings about Javascript, remembering it from the days of Netscape and the so-called DHTML. But it was 10 years ago, and when I tried it again now I had to change my opinion. It may not be as strict and carefully designed as C# but it is simple, very flexible and easy to share. In the web environment, that last point (often brought by mrdoob) is perhaps the most important.

Based on OpenGL ES, WebGL is a collection of functions to communicate with the graphics card. To those of you who are used to OOP patterns and frameworks, WebGL will come as a shock. It’s mostly plain functions that set some properties, toggle some states or push some data to the GPU. It’s like a giant switchboard with one big global space for all operations. Sounds like fun, eh?

Resources and WebGL demos appear almost everyday, so be sure look around the web for interesting stuff. There aren’t that many comprehensive tutorials yet, but you can try the lessons at Learning WebGL – it’s the best introduction to the subject I’ve seen so far.

What better way to learn a 3D API than to build an engine? I was contemplating writing my own engine in Flash/AS3 a few times before, but never though I had quite enough knowledge to do this. This time I felt much more confident. Also, WebGL gives a pretty good start that Flash didn’t back in the days.

That’s how J3D was born. J3D is a very simple engine that can load 3D models and textures, has a scene with a hierarchy of objects and can render everything using basic lights. Somewhere on the way I added the feature to export models from Unity3d which I thought would make the job of preparing assets much easier.

Although J3D is pretty small and has limited functionality, it works and building it allowed me to learn and understand WebGL pretty well. This was my primary objective.

Last week I uploaded all the code to github and shared the link on Twitter. People seemed to like it and showed quite some interest. This made me very happy and gave me the idea to continue with the project and see where it leads me.

To sum up: demo, another demo, source code on github and more coming soon!

For the past 5 moths I have been working with North Kingdom on an interactive installation called Woodbot Pilots. I’m happy to announce that it had been launched last week!

It’s located at the Skellefteå Airport in Northern Sweden. If you happen to be in the area, make sure to check it out. However, as I imagine, it isn’t a location easily accessible to most of my readers, so I will be posting more pictures & videos as they appear.

UPDATE 28.01.2011 Here’s a video made by guys over at Interactive Institute in Umeå. The also published an article that you can read here.

Together with North Kingdom we are also working on a small website dedicated to the project. It will go live soon. In the meantime there’s a nice article from the opening ceremony in the local newspaper, Norran, where you can see Mr. Robert Lindberg, the director of Skellefteå Airport doing the first run.

Woodbot Pilots is a gestures controlled racing game. We display it on a huge 82″ HD touch screen (191 x 123 cm!) and a special 3D depth camera is used to read the gestures. The camera was developed by a company called Fotonic and is somehow similar to MS Kinect but has a bigger range (up to 7m) and is optimized for industrial environments.

The talented artists from Ars Thanea and North Kingdom created beautiful visuals and the sound engineers from Dinamhoe added a great soundtrack. The game itself was developed in the Unity3D engine. We connected the 3D camera using a C/C++ plugin developed by programmers over at Interactive Institute in Umeå who did a fantastic job – it runs very smoothly.

The game logic is implemented in C# – quite some code in there, even though the game concept is relatively simple. Thanks to a powerful graphic card (XFX Radeon HD 5870 1GB GDDR5) the thing runs at 60 FPS in full HD resolution which is quite amazing!

I will talk about the technical details in a future article. For the moment enjoy some pictures of the race track, and Happy Christmas everyone!

Also, make sure to check out this article on North Kingdom’s website – there are a lot of pictures of the installation itself.

This is just a quick post to let you know that I will be doing more Unity3D training sessions in London – on Nov 15th-16th and Nov 17th-18th 2010. There is still a couple of places left for both, so if you want to learn some cool 3D stuff, you can book it here, but hurry up – the last session was sold out.

On the post about the October session, I got a comment that my photo was not really related to the training, which was right – it’s just that I like this building. This time I used a screenshot from a game we are making during the session. Below, I post some more.