Deferred Rendering & Post Processing

Demo Link

Overview

This project is an exercise about deferred rendering and post processing based on UPenn's CIS-566 Procedural Graphics using WebGL 2.0.

One 32-bit RGBA texture and one 8-bit RGBA texutre are used as G-buffers, here is the structure of G-buffer:

The result we get after the first render to g-buffer pass:

albedo	camera space depth	normal

HDR & LDR tone mapping is implemented to better preserve and recover color. In terms of some implementation details, I refer to Filmic Worlds blog.

Here are three comparsion of different tone mapping methods:

optimized formula by Jim Hejl and Richard Burgess-Dawson	Reinhard	Uncharted 2 operator

Post-Processing

Here is the original render, just for the comparison after post processing.

Bloom

The first pass of Bloom post processing is the brightness filter, which is later used as an input of Gaussian Blur pass(former by horizontal gaussian blur pass and then vertical gaussian blur pass). After that, I just combine it with the original render and get the final render. I made this base on my pervious CIS-565 WebGL Clustered Deferred and Forward-Plus rendering project.

brightness filter pass	horizontal blur pass	vertical and horizontal blur pass

and finally, after we combine it with the original render, we have

God Ray

This effect requires an "occlusion pre-pass" as the input framebuffer. This means rendering all geometry as black ( (0, 0, 0), representing occlusion of light source ) and light source as normally would, which should yield a framebuffer looking something like this. The godRay shader (different from the occlusion pre-pass shader) then computes a screen-space direction from a given fragment towards the light source(s). Repeatedly sample your image n times, stepping some amount along the light direction, accumulating the sampled color to effectively perform a blur. That should yield something like this. From there, blend these blurred rays with the framebuffer containing the actual rendered scene and get the final render.

Here are the results after each pass,

occlusion pass	accumulating pass

and the final render,

Cartoon

This post processing effect is base on my previous CIS565 BabylonJS Project. Basically, there are two parallel post processing pipelines. The first one use Sobel filter to detection edges and draw them as black lines. The second one use a Kuwahara post processing effect to get some "Cartoon" feeling and then sample a paper texutre, blending it with the previous Kuwahara effect. Finally, we combine these two frames in a multiply way and add a frame to make it more "Cartoon"-like.

Here are the results after each pass,

Edge detect(sobel filter)	Kuwahara	Paper effect

and the final render,

Digital Rain

This effect is inspired by the BabylonJS Digital Rain Effect. Bascially, we divide the screen accroding one single font width and make them tiles, then fill these tiles with "fonts" sampling from the texture.

Here is the final render,