WebGL Demo

• Shapes, Transformations, Projections, Navigation and Lighting are demonstrated

• Soure code can be found @ https://github.com/m-abdulhak/WebGLLightingDemo

• Try it @ https://m-abdulhak.github.io/WebGLLightingDemo/

• All optoions are shown on sidebar (show/hide it by pressing X)

• Scene has 5 objects and 1 background plane

• Scene has 5 light sources:

  • Moving light source highlighted with a small lighting ball with default color white
  • Static light on the top right of the camera with default color Red
  • User-Movable light on the top center of the camera with default color Blue, Its position can be controlled with BNMH-GJ keys
  • Static light on the top left of the camera with default color Green
  • Camera-Following spot light can be moved around slightly with the mouse

• All light intensities can be controlled individually with sliders in "Light Intensities" section in the sidebar

• All light properties (Specular-Diffuse-Ambient-Color) can be controlled individually with sliders in "Light Proprties" section in the sidebar

• All material properties (Specular-Diffuse-Ambient-Shineness-Color) can be controlled individually for each object with sliders in "Material Proprties" section in the sidebar

• Other options:

  • Move around scene with WASD-QE
  • Toggle objects' animations with 1-5
  • Select perspective with O-P (Orthographic - Perspective)
  • Select shading mode with F (Smooth - Flat - Cell)
  • Pause Scene with "Space"

• Developed by Mohammed Abdullhak