A brief introduction to 3D

With WebGL and Molehill around there is a new playground for us flash developers. First I felt a bit stressed over the fact that I have to compete with people doing this for years on the desktop, consoles, mobiles and with plugins like Unity. But it’s just a good thing. There is loads of information and knowledge around waiting for us to consume. We can cut to the chase and use the techniques developed by people before us. We are also several years left behind cutting edge 3D regarding performance and features, so the 3D community have produced loads of forum-threads, tutorials and papers. It will be interesting to see how the flash community will embrace this “new” technique. Games is a obvious field, but what about campaigns and microsites?

Some days ago I had the opportunity to hold a presentation about 3D basics. My goal was to give a overview of topics that could be good to look into as a starter. I have tried to pick them from the perspective of a “online developer”, with MolehillWebGL and Unity as a foundation. The word-cloud above show some of the words I put into context.  It’s basic stuff, in keywords and bullet-lists, so think of this as a dictionary of topics to find more information about on your own. There is some cool demos and resources in there as well. If you are into 3D programming already, this is probably not so interesting for you though, instead you can help me review the slides and point out possible improvements ;) .

Here is the presentation as PowerPoint (16 MB, with fancy transitions and animations) and pdf (6 MB, not so fancy but comments are more visible). If you don’t have PowerPoint installed you can  just download PowerPoint viewer here instead.

Important topics missing? Thing I got wrong? I would love to hear some feedback on things to improve.

Interior mapping in Unity3D

Background

I have finally started to play with Unity3D. First goal is to get an overview of how shaders work. This will come in handy regardless of what platform I choose as my target. My favorite method when it comes to learning is to port stuff from another languages. Here I get the opportunity to learn two new languages at the same time. And all the trial and error involved often inspires me to do things that wasn’t intended in the first place.

My choice of shader to implement is written by Joost van Dongen (@JoostDevBlog) and he calls it “interior mapping”. It’s a technique to render buildings with a facade with reflections and lighting, and perspectively correct looking interiors (well, at least the walls is correct. Furniture or details on the walls is of course flat) seen through the windows, giving an illusion of loads of geometry on a wall with just two triangles. All done by a single shader. The use of raycasting together with interpolated fragments opens up for a lot of interesting ideas. It’s not a new technique though, I’m just exploring this field for the first time. Check out his excellent paper for details, complete with sources and explanations.

In this demo I use another source of inspiration as well. If you’re into Unity, you have probably seen this cityscape made by @bartekd. I using his example to plot out procedural buildings in a grid, and in the same time learning how to create meshes by scripting. That leaded me to add roads, sidewalks and lights. I also added a simple day/night-system which fades between two sky-boxes (looks weird with  fading sun, but that’s enough for this demo ), this parameter also control the lighting and if the activity in the building. Check it out:

Demo

View the procedural city here


Optimization

One thing that I’m totally missing here is optimization skills. Unity folks will shake their heads and laugh out loud.  I don’t know where to start really. The buildings and ground is just few triangles, but I have added loads of point lights and streetlight models. I should probably use some sort of light-mapping, but I think that is pro-licence-feature only. The ground is also a grid that looks exactly the same in each cell, maybe there is a way to optimize that. I have tried combining children and meshes, but I got stuck with light-problems or hitting the roof of max vertices. The shader has to be unique for each building, so I can’t combine those either. About shader models, this shader uses shader model 3.0, could not fit the instructions needed otherwise. But get rid of random walls from a texture-atlas and it will compile to model 2.0. But framerate is pretty smooth for this experiment and at least I got a playground where I can practice my forthcoming skills.

Source

Download the building shader I put together in Unity. It would be nice to do a surface-shader instead to get real-time shadows, but once again i’m not a owner of a pro license, so that have to wait. If you like, check out the whole scene package. It’s my first Unity experiments, so please be honest and tell me what can be done better.

Now back to the drawingboard, I have an idea that involves physics, so thats my next stop on the Unity bus. Until then, thanks for reading.