Any tips for 4k rendering optimization?

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

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

by user 103054507105067008

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)

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

by user 103054507105067008

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

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

Super useful, thanks!

by user 103054507105067008

will add this.context.resolutionScaleFactor for the next version

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

by user 103054507105067008

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

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

@ROBYER1 just published

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

by user 540540751424258048

@marcel :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

You mean like an additional devicePixelRatioFactor?

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

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

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

by user 103054507105067008

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

Ah nice, thanks for figuring it out :slightly_smiling_face: