/realism-effects

SSGI, Motion Blur, TRAA - effects to enhance your three.js scene's realism

Primary LanguageRoffMIT LicenseMIT

three.js Realism Effects

A collection of the following effects for three.js:

  • SSGI







  • Motion Blur



  • TRAA
    TRAA (left)    No Anti-Aliasing (right)



If you only want reflections or diffuse lighting from SSGI, then you can also use these effects too:

  • SSR
  • SSDGI

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 } from "realism-effect"

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)

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

composer.addPass(effectPass)

Options

Default values of the optional "options" parameter 
const options = {
	distance: 10,
	thickness: 10,
	autoThickness: false,
	maxRoughness: 1,
	blend: 0.9,
	denoiseIterations: 1,
	denoiseKernel: 2,
	denoiseDiffuse: 10,
	denoiseSpecular: 10,
	depthPhi: 2,
	normalPhi: 50,
	roughnessPhi: 1,
	envBlur: 0.5,
	importanceSampling: true,
	directLightMultiplier: 1,
	maxEnvLuminance: 50,
	steps: 20,
	refineSteps: 5,
	spp: 1,
	resolutionScale: 1,
	missedRays: false
}

❗ Highly recommended: Use a GUI to tweak the options

Since the right options for an SSGI effect 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 `` 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:

  • First install the npm package of the module used for the GUI:
npm i tweakpane
  • then just copy the SSGIDebugGUI.js to your project and initialize it like so in your scene:
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.

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:

"Buy Me A Coffee"

Credits

Resources

Tracing in screen-space

Temporal Reprojection