Reinventing the Wheel: Understanding Lighting and Shading in WebGL

Demos and projects
1

Reinventing the Wheel: Understanding Lighting and Shading in WebGL

As part of my broader research on implementing terrain rendering using WebGL, I “reinvent the wheel” in the realm of lighting and shading. This effort was driven by my desire to better understand how different lighting models work and to create a flexible shader that can handle various types of lighting in WebGL.

Again, BABYLON is already do it, a way better!.

Integrating Multiple Light Types

One of the key challenges in realistic rendering is the integration of various light sources. Each type of light, be it ambient, directional, point, or spot has unique characteristics that need to be accurately represented in the shader. I focused on understanding and implementing the following types of lights:

  • Ambient Light: Provides a base level of illumination, ensuring that all parts of the scene are visible even without direct lighting.
  • Directional Light: Simulates sunlight or other far-away light sources, with parallel light rays illuminating the scene.
  • Point Light: Emits light in all directions from a specific point, similar to a light bulb.
  • Spot Light: Emits light in a cone, with intensity fading from the center to the edges, mimicking a flashlight or spotlight.

Combining Different Shading Strategies

To achieve the desired visual effect, I explored various shading strategies and how they interact with the different types of lights. The primary shading strategies considered were:

  • Flat Shading: Each polygon is shaded with a single color, calculated based on the polygon’s normal. This technique emphasizes the faceted nature of the geometry.
  • Gouraud Shading: Calculates lighting at the vertices and interpolates the results across the surface of the polygons. This approach is efficient but can miss subtle lighting effects.
  • Phong Shading: Interpolates normals across the surface of the polygons and computes lighting at each pixel. This method provides more accurate and smooth shading results, especially for specular highlights.
  • Blinn-Phong Shading: A variant of Phong shading that uses a half-vector for the specular reflection calculation, which can be more efficient and yield similar results.

Merging Light Types and Shading Strategies

The core of this project was to create a versatile shader capable of handling multiple light types within different shading strategies. This required a dive into the math (basic) behind each lighting model and shading technique, and careful consideration of how to blend these effects seamlessly.

  1. Ambient and Hemispheric Lighting: Provided a base illumination and environmental lighting, simulating the diffuse light coming from the sky and ground.

  2. Diffuse Lighting: Implemented for directional, point, and spot lights, taking into account the angle between the light direction and surface normals.

  3. Specular Highlights: Added using both Phong and Blinn-Phong models, adjusting for the shininess factor to simulate different material properties.

  4. Attenuation: Incorporated for point and spot lights to simulate the diminishing intensity of light over distance. This has to be correctly handle at this point…

Here the link to the playground.

Hope it may be helpful for someone who needs to better understand what is behind the BABYLON Scene.

10 Likes