All Projects → Erkaman → Glsl Godrays

Erkaman / Glsl Godrays

Licence: other
This module implements a volumetric light scattering effect(godrays)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Glsl Godrays

Tess Opt
Demonstration of how we can use tessellation shaders to make faster fragment shaders.
Stars: ✭ 13 (-91.61%)
Mutual labels:  glsl, shaders, shader, demo
Langterm
🕹️ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure
Stars: ✭ 35 (-77.42%)
Mutual labels:  webgl, glsl, shaders, demo
Glsl Worley
Worley noise implementation for WebGL shaders
Stars: ✭ 66 (-57.42%)
Mutual labels:  webgl, glsl, shaders, shader
Curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Stars: ✭ 1,039 (+570.32%)
Mutual labels:  webgl, glsl, shaders, shader
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+7447.1%)
Mutual labels:  webgl, glsl, shaders, shader
Sky Shader
☀️ WebGL sky and sun shader editor
Stars: ✭ 90 (-41.94%)
Mutual labels:  webgl, glsl, shader, demo
Regl Fire
Fire particle system made with regl
Stars: ✭ 16 (-89.68%)
Mutual labels:  webgl, glsl, demo
Wagner
Effects composer for three.js
Stars: ✭ 930 (+500%)
Mutual labels:  webgl, glsl, shaders
Month Of Shaders
One GLSL shader for every day of the month August
Stars: ✭ 12 (-92.26%)
Mutual labels:  webgl, glsl, shaders
Shader Doodle
A friendly web-component for writing and rendering shaders.
Stars: ✭ 356 (+129.68%)
Mutual labels:  webgl, glsl, shaders
Fsynth
Web-based and pixels-based collaborative synthesizer
Stars: ✭ 146 (-5.81%)
Mutual labels:  webgl, glsl, shaders
Solarsys
Realistic Solar System simulation with three.js
Stars: ✭ 49 (-68.39%)
Mutual labels:  webgl, glsl, shaders
Polygon Shredder
The polygon shredder that takes many cubes and turns them into confetti
Stars: ✭ 686 (+342.58%)
Mutual labels:  webgl, glsl, demo
Regl Cnn
Digit recognition with Convolutional Neural Networks in WebGL
Stars: ✭ 490 (+216.13%)
Mutual labels:  webgl, glsl, demo
Veda
⚡VJ / Live Coding on Atom⚡
Stars: ✭ 373 (+140.65%)
Mutual labels:  webgl, glsl, shaders
Glsl Grid
Draws an antialiased grid along the X/Y/Z direction of a mesh.
Stars: ✭ 57 (-63.23%)
Mutual labels:  webgl, glsl, shader
Wireframe World
An infinite wireframe world in WebGL
Stars: ✭ 347 (+123.87%)
Mutual labels:  webgl, glsl, demo
Thebookofshaders
Step-by-step guide through the abstract and complex universe of Fragment Shaders.
Stars: ✭ 4,070 (+2525.81%)
Mutual labels:  glsl, shaders, shader
Glslcanvas
Simple tool to load GLSL shaders on HTML Canvas using WebGL
Stars: ✭ 1,067 (+588.39%)
Mutual labels:  webgl, glsl, shaders
Glsleditor
Simple WebGL Fragment Shader Editor
Stars: ✭ 1,345 (+767.74%)
Mutual labels:  webgl, glsl, shaders

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].