04. Lighting

Interactive Computer Graphics with WebGL on Coursera

Key Points to Remember

  • Keep current mouse mode in mind. You can't draw object when mouse is in "Select Object" or "Move Camera" mode. You can see mouse mode in the bottom left corner of the canvas.
  • Use mouse to draw objects. For obvious reasons, the object will not be drawn exactly where you position your mouse. The further you are away from the origin, higher the error.
  • You can always zoom in/out using mouse wheel.
  • There is only one directional light indicated by a black point. You can move it using controls in the light panel.
  • Global reference axes are colored as X, Y, and XZ plane as a grid.
  • DO NOT turn off both fill color and wireframe mode for an object. It will still be on canvas and you'll be able to select it, although you can't see it!

Icon Legends for Mouse Interaction

- Object properties
- Light properties
- New object
- Select object
- Move camera
- Reset camera
- Clear canvas
- Save canvas
- Show/hide help

Keyboard Shortcuts

R - Reset camera
H - Show/hide help
Arrows  - Move camera
Pg up/dn - Zoom in/out
T - Toggle XZ grid/plane
Delete - Delete object
Close
Oops ... your browser doesn't support the HTML5 canvas element
DRAW
()
Tested in Chrome and Firefox
Although small screen devices and touchscreens are supported, for best experience use large screen devices with mouse.