Everyday 3D

HTML5 is full of surprises these days! I had no clue that there are browsers out there that already support user stream (i.e. webcam). This was always something missing in HTML5 compared to what Flash could do.

Fortunately, Kevin Sweeney posted a great article on Creative.js on that subject. After reading this I thought that there must be a way to use the webcam image as texture in WebGL. And there is! :)

To run the demo above you will need Chrome Canary with MediaStream flag enabled (detailed instructions can be found here). I was also able to run this demo in Opera Labs Camera build, which you can grab here. In both cases the performance was great!

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!