• Stars
    star
    190
  • Rank 203,739 (Top 5 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 8 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This module implements a volumetric light scattering effect(godrays)

glsl-godrays

This module implements the volumetric light scattering effect(godrays) described in "Volumetric Light Scattering as a Post-Process" as a GLSL shader. A demo is provided at: http://erkaman.github.io/glsl-godrays/

The camera in the demo is controlled as follows:

  • Keys W and S are used to walk forward and backward.
  • Keys A and D are used to stride left and right.
  • Keys O and L are used to fly up and down.
  • Hold down the key M to speed up the camera.
  • Hold down the left mouse button and move the mouse to turn the camera.

text

NPM

Rendering Setup

In order to implement the effect, no less than three rendering passes will have to be done:

  • Pass 1: Render all geometry that could occlude the light source as black. Normally render light source. And render all the above to a texture called the "occlusion texture". Note that this texture does not have to be exactly the size of the screen, but it can be smaller. And by making it smaller, lots of performance can be gained.

  • Pass 2: Render everything normally, to the default framebuffer.

  • Pass 3: Now enable alpha blending, because we will render the volumetric light rays in a fullscreen pass, and combine them with the scene rendered in pass 2 by simply using alpha blending. Also, as input to pass 3, is the "occlusion texture" that was rendered to in pass 1. This texture is used to ensure that unnatural streaks of light do not appear on objects that are occluding the light source.

For more details, please refer to the source code of the provided demo.

Shader Usage

In the third pass, the godrays are rendered in a fullscreen pass, where every fragment gets its color from the following function:

vec3 godrays(
    float density,
    float weight,
    float decay,
    float exposure,
    int numSamples,
    sampler2D occlusionTexture,
    vec2 screenSpaceLightPos,
    vec2 uv
    );

Where the parameters are

  • density please refer to the article "Volumetric Light Scattering as a Post-Process" for a definition of this parameter.
  • weight see the above.
  • decay see the above.
  • exposure see the above.
  • numSamples see the above. However, note that the maximum value of this parameter is 100!
  • occlusionTexture the "occlusion texture" created in pass 1.
  • screenSpaceLightPos the light position in screen space. In the source code of the demo it is shown how this can be calculated.
  • uv the coordinates of the current fragment. Note that x and y should both be in the interval [0,1], over the entire screen.

More Repositories

1

vulkan_minimal_compute

Minimal Example of Using Vulkan for Compute Operations. Only ~400LOC.
C++
697
star
2

regl-cnn

Digit recognition with Convolutional Neural Networks in WebGL
JavaScript
502
star
3

Awesome-CUDA

This is a list of useful libraries and resources for CUDA development.
421
star
4

wireframe-world

An infinite wireframe world in WebGL
JavaScript
357
star
5

poisson_blend

Seamless copy-and-paste of images with Poisson Blending.
C++
335
star
6

gl-water2d

2D liquid simulation in WebGL
JavaScript
286
star
7

hole_fixer

Demo implementation of smoothly filling holes in 3D meshes using surface fairing
C++
250
star
8

cute-deferred-shading

Cute little deferred shading implementation.
C++
137
star
9

gl-catmull-clark

A javascript implementation of the Catmull-Clark subdivision surface algorithm
JavaScript
104
star
10

fluid_sim

Flashy 2D fluid simulations experiments.
C
102
star
11

gl-rock

Procedural Generation of Rocks in WebGL
JavaScript
97
star
12

glsl-worley

Worley noise implementation for WebGL shaders
GLSL
85
star
13

pnp-gui

Minimalistic Immediate Mode GUI toolkit for WebGL
JavaScript
83
star
14

sse-avx-rasterization

Triangle rasterization routines accelerated by SSE and AVX
C++
62
star
15

cloud_gen

Procedural Generation of Clouds with Vector Graphics
C++
49
star
16

webgl-rsm

Real-time Indirect lighting with Reflective Shadows Maps in WebGL
JavaScript
45
star
17

planar_proj_shadows

Demo of Planar Projected Shadows in regl
JavaScript
32
star
18

glsl-cos-palette

glsl function for making cosine palettes
JavaScript
31
star
19

teapot_shooter

Augmented Reality Teapot Shooter made using Unity and ARCore
C#
30
star
20

image-load-store-demo

A small demo and tutorial of the image load/store feature of OpenGL 4
C++
26
star
21

glsl-gradient-palette

Module for creating gradient palettes for usage in glsl.
JavaScript
19
star
22

regl-anim

Some weird animations made with regl and WebGL
JavaScript
17
star
23

regl-fire

Fire particle system made with regl
JavaScript
17
star
24

tess-opt

Demonstration of how we can use tessellation shaders to make faster fragment shaders.
C++
15
star
25

erkaman.github.io

The source code of my website.
HTML
13
star
26

regl-webvr-demo

Demo that shows how to use regl and WebVR together
JavaScript
11
star
27

ffmpeg-add-text-to-video-tutorial

Tutorial that shows how to add text to a video file with ffmpeg
9
star
28

parle-cuda

A reference implementation of RLE in CUDA
Cuda
9
star
29

NeoTextureEdit2

Fork of NeoTextureEdit that fixes several things.
Java
8
star
30

regl-stats-widget

Small widget for displaying statistics of regl
JavaScript
8
star
31

gl-quads-to-tris

WebGL helper module that converts an array of quad indices to an array of triangles indices
JavaScript
7
star
32

spiky-anim

The source code of some silly spiky animation I made
C++
7
star
33

smiley

:^) :^) :^) :^) :^) :^), :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^).
JavaScript
6
star
34

particle-simd

SIMD-accelerated particle simulation in C++
C++
5
star
35

digital-image-formats

An exploration of the inner workings of digital image formats.
C++
3
star
36

gl-camera-pos-from-view-matrix

A helper module that allows you to recover the camera position from a view matrix
JavaScript
3
star
37

regl-cpp

Remaking regl in C++
C
3
star
38

font_creator_cpp

A simple program that creates a font atlas using FreeType
C++
2
star
39

scan_shift_jis.rb

Small utility for scanning Shift-JIS encoded strings in a file.
Ruby
1
star
40

smw-tools

Java
1
star
41

font_sheet.py

Python
1
star
42

cloth

C++
1
star
43

BrainfuckSharp

A Brainfuck compiler for the .NET framework.
C#
1
star
44

sculpture

C++
1
star
45

dotfiles

My miscellaneous configuration files.
Emacs Lisp
1
star
46

aabb_create

Small utility for computing an AABB from a wavefront object file.
C++
1
star
47

texture-editor

C++
1
star