How to set renderer.setPixelRatio(1)?

🌵 Needle Engine
1

Hi,
it seems that renderer.setPixelRatio(window.devicePixelRatio) is set by default in the NE, but I want renderer.setPixelRatio(1) because the sharpness is usually sufficient. How can I set this value permanently? It seems like it’s overwritten internally with every update()? Thanks…

2

Hello Armin,

To set renderer.setPixelRatio(1) permanently in Needle Engine, you’ll want to modify the section in your code where you’re updating the renderer’s settings, particularly inside the updateSize function.

Currently, the renderer’s pixel ratio is set to window.devicePixelRatio in the updateSize function, which is called repeatedly during updates. To enforce a fixed pixel ratio, you can change it to always use 1.

Here’s how you can do it:

  1. Locate the updateSize method in the engine_context.ts file.
  2. Replace this.renderer.setPixelRatio(window.devicePixelRatio); with this.renderer.setPixelRatio(1);.

Here’s the updated section of the code for clarity:

/** update the renderer and canvas size */
updateSize(force: boolean = false) {
    if (force || (!this.isManagedExternally && this.renderer.xr?.isPresenting === false)) {
        this._sizeChanged = false;
        const scaleFactor = this.resolutionScaleFactor;
        let width = this.domWidth * scaleFactor;
        let height = this.domHeight * scaleFactor;
        // ... other code ...
        this.renderer.setSize(width, height, true);
        this.renderer.setPixelRatio(1); // Set pixel ratio to 1 permanently
        // ... other code ...
    }
}

By making this change, the pixel ratio will consistently be set to 1 during each update cycle.

If you find that this change doesn’t persist as expected, check if there’s an additional part of the code that updates the renderer settings after your modification.

Feel free to ask if you need further assistance or if you have any other questions!

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

3

Hello Armin,

The device pixel ratio is set during the update loop when/if the window or canvas size changes. It’s currently set to window.devicePixelRatio as you say.

I’ll add an option to the next beta so you can disable this behaviour and manage the pixel ratio in your own code.

Update: In 4.4.0-beta.6 you can change devicePixelRatio on the Needle Engine context to either manual (so Needle Engine doesnt modify it anymore at all, just keep in mind that if you’re using postprocessing effects you need to update the value on the composer) or any number / factor you’d like (e.g. hardcode context.devicePixelRatio = 1)

4

Thxs marwie1! I will test it, until then here a fallback solution:

  1. Search for engine_context.js
  2. Change
this.renderer.setPixelRatio(1);
this.composer.setPixelRatio?.call(this.composer, 1);
  1. Clear node_modules/.vite/deps