Super sample antialiasing with threejs

Question

I want to render my scene at twice the resolution of my canvas and then downscale it before displaying it. How would I do that using threejs?

Answer 1

for me the best way to have a perfect AA with not too much work (see the code below) ps :if you increase more than 2 its start to be too sharpen

renderer = new THREE.WebGLRenderer({antialiasing:true});
renderer.setPixelRatio( window.devicePixelRatio * 1.5 );

Answer 2

This is my solution. The source comments should explain what's going on. Setup (init):

var renderer;
var composer;
var renderModel;
var effectCopy;

renderer = new THREE.WebGLRenderer({canvas: canvas});

// Disable autoclear, we do this manually in our animation loop.
renderer.autoClear = false;

// Double resolution (twice the size of the canvas)
var sampleRatio = 2;

// This render pass will render the big result.
renderModel = new THREE.RenderPass(scene, camera);

// Shader to copy result from renderModel to the canvas
effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;

// The composer will compose a result for the actual drawing canvas.
composer = new THREE.EffectComposer(renderer);
composer.setSize(canvasWidth * sampleRatio, canvasHeight * sampleRatio);

// Add passes to the composer.
composer.addPass(renderModel);
composer.addPass(effectCopy);

Change your animation loop to:

// Manually clear you canvas.
renderer.clear();

// Tell the composer to produce an image for us. It will provide our renderer with the result.
composer.render();

Note: EffectComposer, RenderPass, ShaderPass and CopyShader are not part of the default three.js file. You have to include them in addition to three.js. At the time of writing they can be found in the threejs project under the examples folder:

/examples/js/postprocessing/EffectComposer.js
/examples/js/postprocessing/RenderPass.js
/examples/js/postprocessing/ShaderPass.js
/examples/js/shaders/CopyShader.js