three.js Screen Space Reflections
Implements performant Screen Space Reflections in three.js.
Glossy Reflections
Clean Reflections
Example scene
Demos
react-three-fiber demos:
Run Locally
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/example
npm i --force
npm run dev
Usage
If you are using react-three-fiber, you can also use the SSR component from react-postprocessing. Check out the react-three-fiber demos to see how it's used there.
Basic usage:
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(scene, camera, options?)
composer.addPass(ssrPass)
Options
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: 3,
maxDepth: 1,
thickness: 10,
ior: 1.45,
stretchMissedRays: false,
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 -
jitterRough: how intense jittering should be in relation to a material's roughness -
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 -
stretchMissedRays: if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle -
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
Features
- 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
Tips
Getting the right look
SSR usually needs a lot of tweaking before it looks alright in a scene, so using a GUI where you can easily modify all values is highly recommended. The demo uses tweakpane as the GUI. If you want to use it, check out how it's initalized and used in the demo: https://github.com/0beqz/screen-space-reflections/blob/main/src/index.js.
Handling noise
To smooth out noise from jittering, set the blurKernelSize to 2 or 3 and increase depthBlur precisely while using rather low values for blurWidth and blurHeight. This will blur out reflections the "deeper" they are.
Getting rid of artifacts
If you are getting artifacts, for example:
Then try the following:
- increase
thickness - increase
maxDepthDifference - increase
maxDepthor set it directly to 1 - decrease
rayStepand increaseMAX_STEPSif reflections are cutting off now - increase
NUM_BINARY_SEARCH_STEPS
Keep in mind that increasing these values will have an impact on performance.
Hiding missing reflections
Since SSR only works with screen-space information, there'll be artifacts when there's no scene information for a reflection ray. This usually happens when another objects occludes a reflecting object behind it.
To make missing reflections less apparent, use an env-map that can then be used as a fallback when there is no reflection. Ideally use a box-projected env-map.
Here are two implementations for three.js and react-three-fiber:
Todos
- Add Temporal Filtering to reduce noise
Credits
-
Edge fade for SSR: kode80
-
Colorful smoke picture: Pawel Czerwinski
-
Video texture: Uzunov Rostislav
3 Jun 28, 2022
6 Mar 29, 2022
4 Mar 13, 2022
2 Apr 6, 2022
3 Jan 27, 2022
7 Nov 2, 2022
4 Oct 31, 2022
7 Sep 22, 2022
7 Sep 30, 2022
6 Oct 4, 2022
22 Nov 2, 2022
3 Oct 12, 2022
6 Nov 6, 2022
66 Dec 24, 2022
4 Apr 24, 2022
9 May 31, 2022
5 Dec 5, 2022
29 Dec 5, 2022
389 Dec 29, 2022