COMP330 Assignment 3
Objectives
This assignment covers the following topics:
• 3D modelling with triangular meshes
• 3D Transformations
• Perspective and Orthogonal cameras
• Illumination and shading
o Flat shading
o Smoothshading
• Texturing
• Transparency
• Screen-space Effects
Your task is to build a simple 3D world using height-mapped terrain, and implement a player that moves around in the world, controlled using the arrow or WASD keys. You then have the option of improving this world by implementing a variety of features.
Framework
A basic framework for the assignment is available via GitHub classroom:
https://classroom.github.com/a/qpKm8fZc
This includes:
• code for loading level files from JSON in main.js
• code for loading textures from PNGs in texture.js
• the glMatrix library for 3D vectors and matrices
• a selection of free textures from OpenGameArt
Level files
The assignment framework includes a class that loads a level definition from a JSON file. This file includes the following data:
level.json – an example level
{
“heightmap”: {
“width”: 10,
“depth”: 10,
“height”: [
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 0,
0, 0, 0, 0, 1, 1, 0, 0, 0, 0,
0, 0, 0, 1, 2, 2, 1, 0, 0, 0,
0, 0, 0, 1, 2, 3, 2, 1, 0, 0,
] }
0, 0, 0, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
“player”: {
“position”: [1,1],
“heading”: [1,0]
}
“trees”: [
3, 5,
5.5, 8.2 ]
}
This defines height map, consisting of a 10×10 grid of points with different heights, and a player at position (1,1) on the map, initially facing in the X direction (1,0). There are trees at positions (3,5) and (5,8).
A simple framework has been provided to read these files into Javascript objects. Your assignment should support this basic level format. You can extend the file format to include other features you include in your world (e.g. other objects in the world, positionable lights, etc).
You should provide a set of level files with your assignment submission which show off the different features of your game. Only one level is necessary, but if you have different modes (e.g. day and night time) you may want to provide different levels to demonstrate each.
Game features
Your mark will be based on the features you implement, from the list below. Each feature has a mark value attached. Completing more than 100% worth of features will not earn additional marks.
Terrain
Height map modelling: 20%
Use the height-map data provided to generate a 3D mesh. The mesh should consist of width by depth points (for the values specified in the level file) spaced in a grid in the x/z axes. The y-coordinate of each point is given by the corresponding value in the height array. These points should be joined into a mesh of triangles. So, a 20 by 20 height map will have 19×19 squares each represented with two triangles, as shown below.
Trees: 5%
Create a simple 3D model of a ‘tree’ (or any other object you like: a rock, a streetlamp, a TARDIS, a beachball, …). Place instances of this object sitting on the terrain at the coordinates given in the JSON file. (Note that these coordinates are not necessarily integers.)
Texturing: 10%
An appropriate seamless ground texture should be applied to the terrain. One example texture has been provided in the framework.
Note: Use of third-party images is allowed provided that you have a license to use them (e.g. they are under Creative Commons). Cite all third-part assets used at the end of your design report. Use of unlicensed images is academic misconduct and will be treated accordingly.
Multi-texturing: 5%
Multiple textures (e.g. grass and rock) are used across different parts of the terrain (at your discretion), with appropriate blending where they meet.
Player movement
There are two possible modes for movement, simple keyboard controls or complex keyboard + mouse controls. Only one of the two modes should be implemented.
Player movement (simple): 10%
The player should be able to move through the world using WSAD or the arrow keys:
Key
Movement
W or Up
Move forward in direction currently facing
S or Down
Move backwards
A or Left
Rotate left
D or Right
Rotate right
The player should always be positioned at the same height as the terrain below them. This will require interpolating the height of a point in the middle of a height map cell from the neighbouring vertices. The player should not be allowed to move outside the bounds of the terrain.
Player movement (complex): 15%
As an extension to the simple player movement, implement mouse look and strafing. The players heading rotates when the mouse is left and right. Moving the mouse up/down tilts the camera up and down.
Key
Movement
W or Up
Move forward in direction currently facing
S or Down
Move backwards
A or Left
Move left (strafing)
D or Right
Move right (strafing)
Mouse left
Rotate left
Mouse right
Rotate right
Mouse up
Look up (rotate camera)
Mouse down
Look down (rotate camera)
Camera
There are two camera modes, first person perspective or third-person orthographic. You can implement either or both for extra marks. If you implement both modes, use the “C” key to switch camera modes.
An optional feature, in either mode, is to use the mouse-wheel to zoom the camera in/out.
First person perspective camera: 10%
In this mode, the camera is a first-person perspective camera, from the player’s point of view. The camera should be positioned at the player’s current position (at an appropriate height above the ground), facing along their current heading (tilted up or down if complex player movement is implemented). The camera should implement the perspective projection, with an appropriate field of view.
Note: This mode does not require a player avatar mesh model, as the player cannot see themselves.
Third person orthographic camera: 10%
In this mode, the camera is a third-person orthographic camera, from a point of view above and behind the player, looking down on it. The camera should follow a fixed distance above and behind the player. The camera should implement the orthographic projection, with an appropriate field of view.
Note: This mode requires a player avatar mesh model, as the player can see themselves. A simple 3D shape (cube, cylinder) is sufficient.
Camera zoom: 5% per camera mode.
Using the scroll-wheel on the mouse, allow the player to zoom the camera in/out.
Lights
Multiple lighting modes are possible. If you have more than one lighting mode, you should implement some way to switch between them (either a key control, or by using multiple level files)
Directional light 5%
The world is lit using a single directional light (e.g. the Sun). Surfaces use an appropriate diffuse flat-shaded lighting implementation.
Point light on player 5%
The world is lit using a point light connected to the player. Surfaces use an appropriate diffuse flat-shaded lighting implementation.
Smooth shading 10%
Either of the lighting modes above, but using smooth shading, by interpolating normals from neighbouring vertices.
Effects
These options are recommended only as a challenge if you find the other aspects of the assignment easy.
Screen-space effects 5%
Your choice of screen-space effects, such as:
• Bloom
• Ambient occlusion
• Motion blur
• Fog
• Film grain
Transparency 5%
Add transparent objects you your scene and use alpha-blending to render them appropriately.
Report
The assignment framework includes a report template. Complete the table at the front of the report indicating which of the components above you are attempting. For each
component, give an indication of where in the project it is implemented. Failure to submit a complete report carries a 20% penalty.
Marking Rubric
Total mark = 40% for components implemented, 30% for code correctness, 20% for clarity of code and 10% for creativity.
Each component that you implement will be marked for completeness of the implementation against the specification. The overall program will be marked for correctness, clarity and creativity according to the following rubric.
Grade
Correctness
Clarity
Creativity
HD (100)
Code is free from any apparent errors.
Good consistent style. Well structured & commented code.
Original use of graphics to achieve effects not included in lectures or pracs.
HD (90)
Code has minor errors which do not significantly affect performance
Minor inconsistencies in style, or patches of undocumented code.
D(80)
Code has one or two minor errors that affect performance
Code is mostly readable but could be better structured
Creative use of graphics effects from lectures/pracs to add distinctiveness to submission
Cr(70)
Code has multiple significant errors
Code is inconsistently structured, but readable
P(60)
Code is functional but contains major flaws
Code is poorly structured and patchily documented
Basic effort put into colour palette and shapes to give the simulations a consistent style
F (< 50)
Code is not functional
Code is undocumented and largely unreadable
Implements required features without effort put into style