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.
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!).
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
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).
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.
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.
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.
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.
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).
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
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.
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%)
First-person controller (10%)
More than one object (10%)
Physical behavior (RigidBody) in at least one object (10%)
Materials (other than the default) (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.
Do the following to hand the project in:
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.
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).
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