Lighting

Goal

We first restructure the code to better understand the transformations. Then we add controls to interact with the cube. After that, we add a light source and implement basic lighting calculations.

Assignment

Use the repository from last time and follow the instructions in the slides:

means that the code is already in the repository and you just need to look at it.

means you can copy-paste the code and it should work.

means that you need to create a new file

indicates that you need to do more than just copy-paste the code.

In any case you need to understand what you are doing.

Material

• Slides:
  • Interactive cube in WebGL
  • Illuminated cube in WebGL
• Utils for WebGL: resources.zip and utils.zip (new content!)
• Web links:
  • The Magic of the LookAt Matrix by Carmen Cincotti
  • WebGL2 Fundamentals - 3D Cameras
  • WebGL2 Fundamentals - Point Lighting
  • Gouraud and Phong Shading Demo

Tasks (for the “Interactive cube” demo)

In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.

Simple

(small and easy code changes)

• Change the position of the cube by modifying the model matrix
• Change the camera so that the cube is viewed from the top
• Change the rotation speed of the cube (the impact of the mouse or sliders needs to be changed)
• Experiment with the mouse controls and observe how the cube rotates. Why does it not always rotate in the same direction as the mouse is moved?

Complex

(needs new functions)

• Add mouse wheel support to zoom in and out of the cube.
• Draw a thousand cubes instead of one. Take care that all cubes are rotated simultaneously.
• Change the camera to an orthographic camera (check webgl-camera for help)

Tasks (for the “Illuminated cube” demo)

In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.

Simple

(small and easy code changes)

• Change the position of the light sources
• Change the camera and observe the highlights on the cube
• Change the color of the light sources
• Add checkboxes to turn lighting on and off

Complex

(needs new functions)

• Add more light sources to the scene.
• Animate the light sources so that they move around the cube.
• Add a slider to control the intensity of the light sources.
• Add some control to change the color of the light sources.

Questions

• TBD

Material

• TBD

Insights

• TBD