Any tips for 4k rendering optimization?

🌵 Needle Engine
1

Is there anything out the box that is useful for resolution scaling on different display resolutions? Working on a client project targeting 4k but we don’t have AMD FSR or Nvidia DLSS on the web from what I can see. Do you guys use anything to limit resolution or upscale the view?

Original Post on Discord

by user 103054507105067008

2

I’m almost thinking like a clamp on resolution to say don’t render natively higher than 1920x1080

by user 103054507105067008

3

The resolution is defined by the domElement width and height where the needle-engine component is in. You could call this.context.renderer.setSize(width, height) to change that programmatically (this.context.domWidth gives you the current size)

4

Sweet, would that still scale okay if the screen is 4k? Will test this afternoon :+1:

by user 103054507105067008

5

Right now you would need some additional css to make the renderer canvas scale, in js you could do it like this
unknown.png

6

gives you this beautiful rendering (0.1 scale just for testing)

unknown.png
unknown.png1353×1068 84.1 KB

7

Super useful, thanks!

by user 103054507105067008

8

will add this.context.resolutionScaleFactor for the next version

9

That’s brilliant, makes it easier to change that between projects and keep it consistent

by user 103054507105067008

10

I guess I would read the screen resolution in code and set it appropriately if the resolution is above 1920x1080 I could half the scale factor or similar

by user 103054507105067008

11

Yes. this.context.domWidth will still be your actual resolution

12

@ROBYER1 just published

13

wondering - can we adjust the filtering applied to the scaled renderer?

by user 540540751424258048

14

@marwie1 :cactus: there’s also
renderer.setPixelRatio(window.devicePixelRatio * scaleFactor);
in three which is important to get Retina rendering and such right, we could expose that as well I guess

15

You mean like an additional devicePixelRatioFactor?

16

maybe? since that’s already a renderer scale. not sure

17

This seems to be affected by windows 11 window scaling e.g. 250% at 4k res is close to 125% at 1920x1080 resolution with this value. Should I use another way to read screen size instead?

by user 103054507105067008

18

window.screen.availWidth is better, but it is still affected by Windows 11 scaling in display settings

by user 103054507105067008

19

Using this function I can get the actual screen dimensions! Would be very useful to have some callback for it maybe. As if I used the other callbacks I listed above, I wouldn’t know the real resolution of the screen the content was running on (on a 4k laptop the build is very laggy vs 1920 x 1080)

    getResolution() {
        const realWidth = window.screen.width * window.devicePixelRatio;
        const realHeight = window.screen.height * window.devicePixelRatio;
        console.log(`Your screen resolution is: ${realWidth} x ${realHeight}`);
      }

by user 103054507105067008

20

Ah nice, thanks for figuring it out :slightly_smiling_face: