Home

Awesome

three.js Realism Effects

ℹ Note: A new version of SSGI (version 2) and realism-effects in general is currently in the works. You can checkout the most recent progress on the v2 branch. It features many performance and quality improvements over the current released version. <br> <br> realism-effects is collection of the following effects for three.js:

<br>

ℹ️: You can explore the demos by clicking on the images

<br>

Usage

This effect uses postprocessing.js. If you don't have it installed, install it like so:

npm i postprocessing

Then install this effect by running:

npm i realism-effects

Then add it to your code like so:

import * as POSTPROCESSING from "postprocessing"
import { SSGIEffect, TRAAEffect, MotionBlurEffect, VelocityDepthNormalPass } from "realism-effects"

const composer = new POSTPROCESSING.EffectComposer(renderer)

const velocityDepthNormalPass = new VelocityDepthNormalPass(scene, camera)
composer.addPass(velocityDepthNormalPass)

// SSGI
const ssgiEffect = new SSGIEffect(scene, camera, velocityDepthNormalPass, options?)

// TRAA
const traaEffect = new TRAAEffect(scene, camera, velocityDepthNormalPass)

// Motion Blur
const motionBlurEffect = new MotionBlurEffect(velocityDepthNormalPass)

// HBAO
const hbaoEffect = new HBAOEffect(composer, camera, scene)

const effectPass = new POSTPROCESSING.EffectPass(camera, ssgiEffect, hbaoEffect, traaEffect, motionBlur)

composer.addPass(effectPass)

NOTE: OrthographicCamera isn't supported yet. Only PerspectiveCamera is supported at the moment. It'll be supported in the future.

SSGI

NOTE:

SSGI is being reworked in the branch poisson-recursive which provides far better performance, quality and memory usage over the current version of the main branch. You can check out the up-to-date demo here. <br> Keep in mind that it is a WIP version and thus issues like device-specific rendering issues will be adressed later on.

To-Dos:

Options

<details> <summary>Default values of the optional "options" parameter</summary> 
const options = {
	distance: 10,
	thickness: 10,
	denoiseIterations: 1,
	denoiseKernel: 2,
	denoiseDiffuse: 10,
	denoiseSpecular: 10,
	depthPhi: 2,
	normalPhi: 50,
	roughnessPhi: 1,
	specularPhi: 1,
	envBlur: 0.5,
	importanceSampling: true,
	steps: 20,
	refineSteps: 5,
	resolutionScale: 1,
	missedRays: false
}
</details> <br>

Notes

If you use SSGI, then you don't have to use the RenderPass anymore as SSGI does the rendering then. You can save performance by leaving it out. Keep in mind that then you need to put TRAA and Motion Blur in a separate pass like so:

const effectPass = new POSTPROCESSING.EffectPass(camera, ssgiEffect)
const effectPass2 = new POSTPROCESSING.EffectPass(camera, traaEffect, motionBlur)

composer.addPass(effectPass)
composer.addPass(effectPass2)
<br>

Finding the right options through using a GUI

❗ Highly recommended: Use a GUI to tweak the options

Since the right options for an SSGI effect (or for other effects provided by realism-effects) depend a lot on the scene, it can happen that you don't seem to have an effect at all in your scene when you use the SSGI effect for the first time in it without any configuration. This can have multiple causes such as distance being way too low for your scene for example. So to find out which SSGI options are right for your scene, you should use a GUI to find the right values easily. The example already comes with a simple one-file GUI SSGIDebugGUI.js that you can use in your project like so:

npm i tweakpane

import { SSGIDebugGUI } from "./SSGIDebugGUI"

const gui = new SSGIDebugGUI(ssgiEffect, options)

That's it, you should now have the GUI you can see in the example scene. The options parameter is optional for the SSGIDebugGUI and will default to the default options if no options parameter is given.

Besides for SSGI, there are also debug GUIs for more effects. You can copy the following debug GUIs from the repository:

Run Locally

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

git clone https://github.com/0beqz/realism-effects
cd realism-effects/example
npm i --force
npm run dev

Sponsoring

If the project is useful for you and you'd like to sponsor my work:

GitHub Sponsors

If you'd like, you could also buy me a coffee:

"Buy Me A Coffee"

Todos

Credits

Demo Scene

Possible Future Work

Screen Space Horizon GI

Screen Space Contact Shadows

Resources

Raytracing

Tracing in screen-space

Temporal Reprojection

HBAO

Lens Distortion