Assignment 5: Creating a Virtual World
- Due Nov 12, 2018 by 11:59pm
- Points 10
- Submitting a file upload
Objectives
Camera movement, world creation, and different visual projections (perspective and orthographic).
Description
This will be the first assignment where no base code will be provided. Instead, you should use the graphics tools you've developed so far to complete the assignment. In assignment 5, your goals are as follows:
-
World Creation
-
For this assignment, a world will be composed of two items:
- A terrain composed of cubes/rectangles. The color and height of these cubes/rectangles will be determined by a texture of your choice. The idea is that you sample a texture's color on a per-pixel basis and create a grid of cubes/rectangles on the xy-plane recreating that texture. The cubes/rectangles can be of uniform size or they can vary in size throughout your world (varying height by R, G, or B value is a good idea). Another option would be to implement a terrain map. As long as you use the data from your stored image to create your world.
- Within your world, there must be at least 2 OBJs animating in some way.
-
For this assignment, a world will be composed of two items:
-
Camera movement
- You will need to implement a camera for this assignment. Doing so will involve that you implement a view matrix and perspective matrix. These 2 matrices will be passed to your shaders for ALL geometries. More importantly, you will have to develop some code to manage your camera. A strong suggestion is that you use object oriented programming to your advantage. Develop a camera class which your scene will hold. In this camera class, manage your 2 matrices using any information necessary and any appropriate class methods.
-
You will need to reassign your mouse events from adding geometries onto your screen, to something that allows you to traverse a 3D world. We require these controls:
- Camera Movement: Assign this to keyboard WASD
- Camera Rotation: Assign this to keyboard JL or mouse movement
- Camera Zoom (change FoV): Your choice of GUI slider or the scroll wheel of a mouse
- Your camera is allowed to move freely around any portion of your world.
-
Keeping your canvas the proper size
- Your canvas will need to resize itself as your window grows and shrinks.
Resources
Readings: Matsuda/Lea Ch7
Canvas resizing: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html Links to an external site.
Image Color Sampling (You will need this to sample a texture's color): imageSample.js
Terrain/world Creation
(The below is an example. You can use other programs and define your world encoding in other ways if you want to do something different like a terrain height map or a full 3D world somehow. You just need to separate world "authoring" from "coding" and use the image files to generate the world. I encourage you to get some OBJ files and add plants and other objects to your world. e.g. You could use a certain color to mean "put a tree here". )
- Create 2 pixel maps
- One map is a height-map, where the magnitude of RGB vectors define the height of terrain blocks
- i.e. a white pixel is height sqrt(1^2 + 1^2 + 1^2) = sqrt(3)
- a black pixel has height 0
- for a height of 1, you can use sqrt(n^2 + n^2 + n^2) = 1 => 3n^2 = 1 => n = sqrt(1/3) ~= 0.58
- i.e. RGB = <0.58, 0.58, 0.58> gives a height of ~1 (in 255 scale that is ~148)
- The other map is a color map, where the color of a pixel corresponds to the actual color of the terrain block
- If you wish to use textured terrain blocks, you may define a mapping of color map RGB values to textures instead
- One map is a height-map, where the magnitude of RGB vectors define the height of terrain blocks
Generating a height map
- You can use http://piskelapp.com Links to an external site. (or another pixel art program if you choose)
- For this example I used a 16x16 grid
Example of generating color map
The resulting world
Notes:
- your world will not look as defined as the example because we haven't introduce lighting yet
- please don't copy the example terrain map exactly, the idea is to create your own
- feel free to use a larger grid than 16x16
Rubric
Criteria | Ratings | Pts |
---|---|---|
Have a terrain defined in your canvas using a texture of your choice.
threshold:
pts
|
pts
--
|
|
Have 2 OBJs animating in some way within your world.
Of course you are free to have more moving things, or to have static OBJ files for buildings, or trees, or whatever you want to put in your world.
threshold:
pts
|
pts
--
|
|
Implement camera rotation.
Using the mouse to rotate the view left/right without moving the EYE position. You will just want to adjust the AT position in the glLookAt command. You could also map this to JL keys if you have trouble figuring out the mouse.
threshold:
pts
|
pts
--
|
|
Implement camera movement.
W - move the EYE position forward;
S - move the EYE position back;
A - move the EYE position to the left (different than turning, this is actual motion of the player);
D - move the EYE position to the right;
threshold:
pts
|
pts
--
|
|
Implement camera zooming (change of Field of View).
This only applies in when using glPerspective. It wont apply when using glOrtho.
threshold:
pts
|
pts
--
|
|
Have the ability to switch between an orthographic and perspective projection.
Use either glPerspective or glOrtho. Probably these are some buttons in your HTML to switch modes
threshold:
pts
|
pts
--
|
|
Have the ability to adjust the near and far planes of your camera.
Sliders on your page to set near/far. You should be able to adjust these to see clipping occurring.
threshold:
pts
|
pts
--
|
|
Have your canvas resize when the size of your window is changed.
You will need to use the aspect ratio parameter when setting up your camera.
threshold:
pts
|
pts
--
|
|
Extra Point
threshold:
pts
|
pts
--
|