User Tools

Site Tools


T-114-VERK --- Verk18: Virtual Environments


The goal of this project is to simply get acquainted with a powerful tool for creating interactive virtual environments. The tool you will use is called Unity 3D, and while it is labeled a Game Engine, it is used for making a lot more than games. Essentially, you can use the engine to represent some version of reality or fantasy, which can be interacted with through a mobile phone, web browser or fully immersive virtual reality gear. The best way to learn is through exploration and trying to build something. There are a few things that you should learn first - listed in the steps below - but otherwise, you are free to make whatever you like. Sort of like playing in a sand box.

You will not be required to use the scripting functionality of Unity 3D in this project, so the focus will be on laying out the scene and allowing the user to explore it on foot. Simple interactivity can be achieved with the use of physical objects that for example respond to being pushed.


You should already have installed Unity 3D on your own machine before you start. If not, you get the latest version from the Unity 3D download page. Make sure to check the “Web GL Build Option” when you install. If you forgot to do that the first time, run the Unity installer again, un-check those things you already installed, and just pick the “Web GL Build Option”, it should then get added to your current installation.


  1. The Unity Interface The first thing to get familiar with is Unity's user interface. You can look up the purpose of each element on the screen in Unity's "Learning the Interface" documentation or by wathcing their "Interface Overview" learning video (use headphones for watching videos! ;-) )
  2. Make a Ground When you start a new project, the only GameObjects you have are the MainCamera, giving you a point of view into the environment you are constructing, and the DirectionalLight, which illuminates all objects from a particular direction (the position of the light source does not matter, only its orientation). Now add a third object, which will serve as your ground. From the main menu select GameObject→3D Object→Plane, this will add a large flat object to the scene. If you now select your Main Camera object from the Hierarchy panel, you may see from the little Camera Preview pop-up window that this ground is too far away or not even visible due to the relative position of these two objects. You can place objects precisely in the world by adjusting the Position property of the object in the Inspector pane. From Hierarchy select Main Camera and then in the Inspector give the camera the position (0,1,-3) in the Transform component. Now select the Plane and give it the position (0,0,0) and a scale of (10,1,10). You should now be able to see the ground in the camera preview. Press the Play (in the play control panel above the scene) button to confirm that when you run your environment you will see the ground below you and the sky behind it. Press the Play button again to stop running the scene (there is no stop button!).
  3. The 3D Scene Interface While you are developing it is very important to be able to navigate the 3D scene you are constructing and to be able to adjust the properties of objects (e.g. position) from within the scene itself. Make sure the Scene tab is selected (and not the Game tab). The quickest way to start navigating the scene is to press and hold the right mouse button and then use the familiar game control buttons W, A, S, D to move. But understand that you are simply moving the point of view of the developer in the world and not changing what the user sees when they enter the world - they will always be bound to a particular camera. Get familiar with this 3D navigation and how you can interactively manipulate game objects by reading Unity's "Scene View" documentation
  4. Add Lights and Objects Select GameObject→3D Object→Cube and place the cube so that you can see it from the camera when you play the scene. Then select the Directional Light object you already have in the Hierarchy panel, and play with its orientation to see how that changes the way things look. To see the changes to lighting in the Scene tab itself, you can press the little Sun icon in the bar above the scene view. You can switch between position (straight-arrows in a cross) and orientation (two round arrows) manipulation of objects in the tool-bar right above the Hierarchy panel. Bring in more objects, both lights and geometry, and experiment with their placement (manipulating them in the scene view) and properties (through the Inspector panel).
  5. Examine Shadows Select your Directional light and change the Shadow Type property to Hard Shadows or No Shadows. Feel free to play with other settings and choose something you are pleased with.
  6. Enable Walking Select Assets→Import Package→Characters and press Import when the package browser window opens. From the Project panel, select the Assets→StandardAssets→Characters→FirstPersonCharacters→Prefabs and you should see that it contains two “pre fabricated” (Prefabs) character controllers. Drag the FPSController onto your plane in the Scene view (it will get added in that location and also appear in the Hierarchy view. You then have to position this object such that it is standing on top of your ground and facing your other objects. When you press Play you can now walk around your environment in first person. It is now ok to delete the Main Camera object from your Hierarchy view, as the character controller already contains a camera.
  7. Add Physics You can easily add physical behavior, such as obeying the laws of gravity, to any object. Select an object in the Hierarchy and press the Add Component button in the Inspector view. From the menu that appears, select Physics→RigidBody.
  8. Add Materials Import the Prototyping asset package. In the Projects view, click on the little filter icon immediately to the right of the search field. Select Materials. You should now see only materials on the right-hand side of the Project view. Find NavyGrid and drag it onto your plane in the Scene view. To adjust the scale of the texture, make sure the plane is selected, expand the NavyGrid material in the Inspector panel and change the tiling parameters under Main Maps.
  9. Add Audio You can add the emission of audio as a behavior to any object. Select the emitting object in the Hierarchy view and press the Add Component button in the Inspector view. From the menu select Audio→Audio Source. Find audio clips in your Project View and drag them into the Audio Clip property of the Audio Source component you have just added. Bringing audio clips into your project from other places on your hard-drive is a simple matter of dragging them from your disk browser into the Project view (they will then get imported into the project).
  10. Play with Camera Effects Import the Effects asset package. Press the little arrow next to the FPSController object in the Hierarchy to reveal the FirstPersonCharacter sub-object. Select it. Use the Add Component button in the Inspector view to add a new Image Effect below the Camera.
  11. Register in the Unity Asset Store For additional assets, including more models and materials, you can browse the Unity Asset store by selecting from the main menu Window→Asset Store. You will have to register there to actually download assets, but it is definitely worth it. After they are downloaded, you can press an Import button right there in the Asset Store to add the assets to your Project panel.
  12. Go wild Make any kind of environment you wish (if you are dying to add scripted interactivity, feel free to use other labs from T-723-VIEN, for example Lab 2: Collect Them All - Picking Up "Home Made" Objects).
  13. Building your Project When you are done, you can build your project as an independent application that others can run. Select File→Build Settings... Press the Add Open Scenes button to add your current scene to the list of built scenes (it may ask you to save the scene first, so go ahead and give it a name). Choose WebGL as your target platform in the Platform list and press Build and Run (NOTE: if you don't see the WebGL option, it probably was not installed. You then need to save your work, quit Unity, and find your Unity installer, run it again, de-select the modules you have already installed and only select WebGL, and install). Pick a folder (I suggest you create a new folder, e.g. called “Builds”) and press Select Folder. You will end up with a few files and folders in your build folder (index.html, Release and TemplateData), which you could potentially place on a web server to have people access your world over the web. If you pressed **Build and Run*, Unity will start a small local web server and present you with a preview of this web build in your default web browser, but you can also open your “index.html” file directly to have the world load up in a browser of your choice (though Chrome by default restricts loading scripts from file:). To learn more about building for WebGL, check out the Getting started with WebGL development page in the Unity documentation (this page also explains how to deal with Chrome if you want to load local files).


The grading will be in two parts, first part will simply check to see if you have successfully made use of the basics presented above. Here is a check-list of things that need to work and be included:

  • Light sources (10%)
  • Shadows (10%)
  • First-person controller (10%)
  • More than one object (10%)
  • Physical behavior (RigidBody) in at least one object (10%)
  • Materials (other than the default) (10%)
  • Audio (10%)
  • (Camera effects are optional as they may not be supported fully or be too heavy on your machine)
  • Working WebGL build and a “readme.txt” file (see below) (10%)

If all of these things are in working order, then you will start with a grade of 8 (80%). You can then receive from 0% to 20% in additional points for the creative part of the project (25% on very rare occasions). For example, if you make something fun, enjoyable, thought provoking, surprising, hilarious, beautiful or scary, you have managed to go beyond simple geometry and started to shape an experience. The magnitude and quality of that experience will contribute to the creative points.

Handing In

Do the following to hand the project in:

  1. Create a “readme.txt” file that contains (1) A short description and instructions for your environment and (2) Credits for assets you have used (e.g. “Uses standard Unity assets” or “Standard Unity assets. Song X from artist Y. Asset Z by U from the Asset Store.”). If you made original content (e.g. your own audio recording, models or textures), mention that in your text as well. Place the file in your WebGL build folder.
  2. Zip up your WebGL build folder (should include “index.html”, “readme.txt”, the “Release” and the “TemplateData” sub-folders) and submit to MySchool (see the note below about size).
  3. Remember to pick your team mate(s)
If your ZIP file exceeds 100 MB, you should try to reduce its size before submitting. Take a look at the “Distribution size” section of the Building and Running a WebGL Project documentation. If you cannot reduce the size below 100 MB, please put the ZIP file somewhere on the cloud where it can be downloaded from (e.g. DropBox) and submit the URL
/var/www/ailab/WWW/wiki/data/pages/public/t-verk-16-3/velab.txt · Last modified: 2016/10/19 11:59 by hannes