dynamic lighting and dropping shadow in webgl
TRANSCRIPT
![Page 1: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/1.jpg)
Dynamic lighting and dropping shadow in WebGL
CSE595D Independent study 2015 fall
![Page 2: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/2.jpg)
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
![Page 3: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/3.jpg)
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)
![Page 4: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/4.jpg)
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?
![Page 5: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/5.jpg)
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.
![Page 6: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/6.jpg)
All lights must be calculated in just 1 draw call.
![Page 7: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/7.jpg)
DEMO
![Page 8: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/8.jpg)
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”
![Page 9: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/9.jpg)
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
![Page 10: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/10.jpg)
How did I do that?• Calculate texture coordinate in shader.
The variable ‘i’ is index of light, and ‘j’ is index of light argument.
![Page 11: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/11.jpg)
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:
![Page 12: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/12.jpg)
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
![Page 13: Dynamic lighting and dropping shadow in WebGL](https://reader035.vdocument.in/reader035/viewer/2022062503/5873104c1a28ab99088b7abd/html5/thumbnails/13.jpg)
How did I do that?• Generate matrix to adjust uv coordinate for the
shadow map