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 
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
wondering - can we adjust the filtering applied to the scaled renderer?
by user 540540751424258048
@Marcel_Wiessler1
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 