Tutorial #1: Let's get started, making virtual worlds with Google Sketchup and Unity 3D!

This is the first in a series of tutorials I will be writing up, detailing the fastest and easiest way to get to your goal.

Many of you out there are currently using Google Sketchup to get to grips with 3D modelling, but very few of you are aware of how easy it is to make a virtual world you can explore and walk around. Maybe you're into doing architectural visualisation but all you know how to do is make static images and movies. Wouldn't it be better if you could allow people to explore your 3D environment in real-time?

This is how to do it, and now is the time to learn. The 3D industry is expanding faster than it ever has and if you're about staying ahead of the game you need to think in terms of accessibility. To that end, the engine we're going to be using is called 'Unity 3D'. Like Adobe Flash, it will allow you to present 3D content from inside a webpage. Why make a virtual world that requires the user to download an installation file to see when you can run it from inside an internet browser?

Never make the mistake of thinking that 3D engines are only good for making games with. There's a huge industry out there covering fields like simulation, visualisation and training just to name a few. While it's true that competition in the gaming industry is what fuels the necessary advances in technology, it's just a part of the picture.

We're going to make a very small scene, this tutorial will cover just the basics.

You will need the following software...

Google Sketchup (free)
Light-up Plugin for Google Sketchup (trial)
Unity 3D for Windows or Mac (free)

I'll explain in detail what each of these is good for on the next page.

Google Sketchup

This 3D authoring environment is taking the net by storm. It's simple to use and has a good number of features designed to facilitate speed and accuracy.

You can find the official youtube tutorials for sketchup here. It's quick to learn and, within a day, you can be creating geometry it'd take you weeks to master in 3ds Max or Maya. There is a downside to it though; it does create a lot of unneeded geometry (similar to the way in which html authoring programs create junk script). That doesn't matter for us because we're only making a small scene, if you were going to work on something larger though, you'd need to think carefully about optimization.

Light-up Plugin for Google Sketchup

When lighting a 3D model, a lot of time is spent getting things just right. The problem is that when you light a model for use in a program which doesn't have the advanced real-time lighting features of the Unreal or Crysis engines, we need to use a technique called lightmapping. A lightmap is a material we assign to an object in order to tell it where the shadows are being cast, as well as which areas are brightest and darkest. The following picture is an example of a lightmap...

I generated the lightmap above from inside Sketchup with the light-up plugin (see page 1 for links). Something to keep in mind here; as 3D engines advance to the point that they have full real-time lighting, lightmapping will slowly become a thing of the past. As things stand however, we will be running our 3D environment from inside an internet browser and so we don't want to slow everyone's machine down by implementing GPU intensive lighting in all of our scenes. You need to think about not just how to deliver your content but how it will perform. The better you are able to optimize your scene, the more you can do with it, without slowing down the user's PC.

The other important feature we need light-up for is the ability to export our content, with the lightmaps, as an FBX file. Normally, if you wanted to export your work from Sketchup in any other format than SKP (the official Sketchup format), you'd need to get the professional version of Sketchup which is an unnecessary investment (with regards to this tutorial). Instead, get the light-up plugin, the trial will see you through this tutorial and then you can decide if this is the workflow for you.

Unity 3D

If you've been reading this blog (Virtual Autonomy), you should know I'm an advocate of Unity 3D. Simply put, it allows you to publish your 3D content to the web. Of interest is that it can also publish to Apple's iPhone, the Nintendo Wii, PC and Mac. It's also coming to the Playstation 3 and there's talk of support for the Xbox 360 at some point in the future. It's an extremely functional engine which is only a fraction of the price of other industry standard behemoths like Unreal and the CryEngine.

With that said, let's move on to the first step of the tutorial on the next page.

Step 1 - Creating your scene inside Sketchup

Something you need to know about real-time 3D modelling is that the best practice involves only rendering one side of a face. This simply means that if I create a plane, only one side of it will be rendered, because the other side will be occluded/invisible to the user. If you think of a 3D cube, the user will never see the inside of it, so why have the engine render both sides of each face?

The way to make sure you have the correct side showing is to do the following.

1. Make sure you are viewing your geometry with the monochrome option shown below.

This will allow you to see which side of the face is reversed. The darker face is the one that will be invisible inside Unity. You need to make sure the lighter face is the one you want to be visible inside Unity. The way to correct it is to select the face and right click it. This will bring up a small menu inside which is the option to 'reverse faces'. If you do it properly you should end up with something like in the image shown below.

Which should be followed by the face changing to a lighter colour...

This indicates that you have successfully reversed the face and that everything is progressing smoothly. So let's build up our scene a little, we're only practising here so don't invest too much emotion in getting a work of art done. True to form, I'm going to put a little house together as that's what I find most students do when familiarizing themselves with a 3D authoring environment.

Let's go to the next page for step 2, the lighting.

Step 2 - Lighting your scene with the light-up plugin

