Implements performant Screen Space Reflections in three.js.
Glossy Reflections
Clean Reflections
If you'd like to test this project and run it locally, run these commands:
git clone https://github.com/0beqz/screen-space-reflections
cd screen-space-reflections
npm i
npm run dev
Install the package first:
npm i screen-space-reflections
Then add it to your code like so:
import { SSRPass } from "screen-space-reflections"
const composer = new POSTPROCESSING.EffectComposer(renderer)
const ssrPass = new SSRPass(composer, scene, camera, options?);
composer.addPass(ssrPass)
Default values of the optional options
parameter:
const options = {
width: window.innerWidth,
height: window.innerHeight,
useBlur: true,
blurKernelSize: POSTPROCESSING.KernelSize.SMALL,
blurWidth: window.innerWidth,
blurHeight: window.innerHeight,
rayStep: 0.1,
intensity: 1,
power: 1,
depthBlur: 0.1,
enableJittering: false,
jitter: 0.1,
jitterSpread: 0.1,
jitterRough: 0.1,
roughnessFadeOut: 1,
MAX_STEPS: 20,
NUM_BINARY_SEARCH_STEPS: 5,
maxDepthDifference: 1,
maxDepth: 1,
thickness: 10,
ior: 1.45,
useMRT: true,
useNormalMap: true,
useRoughnessMap: true
}
Description:
-
width
: width of the SSRPass -
height
: height of the SSRPass -
useBlur
: whether to blur the reflections and blend these blurred reflections depending on the roughness and depth of the reflection ray -
blurKernelSize
: the kernel size of the blur pass which is used to blur reflections; higher kernel sizes will result in blurrier reflections with more artifacts -
blurWidth
: the width of the blur pass -
blurHeight
: the height of the blur pass -
rayStep
: how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts -
intensity
: the intensity of the reflections -
power
: the power by which the reflections should be potentiated; higher values will give a more intense and vibrant look -
depthBlur
: how much deep reflections will be blurred (as reflections become blurrier the further away the object they are reflecting is) -
enableJittering
: whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle -
jitter
: how intense jittering should be -
jitterSpread
: how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with -
MAX_STEPS
: the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) -
NUM_BINARY_SEARCH_STEPS
: once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps -
maxDepthDifference
: the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance -
maxDepth
: the maximum depth for which reflections will be calculated -
thickness
: the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance -
ior
: Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies -
useMRT
: WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run -
useRoughnessMaps
: if roughness maps should be taken account of when calculating reflections -
useNormalMaps
: if normal maps should be taken account of when calculating reflections
- Jittering and blurring reflections to approximate glossy reflections
- Using three.js' WebGLMultipleRenderTarget (WebGL2 only) to improve performance when rendering scene normals, depth and roughness
- Early out cases to compute only possible reflections and boost performance
- Blurring reflections using Kawase Blur Pass for better performance over a Gaussian Blur Pass
-
Edge fade for SSR: kode80
-
Colorful smoke picture: Pawel Czerwinski
-
Video texture: Uzunov Rostislav