02561 Computer Graphics

Worksheet 1: Getting started with WebGL

Part 1: Setup a basic WebGL application: Open page in new window

Part 2: Shaders and buffers: Open page in new window

Part 3: Triangles: Open page in new window

Part 4: A Rotating square: Open page in new window

Part 5: A fan of triangles: Open page in new window

Worksheet 2: Input devices and interaction

Part 1: Open page in new window

Part 2: Open page in new window

Part 3: Open page in new window

Part 4: Open page in new window

Worksheet 3: Projections (virtual camera) and transformations

Part 1: Draw a wireframe unit cube in isometric view: Open page in new window

Part 2: Draw the unit cube in different classical perspective views: Open page in new window

Part 3: Reflect on the theory of affine transformations and viewing transformations:

• Coffee
• Formula for CTM for each cube:
• Wireframe unit cube in isometric view:
• CTM = viewMatrix * modelViewMatrix;
• Three classical perspective views:
• CTM = mvMatrix * pMatrix;


• loc = translate(1.5, 0.0, 0.0)
  CTM = mvMatrix * pMatrix;


• loc = translate(-1.5, 0.0, 0.0)
  CTM = mvMatrix * pMatrix * rotate(35);

Worksheet 4: Lighting and (forward) shading

Part 1: Draw a sphere in perspective view Open page in new window

Part 2: Use depth buffer and back face culling to remove hidden surfaces Open page in new window

Part 3: Use Guaraud shading Open page in new window

Part 4: Implement full Phong reflection model in the vertex shader and create sliders Open page in new window

Part 5: Use phong shading by moving your implementation of Phong model to the fragments shader Open page in new window

Part 6: Answer the following questions:

• (a) The Phong shading is applied to the fragment shader because the lighting model is required to be applied to each fragment. Phong lighting is applied to the vertex shader and works on the vertices.
• (b) Flat shading is the simplest model. If the three vectors are constant, the shading only needs to calculate once for each polygon and all points are assigned the same shade. simple, but less smooth.
  Phong lighting, also known as Gourad shading, is more complex and gives better result but also needs more calculations.
  Phong shading interpolates normals of vertices to calcualte the light. This is the most complex of the three.
• (c) Directional light is a source of light whose rays are parallel. The source is considered to be an infinite distance. Its comparable with the sun.
  Point light emits light in all direction from one single point. Its comparable to a lightbulb, lamps etc.
• (d) I am not sure
• (e) There will come no light reflection of an object.
• (f) Light reflected back will be in a more narrow region.
• (g) In world coordinate space

Worksheet 5: Rendering a triangle mesh

Part 1: Create DTU student homepage: DONE

Part 2: Create a nice 3D object (using blender) Download here

Part 3: Load and display 3D model Open page in new window

Part 4: Set up a light source Open page in new window

Worksheet 6: Texxture mapping

Part 1: Create a rectangle with vertices Open page in new window

Part 2: Create buttons to switch between different texture wrapping modes Open page in new window

Part 3: Map earth texture onto the sphere from W4 Part 3 Open page in new window

Worksheet 7: Environment mapping and normal mapping

Part 1: Cube map Open page in new window

Part 2: Environment Open page in new window

Part 3: Reflection Open page in new window

Part 4: Bump mapping Open page in new window

Worksheet 8: Projection shadows and render pipeline

Part 1: Scene Open page in new window

Part 2: Projection shadows Open page in new window

Part 3: Shadow polygon culling using the z-buffer Open page in new window

Part 4: Ambient light in shadows using transparency Open page in new window

Worksheet 9: Shadow mapping

Part 1: Scene and projection shadows for reference Open page in new window

Part 2: Shadow mapping Not completed!

Worksheet 10:

Not completed!