Display scene at lower resolution in three.js

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 );

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.