Why is renderspeed with Needle Engine in comparsion to three.js slow?

🌵 Needle Engine
1

Why is renderspeed with Needle Engine in comparison to three.js so slow? In all cases I use exact the same scene, camera, lighting and postprocessing (renderPass, ssrPass, ssaoPass, fxaaPass, outputPass)

  1. Vanilla Three.js: 60fps => 30% GPU
  2. Vanilla Three.js: 30fps => 15% GPU
  3. NE: 60fps => 38% GPU
    onInitialized((context : Context) => {
    …
    this.context.composer = composer;
    });
  4. NE: 60fps => 70% GPU
    onUpdate((context : Context) => {
    …
    this.context.composer = composer;
    });

I must use composer in update to use Stats() and limit max. fps and thus GPU load.

How can I reduce GPU load in NE WITHOUT changing post-processing? Why does update() consume so much more GPU power? Thanks…

2

Hi Armin,

The difference in render speed between Needle Engine (NE) and vanilla Three.js (3D) can arise from various factors, particularly how NE handles rendering and lifecycle events.

  1. Lifecycle Handling: Your use of onInitialized vs onUpdate can significantly impact performance. Using onUpdate may lead to continuous re-setup of the composer, which can consume more GPU resources. Ensure that heavy operations are minimized or run only once where possible.

  2. GPU Load: You mentioned a higher GPU load with NE in the onUpdate cycle (70% vs. 30% on stable 60 fps). This could be due to unnecessary recomputations of post-processing effects or too frequent updates of the rendering pipeline. Consider optimizing how often you update the composer.

  3. Framework Optimization: NE may include additional overhead for features like collision detection or physics that Three.js doesn’t necessarily engage unless configured to do so. Try disabling or optimizing any additional features in NE that might be active during your renders.

  4. Post-Processing Effects Impact: You aim to keep your post-processing the same between NE and Three.js, but ensure that the way it is implemented in NE is optimally configured. For instance, check if you can lower the resolution or frequency of certain effects without losing quality.

Suggestions:

  • Use onInitialized for one-time setup and limit heavy operations in onUpdate.
  • Look into the API for ways to cache results from frame to frame rather than recalculating.
  • Ensure that you’re not creating new instances of high-cost objects within your update logic without necessity.

For more specific improvements, consider profiling your NE application to pinpoint where the GPU load is highest and adjusting your coding practices accordingly. Performance bottlenecks can often be revealed through careful analysis of how and when certain rendering processes are initiated.

If the above suggestions do not align with your specific implementation needs, please provide more details regarding your scene configuration, NE version, and how you handle post-processing to further assist.

You can refer to the Needle Engine documentation to delve deeper into lifecycle management and performance optimization (see the documentation).

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

3

Hey, there should be no big difference in terms of performance, and certainly not to the extent you’re showing here. Managing component lifecycle does of course use some CPU cycles but nothing that should show up as 30% or more slowdown as you’re measuring here.

That being said, I don’t think you should set composer in every onUpdate() – are you doing that in your three.js comparison as well?

Would you be able to submit reproduction projects for the scenarios that you’re outlining here, so that we can take a closer look? Thanks!