How to use SSR in Needle Engine?

🌵 Needle Engine
1

Hi, I’m currently using SSRPass in Three.js. As far as I understand, the Needle Engine uses the pmndrs postprocessing package. However, this doesn’t support SSR. Is there perhaps an example of how I can integrate this into my Needle Engine project with vanilla Three.js:

this.ssrPass = new SSRPass({
...
});

this.composer.addPass(this.ssrPass);

Thanks…

2

Hi Armin,

To implement Screen Space Reflections (SSR) in Needle Engine, you’re right that the engine currently doesn’t support SSRPass directly via the pmndrs postprocessing package. However, you can integrate it manually in your project using vanilla Three.js.

Here’s a step-by-step approach to incorporating SSRPass into your Needle Engine project:

  1. Create a Shader Material: You will need to create a custom shader material for SSR.

  2. Initialize the SSRPass: Use the SSRPass from Three.js.

  3. Add it to your Render Loop: Add the pass to your rendering pipeline.

Here’s an example code snippet:

import { SSRPass } from 'three/examples/jsm/postprocessing/SSRPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { WebGLRenderTarget } from 'three';

// Setup the composer
this.renderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight);
this.composer = new EffectComposer(this.renderer, this.renderTarget);

// Instantiate SSRPass
this.ssrPass = new SSRPass({
    scene: this.scene,
    camera: this.camera,
    width: window.innerWidth,
    height: window.innerHeight,
});

// Add the SSRPass to the composer
this.composer.addPass(this.ssrPass);

// Add any other passes (like final pass)

In your render loop, you would call:

this.composer.render();

You may also want to adjust the SSRPass parameters according to your scene’s needs.

For details on the SSRPass API, you can refer to the Three.js SSR documentation.

Make sure to integrate this setup in a way that aligns with how Needle Engine manages its rendering pipeline. If you run into specific issues while implementing, providing error messages or additional context can help narrow down the problem.

Feel free to ask if you have further questions or need more clarification!

1 replies left - Get a PRO license for more AI replies.
thread_2ZRMgWkmFUxnXMjOlvwstwVH
Reply to this message to continue the conversation

3

Hi, I think that’s related to this issue here: Implement SSREffect · Issue #571 · pmndrs/postprocessing · GitHub

For Needle Engine: Instead of using the postprocessing effects that Needle Engine uses you can also create the effect composer yourself (like you’re doing in vanilla three.js) and just set it on the context e.g. from one of your components. Just don’t use the Volume component in Unity then.

Here’s a tiny example:

export class MyPostProcessing extends Behaviour {

  onEnable() {
     const composer = new EffectComposer(...);
     // add your effect passes
     this.context.composer = composer
   }
}

Edit: I’m currently preparing an example and noticed that there’s a regression - will provide a fix in the next update

Edit2: Fixed in latest beta that was just released. Below is a bit of code that you can copy paste in your main.ts OR create a component in src/scripts and manage it from Unity. The code is basically how the SSR example of three.js works

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { SSRPass } from 'three/examples/jsm/postprocessing/SSRPass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
import { PlaneGeometry } from "three";
import * as THREE from "three";
import { onStart } from '@needle-tools/engine';

onStart((context) => {
    const { scene, renderer } = context;
    const camera = context.mainCamera;

    const selects = new Array();

    let geometry, material, mesh;
    geometry = new PlaneGeometry(1, 1);

    const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(1, 1),
        new THREE.MeshPhongMaterial({ color: 0xcbcbcb })
    );
    plane.rotation.x = - Math.PI / 2;
    plane.position.y = - 0.0001;
    // plane.receiveShadow = true;
    scene.add(plane);


    geometry = new THREE.BoxGeometry(.05, .05, .05);
    material = new THREE.MeshStandardMaterial({ color: 'green' });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(- .12, .025, .015);
    scene.add(mesh);
    selects.push(mesh);

    geometry = new THREE.IcosahedronGeometry(.025, 4);
    material = new THREE.MeshStandardMaterial({ color: 'cyan' });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(- .05, .025, .08);
    scene.add(mesh);
    selects.push(mesh);

    geometry = new THREE.ConeGeometry(.025, .05, 64);
    material = new THREE.MeshStandardMaterial({ color: 'yellow' });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(- .05, .025, - .055);
    scene.add(mesh);
    selects.push(mesh);

    const composer = new EffectComposer(renderer);
    composer.setSize(window.innerWidth, window.innerHeight);
    const ssrPass = new SSRPass({
        renderer,
        scene,
        camera,
        width: innerWidth,
        height: innerHeight,
        groundReflector: null, //groundReflector,
        selects: null, //selects,
    });

    composer.addPass(ssrPass);
    composer.addPass(new OutputPass());
    context.composer = composer;
});
4

Hello Armin,

I’ve added an example here: Needle Engine: Three.js SSR - StackBlitz

5

Thanks marwie1! I checked ssrPass + ReflectorForSSRPass, ssaoPass and fxaaPass. Seems to work, but not OutputPass (will create new Topic) and I get a Typescript Error at

this.console.composer = composer;

Type ‘EffectComposer’ is missing the following properties from type ‘EffectComposer’: inputBuffer, outputBuffer, autoRenderToScreen, multisampling, and 8 more.ts(2740)
(property) Context.composer: EffectComposer | null

6

That sounds like you’re not using the right engine version. Which version are you on right now? Please make sure you’re on 4.3.2 Releases & Changelogs - #100 by needle-bot

7

I have installed Blender addon 0.52.5 with NE 3.51.4 und Node 22.11.0. On Releases & Changelogs it seems the most recent version for blender. How can I get the NE 4.3.2 for Blender, update via npm?

8

Will the Blender plugin support the Needle Engine 4.x in the future? Thanks…

9

Yes, the Blender plugin should be updated to Needle Engine 4 in the next weeks, but we don’t have a concrete ETA right now. Thanks for your patience!