Assignment 5: Creating a Virtual World

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:
    
    1. 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.
    2. Within your world, there must be at least 2 OBJs animating in some way. 
• 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

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