dynamic lighting and dropping shadow in webgl
Post on 09-Jan-2017
1.046 Views
Preview:
TRANSCRIPT
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
top related