Everyday 3D

Creative use of technology // A blog about 3D Flash and Actionscript by Bartek Drozdz

WebGL experiments cont.

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!

ROME “3 Dreams of Black”

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.

Webgl workshop, NYC, June 9

WebGL workshop, NYC, June 9-12

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]

J3D: taming WebGL

J3D

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.

J3D

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!

Format journey

A few months ago, I had the pleasure to work with Luciano Foglia and Anrick Bregman on a visual experiment called Format Journey. The installation uses data – a series of images and a sound file – to modify the texture and the shape of a 3D object. Combined with a slight randomization it gives very nice and unpredictable results.

When we first talked about the project, the idea was to use either Flash or Processing, but I though that it’s a good occasion to try Unity3D (of course… :) To achieve the desired visual effect I needed a shader system that’s fast, flexible that and works with 3D. Unity’s ShaderLab seemed like a good option.

The material on the shape is transparent and is composed of a blurred version of an image applied as regular texture and the image itself applied as reflection. The images change over time, and are animated by scrolling UVs.

All the data for the installation is loaded dynamically, the application itself is just composed of some scripts that make it run, so the file is only 55KB! It’s controlled by an external configuration file that allows to define the source images and sounds. There are also quite a few other settings to tweak they way it works, ex. how transparent or how reflective the material should be.

One particular challenge was to make the shape react to the sound. To make this happen I needed to read the spectrum and Unity3D doesn’t offer access to sound data on the code level. One possible solution was to write a plugin that does that, the downside however is that it wouldn’t run in the web player.

I solved the problem by pre-processing the sound in a small Flash app. It dumps the spectrum data to a text file which is then loaded to Unity3D. When the application plays the sound file, it uses this data to check the values of the spectrum at any position in time. Simple, but does the job.

The installation is part of a project called Tango and Hawaii created by Anrick and Luciano. Be sure to check the live demo. It was originally presented at the Magdalena Festival in Maribor, Slovenia.

It was a new experience for me to work on an art piece was. It was very inspiring to see what Anrick and Luciano did with a tool I helped them to create. Thank you guys!

Loading 3d models at runtime in Unity3d

IMPORTANT UPDATE! With Unity 3 there were some changes in the API and code described below doesn't work. Here's a new version, that works with Unity 3: obj (v1.2). Now, instead of creating a new object, attach the OBJ script to a game object and add the path to the .obj file in the inspector.

This post is an addition to the last series I wrote about dynamic content loading in Unity3D.

When building a dynamic application, every now and then you might need to load some 3d models at runtime. Either because there's a database with models you want to use or just because you want someone to update the models without rebuilding the project. I actually had this situation a few weeks ago. Surprisingly, this option does not come with Unity out of the box.

Asset bundles and resource folders

But first thing first. I said there's no ready-to-use way to load 3d models at runtime, but it's not 100% true. In fact, there are two options: asset bundles and resource folders. These methods are discussed in depth here.

They can both be useful in some cases, but they both have one fundamental drawback: in order to create them, someone needs to open the project in Unity, import the 3d models, create the bundles or resource folders and then export the whole thing again. To create an AssetBundle you need to run a script in the editor, while the Resource Folders... honestly, I failed to even make them work!

In brief, it's all too complicated for what I was looking for.

A straightforward solution

What I needed and wanted was easy and simple: to load a 3d object (geometry + some materials and textures) at runtime, using just a URL as parameter. The only solution seemed to write my own importer.

Basically, I had the choice between Collada and Wavefornt OBJ. I would choose OBJ any time of the day because it's a simple, concise plain-text format, while Collada is bloated and is XML-based.

It's not that I hate XML (although I'm not a big fan either) but in order to parse XML you need to include a pretty weighty DLL in your *.unity3d file, around 850Kb, which in this case (and in many others) defeats the purpose. Still, it's good to know that it possible, and there are situations when it's ok to use it. If you want to learn more about Unity3D and XML there's a awesome article on this topic by Paul Tondeur.

It turned out that while it's not rocket science to write an OBJ importer, it's not exactly banal either. I spent a few days coding it so I thought I'll share this with everyone - maybe someone will make good use of it.

Here's a package with the source code (v1.1) (or a version that works in Unity 3 (v 1.2)), along with a simple scene demonstrating how it works. In fact it couldn't be simpler. All you have to do is to create an instance of the OBJ class and start a coroutine to load the contents, like this:

C#:
  1. string path = "http://www.everyday3d/unity3d/obj/monkey.obj";
  2. OBJ obj = new OBJ();
  3. StartCoroutine(obj.Load(path));

Supported features

  • Vertex, normals and UV data
  • Multiple objects per file
  • Vertex groups and multiple materials per object
  • MTL files, diffuse and specular materials
  • Basic textures

And it's all at a cost of ~12Kb extra added to your final file!

Testing and the universality of OBJ format

In the 3D world the OBJ format is nearly universal - I think that every 3D editor in existence is able to export to this format. This also means that Wavefront files come in many different flavors.

I tested the code against models created with Blender and against common sense assumptions on how an OBJ file can be constructed. If it doesn't work with files exported from your editor send me the OBJ file, and if possible I'll update the code. It's released under the MIT license so feel free to use it in your projects, commercial or not.

That's it! I hope you'll find it useful!



  • FATC2011


  • FITC2011


  • FITC2010


  • FITC2010