1 Material and Lighting [10 in total]
This assignment is based on the box laboratories with materials and lighting of March 12th, 2020. You should use this code as a start for your WebGL2 solution. (Your solution must be WebGL2 and not use THREE).
2 Spheres 
Create a class for modelling a sphere as shown in Fig. 1. You can reuse much of the BoxShape and associated classes from the laboratory. Your sphere should enable drawing with smooth and flat shading. You will need to use two different face lists. You are required to use element draw.
A list of vertex position and an indexed face list are given in the Appendix.
3 Spinning Grid of Spheres 
Use the sphere from Question 2 and place them in a 5 × 7 frontoparallel grid. Use one element draw for all the spheres. Use an animation similar to the lab to have all the spheres spinning while using instanced drawing. (Note: If you can’t get the sphere to work, you can use the cubes from the lab).
4 Light Source 
Use a single directional light source and a material for the spheres (see also Question 5). Give the user the ability to change the ambient, diffuse and specular light source strength through the
Figure 1: Sphere (42 vertices, 80 faces) rendered with smooth shading in Fig. 1(a) and flat shading in Fig. 1(b) 2
The user should also be able to change the direction vector of the light source. Control the position of the light sphere with ’a’, ’w’, ’s’ and ’d’ keys.
5 Materials 
Add controls for a single material for all spheres. The user should be able to control the emissive, ambient, diffuse and specular colours, as well as the shinniness exponent of the Blinn-Phong (OpenGL hardware) model.
Vary the material for each sphere based on the instance id. The emissive, ambient, diffuse and specular colours should vary in the first four rows of the grid, respectively. Scale the colour
h i parameters from left to right by scolour = 0.5 0.9 0.95 1 1.05 1.1 1.5 . Make sure to clamp the values of each channel at 1. In the fifth row of the grid vary the shinniness parameter
(exponent) in a logarithmic scale slog = 0.1 0.2 0.5 1 2 5 10 .
Add a checkbox in dat.gui to switch between flat and smooth shading.
6 Bonus: Bump Mapping 
Add another row of sphere for which you use bump mapping. The heights of the bumps should vary as the colours from left to right.
“../../node modules/gl-matrix/gl-matrix.js”, and
(Please do not submit those).
|The 42 vertex position of the sphere are given as: 0.00000||0.85065||0.525731|