Skip to content

1 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

1 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0147448
IMPLEMENTATION
WillTheFabulous Nov 1, 2021
7748c98
change
WillTheFabulous Nov 2, 2021
7b55727
Update README.md
WillTheFabulous Nov 2, 2021
8e1500f
again
WillTheFabulous Nov 2, 2021
c4470e6
Merge branch 'main' of https://github.com/WillTheFabulous/Project5-We…
WillTheFabulous Nov 2, 2021
8ad3bc6
Update README.md
WillTheFabulous Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,10 @@
node_modules
.idea
.idea
img/forward+.gif
img/gbuffer.gif
img/20211102032411.jpg
img/20211102032557.jpg
img/20211102032719.jpg
img/forward+2.gif
img/forward+3.gif
img/g+3.gif
56 changes: 45 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,58 @@ WebGL Forward+ and Clustered Deferred Shading

**University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 5**

* (TODO) YOUR NAME HERE
* Tested on: (TODO) **Google Chrome 222.2** on
Windows 22, i7-2222 @ 2.22GHz 22GB, GTX 222 222MB (Moore 2222 Lab)
* Xiao Wei
* Tested on: Windows 10, i9-9900K @ 3.6GHz 16.0GB, RTX 2080 Super, 16GB

### Live Online

[![](img/thumb.png)](http://TODO.github.io/Project5-WebGL-Forward-Plus-and-Clustered-Deferred)
https://willthefabulous.github.io/Project5-WebGL-Forward-Plus-and-Clustered-Deferred/

### Demo Video/GIF

[![](img/video.png)](TODO)
Description
======================
The project contains different methods of rendering a scene with a lot of light sources. The default Forward shading iterate through all the light sources in the scene to compute their contribution to the pixel. We can process the light sources before rendering into some data structure called cluster and only shade relevent light for the particular pixel and this method is called Forward+ rendering. The same idea can be applied to deferred shading, with which we will only sample precomputed gbuffer textures that contains position, normal, and albedo information so that we avoid shading fragments that will eventually be culled out.

I tried two implementations for clustering. First one was using projection, but it has some glitches at certain angles. My final implementation is to locate the slice of the frustum where the light is at and move it coordinate to that of the slice.

## Features
* Forward+ rendering
* Clustered deferred rendering
* Blinn-Phong shading model
* 2-component normals and packed into 2 vec4s

Rendering Results
======================
## Forward+

![forward+3](https://user-images.githubusercontent.com/66859615/139780333-8e03fc07-c7a6-4983-95e1-3611874e3fc1.gif)

## GBuffer with Binn Phong
![g+3](https://user-images.githubusercontent.com/66859615/139780336-dec4d5cc-c2bd-454a-b48f-6de5d9751d46.gif)


Analysis
======================

### (TODO: Your README)
## Different Methods Comparison

*DO NOT* leave the README to the last minute! It is a crucial part of the
project, and we will not be able to grade you without a good README.
![20211102032411](https://user-images.githubusercontent.com/66859615/139782443-b5e4adab-52a5-4110-9763-ebc18b15e094.jpg)

In my implementation, forward+ is the worst one. Probably because the overhead cost by computing the cluster idx is too high that it is hard to get back time from reducing light iteration, but if the computing process can be accelerated by multi-threading on cpu the problem can be gone. The gbuffer one is definitely the best, we save a lot of time avoiding computing the fragment that will be culled out and the sampling of the texture is better in this case. The benefit is getting larger and larger as the we have more and more lights. Deferred shading is particularly good with large number of lgihts

## Blinn Phong Performance

The Blinn Phong result can be viewed from the above gif in the rendering result section. The Bling Phong uses a half vector between the viewing and light direction vector to replace the dot product of viewing direction and reflected light in Phone shading and this can save some calculation. We add the result generated by Bling-Phone to get specular effect. The performance cost is really low for the Bling-Phong and can almost be ignored in my case


![20211102032557](https://user-images.githubusercontent.com/66859615/139782859-aa4257c6-0658-4698-b3d2-a0858b6019b1.jpg)


## 2-component vector optimization
To abandon the extra gbuffer for normal, I used 2-component vector with a method called sterographic projection to make the recalculation of z component more precise. We need to store pX = X / ( 1 + Z ), pY = Y / ( 1 + Z ) and when we want to get back the z component we just do enom = 2 / ( 1 + pX * pX + pY * pY ), X = pX * denom ,Y = pY * denom,Z = denom - 1. We have an obvious performance gain at different levels of workload and it is better in large workload. This because we need to sample one less buffer each time (I pack the normal to w component of the first 2 buffers) and the computation cost is pretty small.

![20211102032719](https://user-images.githubusercontent.com/66859615/139783636-da927f03-87d1-49a0-887c-b09319111ff2.jpg)

This assignment has a considerable amount of performance analysis compared
to implementation work. Complete the implementation early to leave time!


### Credits
Expand All @@ -31,3 +64,4 @@ to implementation work. Complete the implementation early to leave time!
* [webgl-debug](https://github.com/KhronosGroup/WebGLDeveloperTools) by Khronos Group Inc.
* [glMatrix](https://github.com/toji/gl-matrix) by [@toji](https://github.com/toji) and contributors
* [minimal-gltf-loader](https://github.com/shrekshao/minimal-gltf-loader) by [@shrekshao](https://github.com/shrekshao)

Loading