Clustered Deferred and Forward Plus Rendering with WebGL

Github repo

Overview

In this project, I have used WebGL to implement Clustered Forward+ and Clustered Deferred renderer.

Clustered Forward + Rendering & Clustered deferred Rendering

Lensflare Effect

Complete requirements

  • Basic Features
    • Clustered Forward+
    • Clustered Deferred
    • Blinn-Phong shading
    • Optimizations using two G- buffers (use total 6 channels)
      • Use 2-component normals
      • Reconstructing world space position
      • Use a screen-filling triangular instead of using quadrilateral
  • Additional Features
    • Lensflare with Bloom using post-process Gaussian blur

Clustered Forward+

Build a data structure to keep track of how many lights are in each cluster and what their indices are.
Then, render the scene using only the lights that overlap a given cluster.

I refered the Avalanche slides’ solution for slicing frustum (Speacial Near).

Clustered Deferred

Reuse clustering logic from Clustered Forward+.
Store vertex attributes in g-buffers.
Read g-buffers in a shader to produce final output.

I used two G-buffers of which structure like below.

Instead of making vertex position G-buffer, reconstructing world space position with depth can prevent the artifact which happens on the area of screen where nothing be drawn.
And, also it can save two channels.

albedo normal position depth

And, using a screen-filling triangular instead of using quadrilateral reduces overload of rendering.
I used this only for one post-processing (Lensflare). But, the more post processes be used, the better rendering performance can be gotten.

Lensflare effect

Lens flare refers to a phenomenon wherein light is scattered or flared in a lens system, often in response to a bright light, producing an undesirable effect on the image.
In order to create this effect, I referred to John chapman’s Lens flare which is not physically-based model.
Of course, Physically-based Lens flare can generate more accurate effects but it is much expensive.
To do this, it needs several independent effects ghosts, halo, diffraction created by very bright Scene color.
And, at the final stage, composite the all effects with dirtmask texture and star burst texture. (below images are designed by me.)

Dirt Mask Texture Star Burst Texture

Performance Analysis

Forward vs Clustered Forward+ vs Clustered Deferred

Resolution : 960 x 540
Number of Lights : 2500
Light’s radius : 3.0
Cluster Dimension : 16 x 16 x 16

Forward Clustered Forward+ Clustered Deferred
ms 125 34 33

Resolution : 1920 x 1080
Number of Lights : 2500
Light’s radius : 3.0
Cluster Dimension : 16 x 16 x 16

Forward Clustered Forward+ Clustered Deferred
ms 333 66 32

The efficient of deferred rendering increases when the scene is drawn on larger screen space.

2 Compacted G-buffer vs 4 G-buffer

Resolution : 1920 x 1080 Number of Lights : 2500 Light’s radius : 3.0 Cluster Dimension : 16 x 16 x 16

2 4
ms 34 34

As we can see, the difference of performance between former and later is really tiny.
I think the time of fetching texels from g-buffers is similar to the time consumed by additional shader codes such as Reconstructing world space position and normal.
But, obviously, in terms of memory, using 2 Compacted G-buffer can save the memory equivalent to 2 G-buffer textures.

Quadrilateral vs Triangular Screen filling

Resolution : 1920 x 1080
Number of Lights : 2500
Light’s radius : 3.0
Cluster Dimension : 16 x 16 x 16
RenderMode : Clustered Deferred Effect

Quadrilateral Triangular
ms 32 32

Credits