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!

Welcome back everyone!

I haven’t posted for a while, but the reason is simple: I’ve been busy. I don’t find enough time these days to write long articles like I used to. I have a lot of things to post about though, so my plan is to make my articles shorter :) For start, here’s a quick update of what I have been doing since last July.

WebGL and J3D

I have been working a lot with WebGL. I created my own engine – J3D. I was very excited to see that it aroused some interest in the community, but I also found out that building a 3d engine is a huge task, especially if this is only a side project.

Currently, I push updates to J3D on a regular basis but I hope other developers will want to contribute as well. Besides more features, it needs some refactoring, optimization and documentation, all of which I can’t do on my own in a reasonable amount of time. You’re more than welcome to fork it on Github!

OnGameStart

Last September, I had the privilege to speak at my first HTML5/JS conference – onGameStart. It took place in my hometown, Warsaw.

It was an exceptional conference for me. I had the occasion to meet a lot of great developers from the HTML/JS community and also show my 3d engine for the first time. Here’s a video from my presentation. onGameStart will be back in 2012, so be sure to check it out – it’s really worth it!

Wait, there’s more!

In the last 4 years I lived in Stockholm and most of this time I have been freelancing. It has been a great time. I had the chance to work with many great companies, including North Kingdom, with which I did two projects that I’m really proud of – the Woodbot Pilots and Rome.

Things always change however and I felt like it was time to move on. So, last fall, I left Stockholm for sunny Los Angeles and I took a full time job at a digital production company called Tool.

Forever 3D? Probably not

This blog has always been focusing on realtime 3d graphics. I started with Papervision, moved over to Away3D, then to Unity and finally to WebGL. Along the way, I had the chance to learn a lot about 3d programming and the chance to teach myself some 3d modeling as well. All this was a great experience!

Lately, I’ve been involved in other areas of interactive design, like 2d, animation, sound and networking and there is a lot of interesting things going on there, especially on the web standards side of things. So you may expect some diversification in topics from now on!

It’s good to be back.

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!