4. Lightening, Shading and Texture Mapping¶

Introduction ¹¶

Types of lights in Three.js:
- AmbientLight: Provides constant illumination throughout the scene.
- DirectionalLight: Illuminates in a specific direction, but over infinite distance.
- PointLight: Illuminates from a specific point in a all directions, over a specific distance.
- SpotLight: Illuminates from a specific point in a specific direction, over a specific distance.
Notes about lights ⁷:
- The directional light comes from the position of the light source towards the origin of the scene.
- It is recommended to add a low-intensity ambient light to the scene to avoid dark areas as auxiliary light to mimic light bouncing off surfaces.
- The main light source should be a directional light, mimicking the sun.
Types of Texture Mapping:
- Color Map: Covers an object (geometry) within the scene with a graphic image.
- Bump or Normal Map:
  - Adds texture to an object by simulating bumps and dents.
  - Both simulate the impression of a detailed 3D surface by modifying the shading as if the surface had lots of small angles, rather than being completely flat.
  - It’s just modifying each pixel’s shading, this will not cast any shadows and will not obstruct other objects.
  - If the camera angle is too flat to the surface, you will notice that the surface is not really shaped.
  - Both bump maps and normal maps work by modifying the normal angle (the direction pointing perpendicular from a face) which is used to calculate the shading.
  - The Bump map (and normal map) essentially mimics the effect of shadow to give the illusion of form, of changes in the surface’s geometry.
- Bump maps:
  - Textures stores intensity values relative to the height of the surface from the camera’s viewpoint.
- Normal maps:
  - These are more accurate than bump maps.
  - These are images that store a direction, the direction of normals directly in the RGB values of an image.
Shading, within computer graphics, is the calculation of color to apply to polygons within the geometry. These calculations consider several factors depending upon the type of material used, the type of lighting, the shape of the geometry, and other factors.
OGSL:
- OpenGL and WebGL both provide an interface to a specialized language to define shading called OpenGL Shading Language or OGSL.
Our text will describe 4 different shading models, including flat shading, smooth shading, phong shading, and anisotropic shading.

Introduction to Lighting ²¶

Local lighting model: all light comes from lights defined within the scene. Light comes from a source and hits an object, and the object reflects the light back to the camera.
Components of light:
- Ambient light: light that is scattered in all directions, but it does not have a source, it is just there.
- Diffuse light: light that is scattered in all directions, but more in the direction of the normal. It comes from a source, hits an object, and is reflected back to the camera. The object absorbs some of the light and reflects the rest.
- Specular light: light that is reflected in a specific direction. It does not interact with the object, but it makes objects shiny. It is usually the reflection of the light source.
Any light has these properties:
- Position: where the light is in the scene (x, y, z).
- Color: the color of each component of the light (ambient, diffuse, specular).
- Other properties: depending on the type of light, there are other properties like intensity, direction, etc.
Shininess of light:
- Values: 0 -100.
- Higher values give smaller, more focused highlights.
You need a material to see the effect of light on an object. The material has properties like:
- Ambient: the color of the object when there is no light.
- Diffuse: the color of the object when there is light.
- Specular: the color of the highlights.
- Shininess: how shiny the object is.
Types of materials:
- Basic material: very consistent; it does blend colors and has no shininess; hence it gives a solid color.
- Lambert material.
- Phong material: it very smoothly blends colors and has shininess.
Scene graph: A tree structure that represents the scene.
Light is just another geometry object in the scene graph.

Shading ³¶

Shading:
- The process of determining the color of a pixel in the frame buffer.
- The properties of the objects and the context around the pixel determine the color.
- OpenGL only provides flat and smooth shading.
Flat shading:
- The color of the polygon is the same for all pixels.
- The color is determined by the normal of the polygon.
- Each single polygon have exactly one color (all pixels have the same color).
- It is simple and fast.
- Flat shading on small polygons is intensive (as it is calculated for each polygon and there are too many of them).
Smooth shading:
- The color of the polygon is interpolated between the vertices.
- The color is determined by the normal of the vertices.
- It gives the illusion of a smooth surface.
- Each single point of the polygon has a different color (or a different degree of the same color).
- It gives more realistic results.
- It is slower than flat shading, as computations are more complex.
- Smooth shading on large polygon is intensive.
Phong shading:
- It is a compromise between flat and smooth shading as it combines them.
- It is a more realistic model, but it is slower.
- It is the most used shading model.

