Assignment 5: Exploring a High-Level Graphics Library (Medium)

Objectives:

• Review all the topics covered in this course.
  • Its a different library, so you get to make sure you understand the concepts.
• Learn to use a a high-level 3D library.
  • If you ever want to create graphics after this class, you will be wanting a high level library, not raw WebGL.
• Practice learning new skills directly from web resources (no textbook, no help video).
  • Hopefully 10 weeks of class has provided enough graphics background to make this easy.

Introduction:

You will re-create your first-person exploration application using Three.js: a high-level Javascript 3D library. Three.js  makes it much easier to create complex 3D applications, since it supports scenes, lights, shadows, materials, textures, 3D math, all things that you'd have to implement yourself if you were to use WebGL directly. Your application will be slightly more complex than the one you created so far, but with Three.js it will be considerably easier to achieve this goal.

There is an editor Links to an external site. provided by the three.js website, which is a GUI for creating 3D scenes without writing codes. You can play with this tool to learn more about the features and capabilities of three.js. However, 3D scenes created using the three.js editor without writing codes will not fulfill the requirements of this assignment.

Your application is going to be a 3D scene (a world) that must have the following:

• At least 20 3D primary shapes such as cubes, spheres, cylinder, etc. 
  • At least one of them should be textured.
  • At least one of them should be animated.
  • You used at least three different kinds.
• At least one textured 3D model (.obj file).
• At least three different light sources. Three.js has many types of light, use at least three different ones:
  • Ambient Light.
  • Directional Light
  • HemisphereLight
  • Point Light.
  • Spot Light.
  • RectArea Light
• A textured skybox.
• A camera with perspective projection.
• Orbit Controls to navigate the scene with the mouse.

Optional Features (pick 3):

Apart from these required features, you will have to add 3 more features to your application. You can choose any feature you want, but here are some ideas:

• Shadows
• Picking
• Fog
• Billboards
• Multiple Cameras
• Render to Texture

Instructions

This assignment is structured as a list of tutorials that you have to follow in order to implement specific required features of the 3D scene you are creating.

1. Create a simple Three.js scene

https://threejs.org/manual/#en/fundamentals Links to an external site.

This first tutorial will get you started with the Three.js library. It will introduce you to the fundamentals of Three.js guiding you through the creation of your first scene. This scene will have multiple animated cubes, a directional light source and a camera with perspective projection. 

2. Add textures

https://threejs.org/manual/#en/textures Links to an external site.

This next tutorial will guide you through loading and mapping textured onto a cube. It will discuss how to load the same texture onto the 6 faces of the cube as well as mapping 6 different textures, one on each face of the cube. This tutorial also discuss texture filtering: minification, magnification, mipmapping, etc. 

3. Add a custom 3D model

https://threejs.org/manual/#en/load-obj Links to an external site.

This tutorial explains how to load a custom 3D model and map textures onto it. The author provides an example using the 3D Modeling Software called Blender. You don't necessarily have to install and use Blender for this part of this assignment. We recommend that you find free 3D models online with the .obj extension. If you are comfortable modeling with Blender (or other tools), feel free to design your own models.

4. Add controls to your camera

https://threejs.org/manual/#en/cameras Links to an external site.

This tutorial goes over different types of cameras in Three.js and it explains how to use the OrbitControl class, which implements default camera movements using the mouse.

5. Add extra light sources

https://threejs.org/manual/#en/lights Links to an external site.

This tutorial goes over different types of light sources in Three.js. Select three different light sources and add them into your scene.

6. Add a skybox

https://threejs.org/manual/#en/backgrounds Links to an external site.

A skybox is just a box with the sky draw on it. We place the camera inside the box and it looks like there is a sky in the background. This tutorial explains how to implement a skybox with a cubemap: a special kind of texture that has 6 sides, the sides of a cube. 

7. Add more 3D objects to your scene

At this point you should have a scene with a few textured cubes, one textured custom 3D object, a camera with orbit controls, a couple of light sources and a skybox. Now, be creative and make an interesting (meaningful) scene by adding more 3D objects into it. Make sure you have at least 20 3D primary shapes (cubes, spheres, cylinders, etc) but don't limit yourself by this number. Also, feel free to add more 3D custom models.

8. Extras

All the previous items of this assignment were related to topics you have seen in this course. Now, it is time for exploring new concepts in Computer Graphics.  You should pick 3 new techniques in Computer Graphics and implement them into your scene. It can be any technique you are interested in learning, but here are some to get you started:

• Shadows:https://threejs.org/manual/#en/shadows Links to an external site.
• Picking:https://threejs.org/manual/#en/picking Links to an external site.
• Fog: https://threejs.org/manual/#en/fog Links to an external site.
• Billboards: https://threejs.org/manual/#en/billboards Links to an external site.
• Multiple Cameras: https://threejs.org/manual/#en/cameras Links to an external site.
• Render to Texture: https://threejs.org/manual/#en/rendertargets Links to an external site.

Resources

• Free 3D models:   
  • Poly Pizza: https://poly.pizza/ Links to an external site.
  • Free 3D: https://free3d.com/ Links to an external site.

What to Turn in

1.  Canvas Submission

Zip your entire project and submit it to Canvas under the appropriate assignment. Name your zip file "[FirstName]_[LastName]_Assignment_5.zip" (e.g. "Lucas_Ferreira_Assignment_5.zip").

Add a comment to your submission highlighting the 3 advanced topics you implemented (extras for A).

2. Live Hosted Submission

Host your assignment on your UCSC portal. This can be achieved by just putting your entire project directory into the 'public_html' folder which you can access via the UCSC Unix timeshare. Your site link is 'https://people.ucsc.edu/~ucsc_user_name/'.

WHEN SUBMITTING YOUR PROJECT ON CANVAS, PLACE YOUR SITE LINK AS A COMMENT OF THE SUBMISSION.

Read the SubmissionGuide.txt file for further explanation on how to submit your assignment.