So, you've built your little area and now it's time to give it some realism by adding lights to it. The good news is that the light-up plugin actually pays attention to where shadows are being cast inside Sketchup. Not to get too far ahead of myself here but the image below shows you what I mean.

With regards to using the plugin, here's what you need to know.

After you've installed light-up and restarted sketchup, you should have a new set of buttons at the top of the of the interface.

The first one, which looks like a gear, is the preferences button. If you click it, you will be presented with the following options...

The check box indicating whether or not geometry is double sided is fairly important. You'll remember that we spent some time ensuring that our faces were all properly aligned with the 'reverse faces' option. If this box is ticked, you don't have to do any of that. The downside is that the model will have twice the number of polygons. Truth be told, this isn't as bad as it sounds since GPUs these days are easily able to render millions of polygons.

If you're serious about this however, you need to make sure your faces are properly aligned since that's what professionals do and it's a good time to be forming habits conducive to achieving best practice. It's up to you, export your geometry double sided or single sided.

If you're having trouble with it, don't worry and just set it to double sided.

You'll notice that I've set my resolution to 20x. The default is 1x and you can replace x with any unit of measurement you like. It determines how much detail the lightmap contains. The larger the value, the more detail and the longer it will take to render. For ease of use (and surviving until the end of this tutorial) I recommend setting it to 6x.

You'll notice that there are 'documentation' and 'tutorial' buttons at the bottom of the menu, I encourage you to make use of them if you want to get the full value of this plugin. I'm going to move on now but know that 'direct sources' includes Sketchup lighting from the sun. Also, it's good to have some form of AO/ambient occlusion so make sure 'screen with AO' is also checked. I recommend setting the AO to 'external' for ease of use. Just be sure to switch it back to 'direct sources' afterwards otherwise it will only render the AO. Read more about ambient occlusion here. Lightup has its own point light sources you can find in the components section (under 'windows').

Once you're ready to test your lighting, click the footprint symbol and sketchup will appear to have crashed. Don't worry, it hasn't. Depending on your rendering settings it will remain unresponsive for a long, or short, period of time. During this phase sketchup is rendering out your lightmap. Once it's done you can navigate your scene by holding down left click with the mouse and moving it. Navigate on the axis with the arrow keys on the keyboard. If the gliding motion is annoying you or you're moving too slowly, you can edit those options by clicking the button in the middle (the light bulb with a question mark).

You can see here that I haven't lit the inside of my house, nor has it been textured. My goal here is only to show you how to get the lightmapped model into Unity.

Let's move on to the next page where I show you how to get your model inside Unity!

Step 3 - Getting your model inside Unity!

You'll have noticed that once your scene has rendered, the following pop up appears...

Without changing any of the options, click the "model" button under 'export lighting'. Make sure you create a directory for your export as it will churn out a bunch of files. The important one is the fbx, that contains your geometry. The rest of them will be tga files, these are your lightmaps. Have a look at them, they determine which areas of your model are bright/dark and have shadows cast.

The next step is to obtain a particular script. Adam, the creator of light-up, has very generously written it for us and has made it freely available. So be sure to thank his hard work on the light-up forums!

You can get the script by clicking here.

Now, inside your Unity project folder there is a directory called 'assets', if it doesn't already exist you now need to create a folder called 'Editor' inside it. Inside that folder you need to place the 'LightUp.js' script.

Once that's done, you need to drag the folder containing your fbx file, with the lightmaps, into Unity under the 'project' tab.

Unity will freeze for a bit while it imports your new assets and assigns the lightmaps. Once that's done, drag the fbx file from under the 'project' tab to the 'hierarchy' tab.

Congratulations, your geometry is now inside Unity. You can navigate the 'scene' viewport by holding down right click and using W,A,S,D.

You'll notice something's wrong though. When you press 'play' nothing happens. That's because we haven't assigned a first person controller yet.

Now, on to the last page of the tutorial. You're nearly there, well done for coming this far!

Step 4 - Navigating your scene

This part is easy. From under the 'project' tab, you need to expand the 'standard assets' list, followed by 'prefabs'. This will reveal to you the magical 'first person controller'. Drag it into the hierarchy and delete the old camera, we don't need two.

Now, move the FPS controller into place so that it is where you want the user/player to start.

Press 'play' and walk around your scene with W,A,S,D, the mouse to look around and space to jump. Fortunately, Adam's script generated all the colliders for us. Normally you'd have to do it manually, like this; from under the 'projects' tab, open the folder containing your fbx and click it once. On the right of the screen, some import options should appear, click 'generate colliders' and click 'apply'. Don't worry about that though, you're done. Publish your work and upload it!

You can walk around my little tutorial scene by clicking here.

If you aren't prompted to install the unity 3D plugin, you can get it from here.

Congratulations and well done! There's so much more to learn but that's not what should be on your mind. Enjoy your work and become self-motivated. Experiment and learn what you can at every opportunity and you will only keep getting better and better.

Thanks for reading and I wish you all the best of luck in future endeavours!

-Andrew Marunchak