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-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)
const effectPass = new POSTPROCESSING.EffectPass(camera, ssgiEffect, traaEffect, motionBlur)
composer.addPass(effectPass)
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
}
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 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:
- 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:
If you'd like, you could also buy me a coffee:
-
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