A collection of the following effects for three.js:

• SSGI
  
  
  
  
  
  
  
  
• Motion Blur
  
  
  
  
• TRAA
  TRAA (left)    No Anti-Aliasing (right)
  
  
  
  AA comparison scenes: Model Comparision, General Comparison

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

• SSR
• SSDGI

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-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)

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
}

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.

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

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

• SSR code: Screen Space Reflections on Epsilon Engine

• Edge fade for SSR: kode80

• Velocity Shader: three.js sandbox

• Mercedes-Benz AMG-GT 2015: Márcio Meireles
• 2019 Chevrolet Corvette C8 Stingray: Hari
• Clay Bust Study: lomepawol
• Cyberpunk Bike: Roman Red
• Cyber Samurai: KhoaMinh
• Darth Vader: Brad Groatman
• Flashbang Grenade: Nikolay Kudrin
• SPY-HYPERSPORT Motorbike: Amvall
• Laocoon and His Sons Statue: Rigsters
• Squid Game PinkSoldier: Jaeysart
• Berserk Guts Black Swordsman: gimora
• Time Machine (from TRAA demo scene): vertexmonster

• Rendering view dependent reflections using the graphics card

• Screen Space Reflections in Unity 5

• Screen Space Glossy Reflections

• Screen Space Reflection (SSR)

• Approximating ray traced reflections using screenspace data

• Screen Space Reflection Techniques

• Shiny Pixels and Beyond: Real-Time Raytracing at SEED

• DD2018: Tomasz Stachowiak - Stochastic all the things: raytracing in hybrid real-time rendering (YouTube)

• Real-Time Reflections in Mafia III and Beyond

• Temporal Reprojection Anti-Aliasing in INSIDE

• Reprojecting Reflections

• Temporal AA (Unreal Engine 4)

• Temporally Reliable Motion Vectors for Real-time Ray Tracing

• Temporal AA and the quest for the Holy Trail

• Visibility TAA and Upsampling with Subsample History

• Temporal Anti Aliasing – Step by Step

• Filmic SMAA: Sharp Morphological and Temporal Antialiasing