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

[Armin_Fuchs]

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…

[needle-assistant (Needle Engine Assistant)]

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

[Felix_Herbst]

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!

[Armin_Fuchs]

Hi Felix,
I changed the code and it’s much faster now. BUT the difference becomes significantly greater with increasing resolution. Generally, I would expect the CPU load to be higher, but why the GPU, and especially with increasing resolution? Could it be due to the different Three.js versions? Thanks…

From

onInitialized((context : Context) => {
   context.composer = composer;
});
onUpdate((context : Context) => {
  ...
  context.composer?.render();
  ...
});

to

onInitialized((context : Context) => {
   context.targetFrameRate = 30;
   context.composer = composer;
});

onUpdate((context : Context) => {
 ...
});

GPU Load:
(Same scene / renderer / postprocessing settings, same resolution, different Three.js?,…)

Small Window (half UW-FHD)
Vanilla Three.js (0.173.0) : 19%
NE (0.162.12): 21%

Large Window (UW-FHD)
Vanilla Three.js: 22%
NE: 32%

[krizzl0r]

Hi, could it be MSAA being enabled (multisampling>0)? I stumbled upon that too here: Low performance when using post processing in comparison to vanilla threejs

[marwie1 (marwi)]

Hello Armin,

do you have a link to your three.js scene and blend file or could share those with us?
And you’re using Needle Engine 3.54 if I’m not mistaken?

[Armin_Fuchs]

Hi krizzl0r, thxs! I just tried

if (!this._composer) {
            // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
            this._composer = new EffectComposer(renderer, {
                frameBufferType: HalfFloatType,
                stencilBuffer: true,
                multisampling: 0 //Math.min(DeviceUtilities.isMobileDevice() ? 0 : 0, maxSamples), // ###
            });
        }

in PostProcessingHandler.js + clear of .vite/deps folder, unfortunately no fps improvement. Maybe because I’m using the composer via

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

?

[Armin_Fuchs]

Last benchmark:

GPU Load:
(Same scene / renderer / postprocessing settings, same resolution)

Small Window (half UW-FHD)
Vanilla Three.js (0.173.0) : 14%
NE (0.162.12): 18%

Large Window (UW-FHD)
Vanilla Three.js: 21%
NE: 25%

For my requirements, the difference of 4% is still too high.

[Armin_Fuchs]

Hi marwie1, here the simplified code:

onInitialized((context : Context) => {
        context.targetFrameRate = 30;

        const composer = new EffectComposer(this.renderer);
        composer.setSize(window.innerWidth, window.innerHeight);

        const renderPass = new RenderPass(this.scene, this.camera);
        composer.addPass(renderPass);

        const ssaoPass = new SSAOPass(this.scene, this.camera);
        composer.addPass(ssaoPass);

        this.ssrPass = new SSRPass({
            ...
        });     
        composer.addPass(this.ssrPass);
        
        const fxaaPass = new ShaderPass(FXAAShader);
        composer.addPass(fxaaPass);

        const outputPass = new OutputPass();
        composer.addPass(outputPass);
    
        this.context.composer = composer;
});

[Felix_Herbst]

Generally I think you’re comparing things that are not comparable here (e.g. very different three.js versions, unclear if same environment image setup, unclear if same scene setup, antialiasing settings, file compression, and so on…).

Could you provide an actual reproduction project as Marcel has requested so we can see what you’re comparing here? Thanks!