/screen-space-reflections

Implements Screen Space Reflections in three.js

Primary LanguageJavaScriptMIT LicenseMIT

three.js Screen Space Reflections

Implements performant Screen Space Reflections in three.js.

Glossy Reflections

Clean Reflections


Demo

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
npm i
npm run dev

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(composer, 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: 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

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

Credits

Resources