GithubHelp home page GithubHelp logo

ld-laowu / glsl-godrays Goto Github PK

View Code? Open in Web Editor NEW

This project forked from erkaman/glsl-godrays

1.0 0.0 0.0 774 KB

This module implements a volumetric light scattering effect(godrays)

Home Page: http://erkaman.github.io/glsl-godrays/

License: Other

GLSL 15.84% JavaScript 84.16%

glsl-godrays's Introduction

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.

glsl-godrays's People

Contributors

erkaman avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.