How do I add normal mapping to my WebGL shader using this walkthrough?

Sample a normal map texture, expand RGB values to the -1 to 1 range, and use glsl-perturb-normal to adjust surface normals in the fragment shader, as demonstrated in the normal mapping section with code snippets.

What's the difference between flat and smooth normals in GLSL lighting?

Flat normals are calculated per-face using derivatives for a faceted look, while smooth normals are interpolated from vertex attributes for softer shading; the walkthrough shows both methods with visual examples.

How to implement light attenuation in a fragment shader?

Use a distance-based function like the Madams attenuation provided, which calculates falloff based on light radius and distance, integrated into the shader code for realistic point light effects.

Phong vs Blinn-Phong specular: which is better for WebGL?

Phong is classic but can have artifacts; Blinn-Phong is often more efficient and realistic. This walkthrough uses Phong, but mentions alternatives like glsl-specular-blinn-phong for different aesthetics.

Can I use this tutorial with Three.js instead of stackgl?

Yes, the GLSL shader code is framework-agnostic, but you'll need to adapt the JavaScript setup to Three.js's rendering pipeline, as noted in the README's compatibility statement.

Why is gamma correction important in lighting calculations?

It ensures colors are processed in linear space for accurate lighting, since textures are often stored in sRGB; the walkthrough uses glsl-gamma modules to convert between spaces, referencing GPU Gems for details.

Open-Awesome

GLSL lighting walkthrough

NOASSERTIONJavaScript

An interactive tutorial implementing Phong shading with GLSL, covering per-pixel lighting, normal mapping, and gamma correction.

Visit Website GitHub

466 stars33 forks0 contributors

What is GLSL lighting walkthrough?

glsl-lighting-walkthrough is an interactive tutorial that demonstrates how to implement Phong shading and advanced lighting techniques using custom GLSL shaders in WebGL. It walks through per-pixel lighting, normal mapping, gamma correction, and light attenuation with practical code examples. The project solves the problem of understanding complex real-time lighting implementations by providing a hands-on, modular approach.

Target Audience

Intermediate WebGL developers and graphics programmers who already understand basic 3D rendering concepts and want to implement advanced lighting techniques in their shaders.

Value Proposition

Developers choose this project because it provides a complete, working implementation of Phong shading with detailed explanations of each component, uses glslify for modular shader code, and demonstrates professional-grade techniques like gamma-correct linear space rendering and Oren-Nayar diffuse.

Overview

:bulb: phong shading tutorial with glslify

Use Cases

Best For

Learning Phong shading implementation from scratch
Understanding per-pixel lighting in WebGL
Implementing normal mapping and specular maps
Working with gamma-correct linear color space
Adding light attenuation and falloff effects
Studying modular GLSL code organization with glslify

Not Ideal For

Developers needing production-ready, drop-in shader libraries for immediate use
Teams using high-level engines like Unity or Unreal with built-in lighting systems
Beginners without prior WebGL or GLSL experience seeking foundational tutorials
Environments lacking WebGL 1.0 support for the OES_standard_derivatives extension

Pros & Cons

Pros

Modular Code Organization

Uses glslify to break down complex shaders into reusable npm modules, making advanced lighting concepts more accessible and maintainable, as shown in the shader sections.

Comprehensive Technique Coverage

Covers per-pixel lighting, normal mapping, gamma correction, and Oren-Nayar diffuse in one walkthrough, providing a holistic view of professional shading practices.

Interactive Learning Experience

Includes a live demo with real-time visual feedback, allowing developers to experiment and see the impact of each lighting component immediately.

Professional-Grade Practices

Implements gamma-correct linear space rendering and attenuation functions like Madams', which are standard in modern real-time graphics for accurate results.

Cons

Assumed Prior Knowledge

The README explicitly states it's not for beginners and assumes familiarity with WebGL and stackgl, making it inaccessible without foundational graphics programming skills.

Dependency on Specific Extensions

Requires the OES_standard_derivatives WebGL extension for flat normals and normal mapping, which may not be supported on all devices or older browsers.

Tied to stackgl Ecosystem

Built around stackgl tools and npm modules, reducing portability to other WebGL frameworks like Three.js without significant adaptation effort.

Frequently Asked Questions

Related Projects

lwjgl: Shaders

:wrench: LibGDX/LWJGL tutorials and examples

Stars1,893

Forks180

Last commit7 years ago

Modern OpenGL Series

Code to accompany a series of OpenGL articles on tomdalling.com

Stars815

Forks224

Last commit6 years ago

WebGL Lessons — ThreeJS Shaders

Using custom vertex and fragment shaders in ThreeJS

Stars365

Forks21

Last commit9 years ago

WebGL Lessons — Fragment Shaders

A brief introduction to fragment shaders.

Stars308

Forks15

Last commit8 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub