Can I use ThreeJS realism effects through Needle

🌵 Needle Engine
1

Is it possible to utilise the ThreeJS realism effects from 0beqz when using Needle Engine (GitHub - 0beqz/realism-effects: SSGI, Motion Blur, TRAA - Effects to enhance your three.js scene's realism)

Original Post on Discord

by user 191894382805254144

2

Hi, technically yes (since we also run based on threejs) but I havent tried it in a while. pmndrs postprocessing package is already a dependency of Needle Engine. You can install this package to your project too, create a composer and assign it to the Needle Engine context to use it

3

Let me know if you have any more questions

4

Here’s some very simple example based off of the usage sample here: GitHub - 0beqz/realism-effects: SSGI, Motion Blur, TRAA - Effects to enhance your three.js scene's realism

import { Behaviour } from "@needle-tools/engine";
import * as POSTPROCESSING from "postprocessing"
import { SSAOEffect, HBAOEffect, SSGIEffect, TRAAEffect, MotionBlurEffect, VelocityDepthNormalPass } from "realism-effects"

export class Realism extends Behaviour {
    private _composer: POSTPROCESSING.EffectComposer | null = null
    awake() {
        const renderer = this.context.renderer;
        const scene = this.context.scene;
        const camera = this.context.mainCamera!;

        const composer = new POSTPROCESSING.EffectComposer(renderer)

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

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

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

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

        // SSAO
        const ssaoEffect = new SSAOEffect(composer, camera, scene)

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

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

        composer.addPass(effectPass)

        this._composer = composer
    }
    onEnable(): void {
        this.context.composer = this._composer;
    }
    onDisable(): void {
        this.context.composer = null;
    }
    onDestroy(): void {
        this._composer?.dispose();
    }
}
5

Thanks for the sample as I was having a look at the SSGI effect for a tech demo recently - I am finding I get this error when using this, not sure if a three.js dependency has broken it but I’ll keep investigating and post back if I find a solution to this -

THREE.WebGLProgram: Shader Error 1280 - VALIDATE_STATUS false

Material Name: EffectMaterial
Material Type: ShaderMaterial

Program Info Log: Fragment shader is not compiled.

FRAGMENT

WARNING: 0:451: 'tonemapping_pars_fragment' : unrecognized pragma
ERROR: 0:452: 'OptimizedCineonToneMapping' : no matching overloaded function found
ERROR: 0:452: '=' : dimension mismatch
ERROR: 0:452: 'assign' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'

I have also tried excluding all of the effects and simply commenting out any passes or effects added and doing

    this._composer = composer;

seems to make the scene render a blank screen in the local server

6

Hi @Rob_F I haven’t tried using realism effects for a while since it is apparently abandoned with last updates ~2 years ago

The package states is supports “three”: “^0.151.3” while we’re currently using 169 and latest three is even 179 so it’s quite possible that it stopped working for three. Maybe you can try spinning up a vanilla threejs instance and installing it there.

Here’s a pretty minimal starter Progressive glTF Example: Vanilla three.js - StackBlitz

7

I’ll post back if I can figure it out, as the screen space reflections with resolution scaling seem very powerful!

Just tested in vanilla three.js and the same issue is there, I’ll see if anyone has fixed in a fork