Game Engines and Graphics –
Assignment 2 Part A
3D Environments
Draft
2
1 Overview....................................................................................................................................3
2 Part A – OpenGL Scene Renderer Introduction..........................................................3
2.1 Overview of Starting Code.........................................................................................3
2.1.1 Packaging................................................................................................................3
2.1.2 Classes you will modify.....................................................................................4
2.1.3 Shaders....................................................................................................................4
2.2 Starting your implementation .................................................................................4
2.2.1 An Empty Window..............................................................................................4
2.2.2 A Red Triangle ......................................................................................................5
2.2.3 Vertex Colours ......................................................................................................5
2.2.4 View Transformation.........................................................................................6
2.2.5 Implement Box .....................................................................................................7
2.2.6 Model Transformation ......................................................................................7
2.2.7 Point Lighting........................................................................................................8
2.2.8 Textures ..................................................................................................................9
2.2.9 Keyboard Interaction...................................................................................... 10
2.3 Extensions..................................................................................................................... 10
2.3.1 Additional Shapes............................................................................................. 10
2.3.2 Multiple Lights................................................................................................... 10
2.3.3 Shadows............................................................................................................... 11
2.3.4 3D Models............................................................................................................ 11
2.3.5 Anti-aliasing ....................................................................................................... 11
2.3.6 Create a custom scene .................................................................................... 11
3.1 Marking Scheme – Base Assignment (up to 100 marks max).................. 12
3.2 Submission ................................................................................................................... 13
3.3 DUE DATE:.................................................................................................................... 14
3.4 JOGL Instructions....................................................................................................... 15
3
1 Overview
This assignment has 2 major deliverables Part A – OpenGL Scene Renderer and
Part B – Unity Environment. You should complete and submit part A before you
begin part B.
Assignment 2 overall is worth 50% towards your grade and has two subassessment items:
Part A – OpenGL Scene Renderer (50%)
Part B – Unity Environment (50%)
2 Part A – OpenGL Scene Renderer Introduction
In this assignment you will implement a scene viewer in OpenGL. The
assignment is structured to gradually introduce more advanced OpenGL
concepts, beginning with a simple triangle. Each step introduces a new aspect of
OpenGL.
For best results complete the steps in the order given.
2.1 Overview of Starting Code
The assignment includes many Java classes. Some of these you will need to
modify when you implement the assignment, and others do things for you.
2.1.1 Packaging
The starting code is structured into Java packages to make it easier to keep
things organised. Four packages are provided:
inft3032.assign This package contains the main Assignment class,
which starts the program. It also contains the
AssignGLListener that you will implement to build
your application.
inft3032.drawables This package contains classes that can be rendered on
screen. You will need to modify many of these classes
to have them render on screen.
inft3032.lighting This package contains classes for different lights. You
will need to use these classes to implement lighting in
your scene viewer.
inft3032.math This package contains the math classes that you will
need to use when performing mathematical
operations.
inft3032.scene This package contains the scene loader and scene
specific classes that are not drawables. You will need
4
to use Scene to decide what to render, and Camera to
calculate the view and projection matrices.
2.1.2 Classes you will modify
• AssignGLListener
• Box
• Cone
• Cylinder
• Geometry
• Sphere
• Texture
• Triangle
2.1.3 Shaders
You will also need to write several GLSL shaders. Empty, correctly named,
shader files can be found in the shaders directory.
2.2 Starting your implementation
A set of suggested steps is provided below to walk you through the assignment.
There are a number of optional features you may attempt once the basic
rendering is working. Please refer to the marking sheet below to help you decide
which are optimal for your final grade.
2.2.1 An Empty Window
At the end of this step you will have a black window on screen. This may not
sound like much but you’ll have a lot of the groundwork taken care of. Do the
following:
1. Get the starting code into your IDE of choice and make sure everything
compiles
2. Modify AssignEventListener’s init method:
a. Set the clear colour to black
b. Enable back-face culling
3. Modify AssignEventListener’s display method:
a. Clear the depth and color buffers
2.2.1.1 Result:
5
2.2.2 A Red Triangle
1. Implement the Triangle class:
a. The init method should load the positions of the vertices to
OpenGL
b. The display method should render the triangle
2. Create a vertex shader named SimpleShader.vert. This shader should
read in the vertex position and pass this through to the next stage.
3. Create a fragment shader named SimpleShader.frag that sets the colour
of the fragment to red (1.0,0.0,0.0,1.0)
4. Load and use your shader to render the scene SimpleTriangle.scene
2.2.2.1 Result:
2.2.3 Vertex Colours
A red triangle is great, but other colours are better. The vertices of the Triangle
class have colours associated with them. In this step we’ll make use of them.
1. Modify your triangle class by adding a vertex attribute for the colour
2. Create new vertex and fragment shaders, named VertexColour.vert and
VertexColour.frag to use these colours.
3. Load and use this shader to render the scene ColouredTriangle.scene
2.2.3.1 Result:
6
2.2.4 View Transformation
At this step we will implement projection and view transformation and start
seeing the 3D world.
1. Create projection and view matrices from the Camera class loaded in the
scene.
2. Create a new vertex shader Transform.vert which transforms the
incoming vertex using the projection and view matrices.
3. Send the projection and view matrices to the shader as uniform variables.
4. Render the scene PerspectiveTest.scene using the Transform.vert vertex
shader and VertexColour.frag fragment shader.
5. Implement reshape in your listener to correctly reset the projection
matrix when the window is resized.
2.2.4.1 Result:
7
2.2.5 Implement Box
Triangles are fun, but let’s make something a bit more complex. In this step you’ll
need to implement the Box class. Boxes are defined with a width, height, and
depth, and are positioned centred at the origin (0,0,0).
1. Implement Box’s init method:
a. Send the vertex data for all faces of the box to OpenGL. Include:
position, vertex normal, and vertex colour. Note that Box has a
single colour stored in its Material property, so you will need to
duplicate this for all vertices
2. Implement Box’s display method to render the box on screen.
3. Render the scene SimpleBox.scene to test your code.
2.2.5.1 Result:
2.2.6 Model Transformation
Building on the previous step, we will now introduce model transformations
using the “BoxWorld” scene. We can now render objects at different locations in
the scene.
1. Modify the display method of Triangle and Box:
a. Pass the object’s transform matrix to your shader as a uniform
variable
b. Modify Transform.vert to make use of the model transformation
2.2.6.1 Result:
8
2.2.7 Point Lighting
The previous stages have used the vertex colours directly. In the following steps
we will implement lighting and shading to give objects a more lifelike
appearance. Use the “BoxWorldToon” and “BoxWorldDiffuse” scenes and the
shaders listed below.
1. Send all material properties to the shader as uniform variables
2. Using the first light in the scene, send all Point Light properties to the
shader as uniform variables
3. Implement Ambient Shading (in both “TransformToon.frag” and
“TransformDiffuse.frag”)
4. Implement Toon Shading (in “TransformToon.frag”)
5. Implement Diffuse and Specular shading (in “TransformDiffuse.frag”)
2.2.7.1 Ambient Lighting Result: (look closely)
Implement ambient shading in both the “TransformToon.frag” and
“TransformDiffuse.frag”. These shaders are used by the “BoxWorldToon” and
“BoxWorldDiffuse” scenes respectively.
2.2.7.2 Ambient, Toon:
Implement toon shading in the “TransformToon.frag” shader to show different
intensities from 4 fixed viewing angles. Below is the output image when using
the scene file “BoxWorldToon”, please use this as a reference to check your
output. You will need to look at the intensity value to determine which colour
should be applied to the scene. Use the table below lookup table to identify the
intensity and the suitable colour modifier.
Intensity Color Multiplier
>.95 (1.0, 1.0, 1.0, 1.0)
>.75 (0.8, 0.8, 0.8, 1.0)
>.5 (0.6, 0.6, 0.6, 1.0)
>.25 (0.4, 0.4, 0.4, 1.0)
All other intensities (0.2, 0.2, 0.2, 1.0)
9
Note: fragColor = baseColor * multiplier;
2.2.7.3 Ambient, Diffuse
Implement diffuse and specular shading in the “TransformDiffuse.frag” shader to
show different intensities from 4 fixed viewing angles. Below is the output image
when using the scene file “BoxWorldDiffuse”
2.2.8 Textures
Implement texturing using the “TransformTexture.frag” shader, allowing images
to be mapped to the surfaces of objects. The scene loader provided will
automatically load BMP images into a Texture object. You will need to implement
Texture’s init method to send the image data to OpenGL, and use the texture
images instead of the diffuse property of the material in your shader. You will
also need to make sure your drawable shapes have texture coordinates.
There is a test scene called TexturedBox.scene that will generate an image as
below:
10
2.2.9 Keyboard Interaction
This step involves modifying your application to allow some real-time
interaction. You should first implement a keyboard control loop that captures
keypresses and register a set of key to demonstrate they are working with a
debug output line. i.e.:
a – you have pressed the a key.
b – you have pressed the b key.
…
Next you should connect they keypress events to provide interaction with the
scene:
1) Moving the camera allowing flying through the scene. This could use
WASD keys allowing you to move forward, backwards, turn left and turn
right. You can also add additional keys as you like.
For all your keyboard interactions, you should provide clear instructions in your
self assessment as to how these interactions operate.
2.3 Extensions
Each of the following features attract additional marks. Marks will be awarded
up to a maximum of 100%.
If you have another idea for an extension please post on the discussion board
and we’ll figure out the marks.
2.3.1 Additional Shapes
So far you have implemented Box and Triangle. This is a great start, but there
other shapes. Implement the init and draw methods for the other drawable
shapes to procedurally generate geometry and render the shapes on screen.
2.3.2 Multiple Lights
Adapt the lighting techniques you have already implemented to apply multiple
lights. You will need an array of lights in your fragment shader, and need to pass
11
all the lighting info from your program. You will also need to loop through each
light, combining the contributions to get the final fragment colour.
2.3.3 Shadows
Implement shadows using the depth buffer technique. This is a multipass
rendering technique that requires rendering to a texture.
2.3.4 3D Models
The starting code contains a loader for reading OBJ models from files. Implement
the init and display methods in Geometry to render 3D models in OpenGL.
2.3.5 Anti-aliasing
Implement anti-aliasing in your image, either as a post-processing step or by
modifying the GL capabilities.
2.3.6 Mouse Interaction
Implement a click and drag feature for the rotation of the camera.
2.3.7 Create a custom scene
Create you own scene file that is suitably impressive – be createive and use as
many features as possible!
12
3.1 Marking Scheme – Base Assignment (up to 100 marks max)
Step 1 – An Empty Window Max Mark
Code submitted compiles without errors 4
Correctly set the clear colour 2
Correctly enable back-face culling 2
Correctly clear the depth and colour buffers 2
Step 2 – A Red Triangle
Correctly pass vertex positions to OpenGL 5
Correctly issue draw commands in Triangle 2
Implement SimpleShader.vert to pass positions through 2
Implement SimpleShader.frag to set fragment colours red 3
Step 3 – Vertex Colours
Correctly pass vertex colours of the Triangle to OpenGL 3
Correctly read colours in VertexColour.vert and pass to
fragment shader
5
Correctly use vertex colours in fragment shader 4
Step 4 – Implement Box
Correctly pass vertex positions, normals, and colour to
OpenGL
4
Correctly issue draw commands for Box 3
Step 5 –View Transformation
Generate projection matrix from scene 2
Generate view matrix from scene 2
Correctly pass matrices to shader as uniform variables 2
Correctly transform vertex positions using matrix 3
Correctly implement reshape to recalculate the projection 2
Step 6 – Model Transformation
Pass transform data to shader as uniform variable 1
Correctly transform vertex position using matrix 2
Keyboard Interactions
Capture keyboard interactions 2
Camera control 4
Toon Shading
Calculate intensity based on angle 4
Apply intensity to scene with defined colour modifiers 4
Textures
Load texture and display Textured Cube 4
Basic Lighting
Pass ambient lighting from scene and use in fragment shader 2
Pass point light data to fragment shader as uniform variables 4
Implement diffuse phong shading in fragment shader 3
SELF ASSESSMENT
CONPULSORY – Provide a self assessment (complete this
table and provide as an additional word file)
5
13
We have discussed each of the following concepts at a high level in class.
However it is expected you will employ the textbook and online materials to
complete these steps.
Specular Lighting Max Mark
Add specular lighting to point light 5
Multiple Lights Max Mark
Implement spotlight 2
Correctly pass lighting data for all lights to shader 5
Iterate over lights in fragment shader to shade objects 5
Shadow Mapping
Generate shadow maps by rendering to a Framebuffer object 5
Use shadow map during rendering to create shadows 5
3D Models
Implement init and display in Geometry to render 3D models 10
Use materials specified in Geometry in shader 5
Anti-aliasing
Implement anti-aliasing 3
Texturing
Implement Texture’s init method 5
Use texture images for material diffuse colour 5
Specify texture coordinates for box 2
Specify texture coordinates for triangle 2
Specify texture coordinates for other shapes (1 per shape) 4
Additional Shapes
Implement Cone 4
Implement Cylinder 4
Implement Sphere 4
Mouse Interaction
Click and Drag 2
Scene
Create your own custom scene file 4
3.2 Submission
Submit your assignment using the Assignment 2 Part A Submission link on the
course website. Please submit as a single zip containing:
• All Java files
• All shader files
• Any additional scene files you create, and any resources (images) needed
• A readme.txt file documenting any extensions you have implemented
• Eclipse Project files using same directory structure and packages as
provided in the starting code
• Self Assessment - Complete a copy of the assessment by filling in your
predicted grades for ALL sections in the “Base Assessment” and “Extensions”
14
3.3 DUE DATE:
First Wednesday back after the study break!
15
3.4 JOGL Instructions
See online video for assistance getting JOGL setup with Eclipse.