Use own Renderer with Needle Engine?

🌵 Needle Engine
1

Hi,
is it possible to use my own Renderer and Composer with NE? I would like the NE to only control the scene (e.g. with StateMachine), but the entire graphics to be rendered in vanilla Three.js.
Thxs…

2

Hi Armin,

Using your own renderer and composer with Needle Engine (NE) is indeed possible. The key features that can facilitate this integration include:

  1. External Rendering Management: You can create an instance of a Three.js WebGLRenderer and control rendering externally. This means you can implement your own rendering loop without relying on Needle Engine’s default rendering mechanism.

  2. Context Management: You should use context.update method where Needle Engine is informed to stop managing the renderer and camera, allowing you to pass control to your custom setup (see releases).

  3. Possible Customization: You may modify the core rendering parameters of the Needle Engine to integrate your own renderer. This would allow you to implement additional effects or functionalities as needed (see the documentation).

Pseudo Code Outline

  1. Initialize custom Three.js renderer.
  2. Set up custom scene and camera.
  3. In the Needle Engine context, call context.update to manage the update cycle.
  4. During your render loop, invoke rendering using your custom renderer.

Example Code

import { Context } from "@needle-tools/engine";
import { WebGLRenderer, Scene, PerspectiveCamera } from "three";

// Set up your own renderer
const renderer = new WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Set up your custom scene and camera
const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Update Needle Engine context to not manage the renderer
Context.Current.isManagedExternally = true;

// Custom render loop
function render() {
    // update your scene logic and camera
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

requestAnimationFrame(render);

You can use the above structure to customize rendering as per your requirements.

If you have any specific concerns or need assistance with certain aspects of the rendering process, feel free to ask!

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

3

Hi, you can assign your own composer or webgl renderer to the context which will then be used for rendering.

Assign to context.renderer and webgl.composer

Note that we also just use the three.js WebglRenderer, so it is vanilla three.js in that regard.

5

Thxs marwie1,

  1. the example above from the bot throws an error:
    Cannot set properties of undefined (setting 'isManagedExternally')
  2. With
<body>
  <needle-engine src="assets/scene.glb"></needle-engine>
</body>
...

context.renderer = new THREE.WebGLRenderer({antialias: false, powerPreference: "low-power"});
document.body.appendChild(context.renderer.domElement);

....
this.context.composer = this.composer;

does not improve the render speed. In addition, I still cannot make render settings like this.renderer.toneMapping, they do not work?

Which possibilities do I have if I want to completely use my own renderer and composer together with scene handling in NE? Do you have an example pls…

I can’t find any way to increase the render speed with NE compared to vanilla Three.js.

6

I forgot to mention that you can also use context.createNewRenderer(<yourparams>) which would be recommended since it automatically re-uses the existing canvas (if there’s one) which is necessary in cases where your scene has e.g. OrbitControls which subscribes to events on the renderer canvas element for touch/mouse input.

It also correctly disposes the previous renderer + assigns the newly created one.

Here’s an example with both approaches: Needle-engine - Vite Template (forked) - StackBlitz

7

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.