three.js Screen Space Reflections

Implements performant Screen Space Reflections in three.js.

Glossy Reflections

Clean Reflections


Run Locally

If you’d like to test this project and run it locally, run these commands:

git clone
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?);


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,
	maxDepthDifference: 1,
	maxDepth: 1,
	thickness: 10,
	ior: 1.45,
	useMRT: true,
	useNormalMap: true,
	useRoughnessMap: true


  • 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




View Github