Render half size then upscale


To keep GPU load low i wouldlike to render at 50% and then upscale the output from the render/composer to fit the container.

I use the following to render at half resolution and that works fine:

renderer.setSize((window.innerWidth/2), (window.innerHeight/2));

My question is - how do i get the rendered image (directly or after post processing) upscaled 200% afterwards so that it fits the windowsize?

Hope my challenge makes sense :slight_smile:

Many thanks!


just use the styles:


Alternatively you can use the pixel ratio to render down or up scaled:

Set the scale factor to 2 will render at double resolution, set it to 0.5 to render at half resolution.
I have previously experimented with using this to upscale the render for performance testing.



Thanks for your suggestions that both does what i would like to achieve.
Aftwer writing the post i kept searching and found something on that suggested this:

renderer.setSize(window.innerWidth/2, window.innerHeight/2, false);

The trick is to set the β€œfalse” argument. This looks to be a simple way to render at half (or other) resolution but still fill the dom element.

Hope this makes sense - i’m quite new to three js and JS for that matter!

I’m so pleased that there are people taking time helping out others and newbies like me.

Many thanks :slight_smile: