Question 1

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

Accepted Answer

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.

Question 2

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

Accepted Answer

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.

Question 3

How to implement light attenuation in a fragment shader?

Accepted Answer

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.

Question 4

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

Accepted Answer

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.

Question 5

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

Accepted Answer

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.

Question 6

Why is gamma correction important in lighting calculations?

Accepted Answer

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.

GLSL lighting walkthrough

What is GLSL lighting walkthrough?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions