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

Armin_Fuchs · April 4, 2025, 8:07am

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)

Vanilla Three.js: 60fps => 30% GPU
Vanilla Three.js: 30fps => 15% GPU
NE: 60fps => 38% GPU
onInitialized((context : Context) => {
…
this.context.composer = composer;
});
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 · April 4, 2025, 8:07am

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.

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.
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.
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.
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 · April 4, 2025, 8:10am

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 · April 9, 2025, 7:36am

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 · April 9, 2025, 11:59am

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 · April 10, 2025, 1:01pm

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 · April 15, 2025, 9:06am

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 · April 15, 2025, 9:15am

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 · April 15, 2025, 9:21am

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 · April 15, 2025, 9:30am

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!

Armin_Fuchs · April 22, 2025, 9:00am

Yeh, different three.js versions I asked here in this post already and made some GPU benchmarks:

Vanilla Three.js (0.175.0): 13%
Vanilla Three.js (0.162.0): 14%
NE (0.162.12): 17% / also with Build Dev/Build Production

no environment image setup
same .gdb file
no Render AA (MSAA)
exactly same three.js postprocessing

static _defaultWebglRendererParameters = {
        antialias: false, // ### true
        alpha: false,
        // Note: this is due to a bug on OSX devices. See NE-5370
        powerPreference: (DeviceUtilities.isiOS() || DeviceUtilities.isMacOS()) ? "default" : "high-performance",
    };

no file compression
no textures
I think Multisampling=1 makes no difference because I’m only using three.js postprocessing?

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), // ###
            });
        }

Vanilla Three.js

NE:

There are slight differences, unfortunately I don’t know the NE internal render settings.

Unfortunately I cannot distribute proprietary code here, but its the same. I could send the .blend file? Can I somewhow update three@npm:@needle-tools/three@0.162.12? Thxs…

Topic		Replies	Views
Low performance when using post processing in comparison to vanilla threejs 🌵 Needle Engine question	16	26	March 14, 2025
Use own Renderer with Needle Engine? 🌵 Needle Engine question	5	49	April 24, 2025
FPS limit 🌵 Needle Engine question	29	46	April 4, 2023
Performance issue on production Build 🌵 Needle Engine question	34	44	August 26, 2023
Immediate mode? 🌵 Needle Engine question	8	15	September 19, 2023

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

Suggestions:

Related topics