Display scene at lower resolution in three.js

Question

I am looking for a way to display a three.js viewport at half resolution (or double size depending on how you look at it).

Three.js documentation states that

[Y]ou can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2, for half the resolution. This does not mean that the game will only fill half the window, but rather look a bit blurry and scaled up.

The actual result, however, is that the viewport is sclaed to half size.

This jsfiddle shows the non-expected behaviour.

Looking at the API there is a setSize and a setViewport method, but neither allows me to have a scaled up viewport.

There is a question and answer here on SO that gives one way of doing it with CSS, but I am looking for a non-CSS related way if possible.

Answer 1

2pha's answer is correct and has been implemented in threejs with the setPixelRatio() method, so you can write even fewer lines. The main interest with this method is that is is consistent with the window property window.devicePixelRatio as recalled in a comment.

This is an important feature to add to your boilerplate if you care about mobile / tablet devices. In your HTML header you should have this meta tag : <meta name='viewport' content='width=device-width'/>.

• If you do not have this tag your innerWidth and innerHeight values will be bigger than your device needs, creating a bigger framebuffer and that can reduce your framerate.
• But at this opposite if you do have this tag, without setting the pixel ratio, your framebuffer will then be too small... CSS pixel vs screen pixel story.

That is why you add this line in javascript

renderer.setPixelRatio( window.devicePixelRatio );

It needs the setSize to be called after :

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( innerWidth, innerHeight );

Answer 2

Not sure if there is a better way but you could scale the dom element right after it has been added.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
document.body.appendChild( renderer.domElement );
renderer.domElement.style.width = renderer.domElement.width * 2 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 2 + 'px';

https://jsfiddle.net/x4p3bcua/4/

Though this is still doing it via css in a round about way.