CO3355 Advanced graphics and animation Coursework assignment 1: Phong and Gouraud shading
CO3355 Advanced graphics and animation
Coursework assignment 1 2022–2023
Introduction
Reporting constitutes a very important factor in this assessment. For each step of this coursework assignment, please ensure that you provide screenshots from multiple viewpoints, describe your modelling approach, and discuss the problems you faced and the design decisions you made. In addition, you must include an evaluation of how well the techniques you used apply to what you are trying to do, identifying advantages and disadvantages. Finally, do not forget to explain which parts of the code you submit are your own, and clearly indicate and provide citation and references for the remaining parts (for example, code taken from the subject guide or online sources).
It is important that your submitted coursework assignment is your own individual work and, for the most part, written in your own words. You must provide appropriate in-text citation for both paraphrase and quotation, with a detailed reference section at the end of your assignment (this should not be included in any word count). Copying, plagiarism and unaccredited and wholesale reproduction of material from books or from any online source is unacceptable, and will be penalised (see: How to avoid plagiarism). You may find it helpful to look at the end of some journal or conference papers to get an idea of how to list your reference material appropriately. The Harvard Referencing Guide provides a short explanatory introduction and a checklist of examples, showing how to cite and reference material from various sources.
Do not forget to explain which parts of the code you submit are your own, and clearly indicate and provide citation and references for the remaining parts (for example, code taken from the subject guide or online sources).
Readings for the coursework assignment
There are several websites where you can acquire greyscale terrain bitmaps, such as [1].
Keep in mind that WebGL uses the same GLSL specification (OpenGL ES) as Processing, so many WebGL web resources can be really useful, e.g. [2, 3]. All website references listed below were accessed October 2022:
- ‘Tangram heightmapper’ https://tangrams.github.io/heightmapper/
- Tavares, G. ‘WebGL fundamentals’ https://webglfundamentals.org
- Eck, D.J. ‘Introduction to Computer Graphics’ (2021) https://math.hws.edu/graphicsbook/
- ‘Heightmap’ in Wikipedia https://en.wikipedia.org/wiki/Heightmap
- Feinberg, J. ‘PeasyCam v302’ (2013) http://mrfeinberg.com/peasycam
- Schlegel, A. ‘controlP5 − A GUI library for processing’ (2015) www.sojamo.de/libraries/controlP5
- Lager, P. ‘G4P (GUI for Processing)’ www.lagers.org.uk/g4p
- Jenett, F. ‘Guido: ”GUI do …” another Processing GUI library’ (2014) https://github.com/fjenett/Guido
- Berg, B. ‘Interfascia: A graphical user interface library for the Processing graphics programming environment’ (2018) http://github.com/brendanberg/interfascia
- Müller, N. ‘UiBooster-for-processing: Creates fast and easy dialogs for utility tools for Processing’ (2021) https://github.com/milchreis/uibooster-forprocessing
- ‘Snow line’ in Wikipedia https://en.wikipedia.org/wiki/Snow_line
- ‘Tree line’ in Wikipedia https://en.wikipedia.org/wiki/Tree_line
- ‘Processing reference – SpotLight’. https://processing.org/reference/spotLight_.html
What to submit
• A single .pdf file. Your submission should include three sections for Parts A, B and C, with discussions of the software you have developed (see later for details). • A single .zip file which contains all source code files that you have developed for this coursework, with instructions (provided as comments in the source files, or as a separate readme file) on how to run them.
Your .pdf and .zip file must be named using the following file-naming conventions: YourName_SRN_COxxxxcw#.ext (e.g. GraceHopper_920000000_CO3355cw1.pdf) • YourName is your full name as it appears on your student record (check your student portal) • SRN is your Student Reference Number, for example 920000000 • COXXXX is the course number, for example CO3355, and • cw# is either cw1 (coursework 1) or cw2 (coursework 2).
Important: development environment
You should develop your code using the latest version of Processing, which can be found at: https://processing.org/ — this site also provides tutorials, libraries, and documentation. Please read through the coursework assignment as a whole before you start work.
PART A [Total marks available: 40]
Raster images in the form of 2D arrays are used to model terrain information in Computer Graphics. These raster images are also known as heightmaps [4].
Task 1
In heightmaps, each pixel value, represented by an element in the array, is interpreted as the amount of displacement from the floor of a surface. i. Choose an appropriate greyscale image for some terrain, load it into Processing and use its pixel values to generate a heightmap, then draw it as a Quad mesh. Comment on the results. ii. Incorporate PeasyCam [5] and gain some familiarity with its API, in order to enable camera navigation. iii. Add GUI controls to move the position of the camera through the terrain (as if it were a helicopter drone). See [6, 7, 8, 9, 10] for some options. Describe what you did and why in your report, including screenshots to illustrate what you achieved. [20 marks]
Task 2
Implement textures to display the following terrain features:
- At high altitudes above a certain height (Snow Line [11]), the terrain is covered in snow.
- Above a lower height (Tree Line [12]), it is too cold and wind-swept for trees and grass and so the terrain is basically rocky.
- Below the height of the tree line, forest and grass is possible.
Add GUI controls to adjust these height parameters. Describe what you did and why in your report, including screenshots to illustrate what you achieved. [20 marks]
PART B [Total marks available: 40]
Task 1
Now include a point light in the previous scene and extend the GUI controls to allow the light source to be moved.
Write GLSL shaders to implement Phong and Gouraud shading and make the shading/lighting method selectable by the user.
Describe what you did and why in your report. Providing multiple close-up screenshots, expose the details and highlight the differences between the two methods. Did they behave as you expected? [20 marks]
Task 2
Up to this point we have been using light originating from a single point in space and emitted in all directions, also known as a point light. A spotlight is similar to a point light, except that it only produces a cone of illumination.
Investigate online how spotlights are modelled in computer graphics and complete the following tasks:
i. Modify your Gouraud and Phong shaders to cater for spotlighting. ii. Construct a scene consisting of a single point on the terrain, illuminated from above by a fixed spotlight. iii. Make the light’s direction change over time and let the user adjust its parameters (on/off, cutoff angle, concentration exponent) via GUI controls.
In your program you may choose to use the corresponding Processing method [13]. Your report should provide an introduction summarising in 3–5 paragraphs your initial investigation on how spotlights are modelled, and then describe what you did and why, including illustrative screenshots to illustrate what you achieved. [20 marks]
PART C [Total marks available: 20]
This part requires a report only. Research online to investigate how height maps are used in practice in computer games. Your report should provide an introduction summarising your key findings in 3–5 paragraphs.
Now consider how you might adapt and extend the code you wrote for Parts A and B to a search and rescue game where the player would pilot a helicopter drone seeking survivors with a spotlight in varying light/weather/visibility conditions. In addition to considering whether Quad meshes are the best choice, or alternatives such as Hexagonal grids or Voronoi polygons might be more suitable, you may wish to discuss lighting, different viewpoints of the drone, additional geographic features such as water or any further graphical considerations that you think relevant to the game.
- Note: You are NOT being asked to implement the game, just discuss how you would approach it technically.
- The focus is on the graphical aspects of the game ONLY. Other game aspects such as AI, physics, animation, etc., are out of the scope of this coursework assignment.
Make sure that your essay starts with an introduction, tackles the points above and ends with your conclusions. You may illustrate your points with figures, diagrams, etc. Finally, do not forget to cite and reference your sources correctly (see p.1 Introduction) [20 marks] [Total: 100 marks]