Texture Mapping ⁴¶

Texture mapping is way to give more detail to an object without increasing the number of polygons.
Texture Map:
- It is an array of values stored in memory (it can be sourced from an image).
- The values stored are used to compute the final appearance of the object.
Before coloring any pixel, the texture map is used to determine the color of the pixel.

Massachusetts Institute of Technology: Coordinates and Transformations ⁶¶

15. Shading & Material Appearance¶

For Point lights sources (light intensity decreases with distance):

\[ I_{surface} = \frac{I_{source} \cos(\theta)}{r^2} \]

where:
- \(I\_{surface}\) is the intensity of the light at the surface x.
- \(I\_{source}\) is the intensity of the light source.
- \(\theta\) is the angle between the light source and the normal at x.
- \(r\) is the distance between the light source and x.
For Directional light sources (light intensity is constant):

\[ I_{surface} = I_{source} \cos(\theta) \]

where:
- \(I\_{surface}\) is the intensity of the light at the surface x.
- \(I\_{source}\) is the intensity of the light source.
- \(\theta\) is the angle between the light source direction and the normal at x.
For Spot light sources (light intensity decreases with distance and angle):

\[ I_{surface} = \frac{I_{source} \cos(\theta) \cos(\phi)}{r^2} \]

where:
- \(I\_{surface}\) is the intensity of the light at the surface x.
- \(I\_{source}\) is the intensity of the light source.
- \(\theta\) is the angle between the light source and the normal at x.
- \(\phi\) is the angle between the light source direction and the direction from the light source to x (the fall-off angle).
- \(r\) is the distance between the light source and x.
Bidirectional reflectance distribution function (BRDF):
- Pure reflection, assumes no light scatters into the material.
- It is a function that describes how light is reflected at an opaque surface.
- It is the Ratio of light coming from one direction that gets reflected in another direction.
- Examples: brushed metal, hair, fur, etc.
Ideal Diffuse Reflectance:
- Assume surface reflects equally in all directions.
- An ideal diffuse surface is, at the microscopic level, a very rough surface.
- Examples: chalk, clay, etc.
- Ideal diffuse reflectors reflect light according to Lambert’s cosine law: The reflected light varies with cosine even if distance to light source is kept constant.
Ideal Specular Reflectance:
- Reflection is only at mirror angle.
- View dependent – Microscopic surface elements are usually oriented in the same direction as the surface itself.
- Examples: mirrors, polished metal, glass, etc.
The Complete Phong Model:
- Sum of three components: ideal diffuse reflection + specular reflection + “ambient”.

16. Texture Mapping and Shaders¶

18. Global Illumination and Monte Carlo¶

References¶

Learning Guide Unit 4: Introduction | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/book/view.php?id=444274&chapterid=540600 ↩
Unit 4 Lecture 1: Introduction to Lighting | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444279 ↩
Unit 4 Lecture 2: Shading | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444280 ↩
Unit 4 Lecture 4: Texture Mapping | Home. (2024). Uopeople.edu. https://my.uopeople.edu/mod/kalvidres/view.php?id=444281 ↩
Guha. S. (2019). Computer graphics through OpenGL: From theory to experiments, 3^rd edition. (Download/access book from syllabus/textbook) Read Chapter 11 (Sections 11.2, 11.5, 11.10, 11.13) ↩
Massachusetts Institute of Technology (2020). Coordinates and Transformations. MITOpenCourseware. https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-837-computer-graphics-fall-2012/lecture-notes/ Review Lecture #15: Shading & Material Appearance. Read Lecture #16: Texture Mapping and Shaders. Read Lecture #18: Global Illumination and Monte Carlo ↩
Lights. (2024). Lights — Three.js Journey. Three.js Journey. https://threejs-journey.com/lessons/lights# ↩

4. Lightening, Shading and Texture Mapping¶

Introduction 1¶

Introduction to Lighting 2¶

Shading 3¶

Texture Mapping 4¶

Massachusetts Institute of Technology: Coordinates and Transformations 6¶

15. Shading & Material Appearance¶

16. Texture Mapping and Shaders¶

18. Global Illumination and Monte Carlo¶

References¶

Introduction ¹¶

Introduction to Lighting ²¶

Shading ³¶

Texture Mapping ⁴¶

Massachusetts Institute of Technology: Coordinates and Transformations ⁶¶