1LECTURE COURSEWORK
COMP4097 – Part I Coursework
Advanced Computer Graphics
Frederick Li
3D Durham
Marketplace
Create a virtual 3D Durham Marketplace – comprises both indoor
and outdoor scenes.
Allow a user to navigate with a good visual quality and rendering
performance supported.
3
To start …
Based on what you have learned
from the module:
• Visual quality control
• multi-resolution modeling
• parametric curves and surfaces
• skeletal animation
Graphics library:
• Three.js (based on WebGL)
4
Important!!
• Read the instructions before
you start
5
Levels of
Achievement
6
Report and Video
•Report
• Probably 1-page is enough. Justify how you meet the
marking criteria (2-6), i.e., explain what techniques you
have implemented to match each criteria. (Limited to 50
words each)
•1-Minute Video
• Show off the representative features of your
implementation
• Most easy way is to capture your video by Zoom, or
if you use Windows, use +Alt+G
7
Time Management
5 credits only ~ contribute half of COMP4097
Make your own plan – balance workload among
modules
Marking criteria gives you
flexibility and assists your
time management plan:
You can make a balance of
putting effort in developing
your own implementation and
using external resources
8
Caution: Plagiarism / Collusion
• University Regulations:
https://durhamuniversity.sharepoint.com/teams/LTH/SitePages/6.2.4.aspx
• Plagiarism:
• Submit work done by others, i.e., direct use of contents (texts, tables, figures), codings
• even with minor changes, e.g., change tenses / ordering, replace with similar wordings or
variables / function names, etc.
• Collusion:
• Develop a submission together with others in an unauthorised way
• Impersonation, cheating, use of inadmissible material
• Consequence: Mark of zero awarded; refer to Senate Disciplinary Committee
9
10
Counter
Example
Sketchfab
https://sketchfab.com/
Will the use of external resources or assets
be counted as plagiarism or collusion?
• The university rule is clear
(https://durhamuniversity.sharepoint.com/teams/LTH/SitePages/6.2.4.aspx).
To put it simple, you cannot submit something (even part of your work),
which is not done by yourself, but claiming it as your own work for marking.
• However, due to the nature of this coursework, which you are allowed to use
external resources or assets to assist your coursework implementation, I
have designed a marking criteria to balance between such a need and the
university rule of plagiarism and collusion. Remember, if you aimed at
achieving a high score, you should make a significant amount of your own
contributions in your work.
11
Three.js
•A high-level graphics library builds on top of WebGL
• URL: https://threejs.org/
•You do not need to spend time on constructing
VBOs, IBOs and writing individual vertex
coordinates to model an object.
• e.g., You can create an object with a single line of code
• Lots of online examples, assets and online tutorials
• https://threejs.org/examples/
• https://sketchfab.com/
• https://www.youtube.com/playlist?list=PLRL3Z3lpLmH0a
qLDbfh0ZmnDkpXPDnTau
12
Three.js – Simple Example
13
Three.js – Lighting example
14
Three.js – LoD Modeling
•https://threejs.org/docs/#api/en/objects/LOD
15
Three.js – Skeletal Animation
• https://threejs.org/docs/#api/en/objects/Skeleton
• https://threejs.org/docs/#api/en/objects/SkinnedMesh
16
Three.js – Parametric Curves and Surfaces
• https://threejs.org/docs/#api/en/extras/curves/CubicBezierCurve
• https://threejs.org/docs/#api/en/extras/curves/SplineCurve
• https://threejs.org/examples/#webgl_geometry_nurbs
• https://github.com/mrdoob/three.js/blob/master/examples/webgl_geo
metry_nurbs.html
17
Downloadable Models (from Sketchfab)
18
Another Example of Downloadable Model
19
https://sketchfab.com/3d-models/medieval-fantasy-book-
06d5a80a04fc4c5ab552759e9a97d91a
Showcases
• Let’s have a look of the
coursework produced by
students of last year.
• Enjoy!!
Formative Assignment
and Discussion Lesson
• Encourage you to prepare your
coursework earlier
• Allow you to obtain feedback
before submission
• What to do?
• Initial design of how you
incorporate ACG methods into
your coursework
• If possible, have an initial
implementation of a basic
virtual environment by adding
a few existing models from
https://sketchfab.com/