CM 20219 – Coursework Part 2 – 201 7
View ing and analysing 3D M odels using Web GL
Dr.. Christian Richardt
1.. Introduction
In this coursework , you will impl ement software to render and manipulate a 3D model using WebGL.. This assignment is worth 20 % of the total marks for the unit .
2.. Deliverables and assessment
You will write softw are using JavaScript and WebGL . You will be given a skeleton Web GL application based on
Three..jjs
( a widely – used JavaScript graphics API)) to start with,, and should attempt to implement each feature described in the requirements table given later in this document..
This part of the coursework has two deliverables..
The first is a demonstration given in the lab.. You must turn up and talk us through each of the features you have implemented.. You will be marked against several categories,, most of which will be based on results alone.. Your code will also be checked to ensure you are obeying good practices.. You should structure the presentation well and be efficient with time – the marker will have many students to see!!
For the second deliverable,, you will submit a report documenting the entire coursework (nnot the M ATLAB part)) . It is important that you thoroughly describe the mathematics that you have used,, and how you implemented this using JavaScript and Three..jjs (iincluding how you overcame any difficulties)).. Code will also be checked and must be submitted..
• The report should demonstrate your understanding of the concepts and show how you impleme nted key elements (wwith short,, relevant sections of source code included in the flow of the text)).. Your report should include some evidence of testing,, including screenshots and numerical results where appropriate.. It is important to highlight the capabili ties and limitations of your software,, and clearly describe how you could improve it if you had additional ti me.. The page limit is 8 pages..
• Source code should be easily readable by a programmer.. This means appropriate use of variable names and comments..
Pl ease organise your report by r equirement number using the table given later in this document .
You must submit your source code and an electronic copy of the report (PPDF)) via Moodle..
Please note the deadlines for the deliverables for this part of the coursework::
1.. Live Demo (550%%)):: week of 1 1 – 1 5 December 201 7 during your regular lab slot
2.. Report (550%%)):: Fri day 1 5 Dec ember 2017 , 20 :000 via Moodle (rreport + code))
3 . Getting s tarted
You will write this part of the coursework in JavaScript , using Three..jjs whic h wraps WebGL . All computers in the university should be able to run WebGL in Edge,, Chrome or Firefox . WebGL should also work on your own computer and even phone or tablet . T he tutors will be able to assist you with getting started , as well as answering qu e stions about JavaScript,, Three..jjs and graphics concepts..
You can download a skeleton framework from Moodle,, which is set up to show you a minimal example to get started straight away . You can use any text editor you like for editing files,, although it might be convenient to use Visual Studio as it provides syntax highlighting and other helpful development tools.. After saving your files,, refresh the browser tab to update it..
To get started,, look through the code in “ WebGL Coursework.. html ” and make sure you understand how Three..jjs is initialised , and how the “ animate ” and “ handleResize ” c allback functions are registered and implemented.. Then you should look at how the scene is being dr awn,, to start working on your requirements.. The following short presentation is also a good introduction to Three..jjs (bby Eric Haines))::
http::////wwww..rrealtimerendering..ccom//bbasics3js//##11
.
You can find the full Three..jjs documentation at::
https::////tthreejs..oorg//ddocs//iindex..hhtml##mmanual//iintroduction//CCreating – a – scene
As soon as you want to load images for textures or meshes from the local drive,, you will see that the security settings of internet browsers will block it . Three..jjs has a page on how to run things locally::
https :////tthreejs..oorg//ddocs//##mmanual//iintroduction//HHow – to – run – thing – locally
. Perhaps the simplest workaround is to start a local webserver and access your coursework via it::
1.. Open a command line (oor terminal on Linux or macOS)) in the directory where you have your cou rsework.. (OOn Windows,, you can press shift + right click,, and then select “OOpen command window here””))..
2.. Start a simple webserver with Python.. On a university computer,, you can type:: “ C:: \ Python27 \ python..eexe – m SimpleHTTPServer ” This will tell you at which port the server will be listening (ee..gg.. 32007))..
3.. In your web browser,, navigate to “ http::////llocalhost::PPORT ”,, where “PPORT”” is the number reported in Step 2..
4 . Learning o utcomes
After completing this coursework,, and attending the relevant lectures,, you should be able to::
• Construct appropriate mathematical operations to manipulate 3D objects
• Use an industry standard graphics programming API ( Web GL))
• Develop code to interact with JavaScript events (mmouse clicks,, key presses etc..))
• Test and document a graphics inter action system
5 . Plagiarism
You must complete this coursework individually.. If you copy code from another student and include it in your project without clear attribution,, then you have committed plagiarism.. Plagiarism is a serious academic offence.. For de tails on plagiarism and how to avoid it,, please visit
http::////wwww..bbath..aac..uuk//llibrary//hhelp//iinfoguides//pplagiarism..hhtml
. Undetected plagiarism degrades the quality of your degree,, as it interferes with our ability to assess you and prevents you learning through properly attempting the coursework.. Consequently,, if we detect any
plagiarism you will receive zero marks for the coursework and be referred to the Director of Studies for disc iplinary action.. Such action may affect your ability to continue your studies at the University.. Note that properly attributed code,, while allowed in your submission,, will not contribute towards your marks.. The report marks will also only be applicable to sections you have coded yourself..
6 . Coursework r equirements s pecification
T his coursework will be marked based on your de mo (550%%)) and your report (550%%))..
The following table details the required features to implement,, as well as the marks available for each requirement (ffor the demo)).. Please see the detailed marking scheme in the following section for a breakdown of marks by requirement..
Req##
Feature to implement
Weighting
1
Draw a simple cube
The cube should be
c
entred at
the origin
(00,,
0,,
0))
,
with
opposite
corner points
at
(
–
1,,
–
1,,
–
1)) and (11,, 1,, 1))
,
with its
faces
orthogonal to x
–
,
y
–
,
z
–
axe
s
.
10
%
2
Draw
coordinate system axes
D
raw
colour
lines to represent the axes
(uuse RGB for XYZ))
–
no arrows or tick marks necessary
.
10
%
3
Rotate the cube
Rotate
about
the
x
–
, y
–
,
and
z
–
axis
,
respectively
(aaxes
and
camera
should not move))
.
10%%
4
Different render modes
Implement a keyboard shortcut for rendering the cube using
only 3 rendering modes::
vertices
,
edges
,
faces
.
1
0
%
5
Translate
the camera
Manipulate the camera’s location by translating it along its
up//ddown,, left//rright,, and forward//bbackward directions..
1
0
%
6
Orbit
the camera
Manipulate the camera by rotating it about the look
–
at point
(““aarc ball”” mode))
.
1
0%%
7
Texture
mapping
M
ap different textures on different faces of the cube
.
10%%
8
Load a mesh model from .oobj
Load the mesh (ee..gg.. the Stanford bunny)),, and then tr anslate and scale it uniformly to fit into the cube
10%%
9
Rotate the mesh,, render it in different modes
as you did for the cube
10%%
10
Be creative – do something cool!!
S ome ideas include:: using shaders,, animations,, shadows,, reflections,, picking and moving an object , contribute to the Three..jjs documentation to improve it etc..
10%%
7.. Demo marking scheme
For each task,, the description mentions the functionality that is expected for full marks (1100%%)).. Partial implementations lead to deductions,, and missing features are marked as 0%%..
Task
Weight
Description
1.. Draw a simple cube [110%%]]
a
60%%
A cube is drawn onto the screen..
b
40%%
Cube is centred at the origin (00,, 0,, 0)),, with opposite corner points ( – 1,, – 1,, – 1)) and (11,, 1,, 1)),, faces orthogonal to x – , y – , z – axes (ccheck code))..
2.. Draw coordinate system axes [110%%]]
a
50%%
Three orthogonal lines are drawn to represent the x – , y – and z – axes of the world coordinate system..
b
5 0%%
The axes are drawn in red (xx)),, green (yy)) and blue (zz)),, respectively..
3.. Rotate the cube [110%%]]
a
1 / 3
Rotation of the cube about the x – axis (wwith axes + camera fixed))..
(RRemark:: it might help to reset rotation between tasks..))
b
1 / 3
Rotation of the cube about the y – axis (wwith axes + camera fixed))..
c
1 / 3
Rotation of the cube about the z – axis (wwith axes + camera fixed))..
4.. Different render modes [110%%]]
a
1 / 3
Vertex render mode shows the 8 vertices of the cube..
b
1 / 3
Edge render mode shows edges of primitives..
c
1 / 3
Face render mod e shows the 6 faces of the cube (oobviously only at most three faces at any one time))..
5.. Translate the camera [110%%]]
a
1 / 3
Translate the camera along the camera’s left//rright vectors,, not the axes of the global coordinate system..
a
1 / 3
Translate the camera along the camera’s up//ddown vectors , not the axes of the global coordinate system..
c
1 / 3
Translate the camera along the camera’s forward//bbackward vectors,, not the axes of the global coordinate system..
Task
Weight
Description
6 . Orbit the camera [11 0 %]]
a
7 0%%
Orbit the camera about the cube (sso – called “aarc ball”” mode)),, i..ee.. move about the look – at point at a fixed distance . This is similar to polar coordinates,, where the two rotation directions correspond to latitude and longitude,, respectively..
b
3 0%%
The camera can orbit in both latitude and longitude directions..
7.. Texture mapping [11 0 %]]
a
40%%
The cube has a texture applied to it..
b
30%%
Correct texturing (wwithout any skew)) and perspective rendering..
c
30%%
Each face should look different..
8.. Load a mesh model from .oobj [110%%]]
a
5 0%%
Load and display a mesh model (ee..gg.. the Stanford bunny))..
b
5 0%%
Correctly (uuniformly)) scaled and translated to fit inside the cube..
9.. Rotate the mesh,, render it in different modes [110%%]]
a
20%%
For the loaded model , rotate it about the x – , y – or z – axi s..
b
20%%
For the loaded model,, show the vertex rendering mode..
c
20%%
For the loaded model , show the edge rendering mode..
d
40%%
For the loaded model , show the face rendering mode (wwith materials,, lighting and shading))..
10 . Be creative – do something cool!! [110%%]]
a
10 0%%
Go beyond the previous tasks.. Using shaders for creating new materials,, load and animate meshes (bbeyond rotations)),, add a ground plane that your objects through shadows on,, draw multiple objects (ee..gg.. a solar system with orbiting planets)) … anything really .
8.. Report marking scheme
The report (mmax.. 8 pages)) should be organised by requirement number and make clear what has been implemented.. See Section 2 for more details..
Explanations – per requirement [ 20 %]]
– tasks to perform and how they’re achieved
– description of mathematical background
Implementation – per requirement [ 20 %]]
– relevant code snippets
– discussion and explanation of relevant functions
Form / Organisation [ 15 %]]
– structure of the report (bby requirement number))
– clarity of exposition,, language
– appropriate formatting (ppage numbers,, code snippets as text,, with syntax highlighting))
– using appropriate illustrations (wwith correct attribution and informative captions))
– referencing (tto figures,, sections etc..)) and references
Evaluation / Testing – per requirement [ 10 %]]
– show that it works (nno need to replicate every single part of the demo))
– use of screenshots or numerical results as appropriate
Discussion [55%%]]
– Lessons learned
– Limitations
– Future work
Code quality [55%%]]
– clear code structure
– code clarity (ee..gg.. appropriate variable names,, functions,, comments))
– using appropriate functions from libraries
Extensions [225%%]]
going beyond the coursework requirements in functionality,, documentation,, testing,, discussion,, code quality,, report typesetting etc..
Penalties
20%% – no (oown)) code submitted
5 – 10%% – text or code plagiarism ( depending on severity )
5 % – report not submitted as a separate document
5%% – incomplete code submission,, e..gg.. missing images or scripts
Note:: these penalties are given in percentage points..