[SOLVED] webglCM20219 Coursework Part 2

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 cameras 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 cameras left//rright vectors,, not the axes of the global coordinate system..

a

1 / 3

Translate the camera along the cameras up//ddown vectors , not the axes of the global coordinate system..

c

1 / 3

Translate the camera along the cameras 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 theyre 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..