Dynamic lighting and dropping shadow in WebGL

CSE595D Independent study 2015 fall

What is dynamic light?

• Flexible types of light• Flexible count of light• Flexible count of shadow map

And these needs to be implemented with API of WebGL

Flexibility in light count• Restriction of GLSL in WebGL1.Index of array must be constant.

OK. arr[3] Not work. arr[n]2.Criteria of loop must be constant.

OK. for(int i = 0; i < 5; i ++)Not work. for(int i = 0;i < n; i++)

3. Count of maximum uniform variable is too smallOnly 4048 float values can be used(Mac book pro)

Flexibility in light types• There is a lot of formula for each light type1.Point Light

2.Directional Light

3.Spot Light

These formula are all for only diffuse lighting, each light has specular lighting formula also.And area light, projection light, hemisphere ambient light … and so on.Furthermore, required input argument is different for each light type.

How to make flexible light mapping shader with GLSL?

Flexibility in shadow map count• There is only up to 32 registers for texture.

(Is there no way to use shadow drop light over 32?)

• Texture variable can not be array

• Requiring shadow map is depended on type of light.

All lights must be calculated in just 1 draw call.

DEMO

How did I do that?• Stored all arguments for lights in an texture(Light

argument texture).Height of the texture is count of lightWidth of the texture is )What is 1? → This is the value to check type of

light.Ex) PointLight → 0 Directional Light → 1

All argument is transformed into 4-dimentional vector

(Because the texture is “Floating point texture RGBA”

How did I do that?• Example of the texture

PointLight with 1 as light index.PointLight needs position(vector3),color(vector3),decay(float) and length(float) as arguments.R G B A R G B A R G B A

0 … … … … … … … … … … … …

1 0 length

decay

2 … … … … … … … … … … … …

Position Color Unused

How did I do that?• Calculate texture coordinate in shader.

The variable ‘i’ is index of light, and ‘j’ is index of light argument.

How did I do that?• Runtime shader code generation1. Insert all formula chunk for each light types into lighting shader2. Generate main function code to loop and split depending on light type.Generated main function code in GLSL:

How did I do that?• Render all shadow map in just 1 large texture

SM1 SM2 SM3 SM4

SM5 SM6 SM7 SM8

SM9 SM10 SM11 SM12

SM13 SM14 SM15 SM16

How did I do that?• Generate matrix to adjust uv coordinate for the

shadow map