University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 5
- Wanru Zhao
- Tested on: Google Chrome 70.0.3538.77 on Windows 10, i7-8750H @ 2.20GHz 16GB, GTX 1070 with Max-Q Design (Personal Laptop)
Currently having issue with making github pages (npm run build issue)
Demo
Blinn-Phong
- Cluster update
- Devide the whole frustum into _xSclices * _ySlices * _zSlices clusters and assign lights into overlapping clusters
- Foward+
- Build a data structure (texture buffer) to keep track of how many lights are in each cluster with their indices
- Render the scene using only the lights that overlap a given cluster
- Clustered
- Reuse clustering logic
- Store vertex attributes in g-buffer
- Read g-buffer and render scene to produce final output
- Effect
- Implemented deferred Blinn-Phong shading for point lights
- Optimization
- Pack values into vec4, reduce number of g-buffers from 4 to 2, reconstructing world position using camera matrice and (gl.FragCoord.x, gl.FragCoord.y, depth)
Albedo | Normal |
---|---|
![]() |
![]() |
Depth | World Position |
![]() |
![]() |
Camera Position | |
![]() |
Those are components used to final shading in deferred rendering. Among them, albedo, normal and depth are passing through g-buffers, while world position and camera position are reconstructed from information obtained from g-buffers.
(Because I have no way to turn off the VSNYC of my computer and Google Chrome, the highest fps is limited to 60 all the time. Therefore the difference between forward+, clustered deferred, and optimized clustered deferred methods.)
From the comparison of different rendering methods' performances, we can find that as the number of lights increases, the performance of Forward rendering dramatically drops. Also, the performance of Forward rendering is worse than Forward Plus and Clustered Deferred rendering. Also, there is only slightly difference between Forward Plus and Clustered Rendering. I think this is due to what I mentioned at the beginning of this session. When the number of lights is large enough, performance enhancement can be seen after optimization. For this part, I used 2 g-buffers instead of initial 4 g-buffers. Also, the world position and camera space position are calculated through one depth value passed through g-buffer.- Three.js by @mrdoob and contributors
- stats.js by @mrdoob and contributors
- webgl-debug by Khronos Group Inc.
- glMatrix by @toji and contributors
- minimal-gltf-loader by @shrekshao