Super-pattern smoothing with three

Question

I want my scene to be twice the resolution of my canvas, and then reduce it to display. How can I do this with threejs?

Answer 1

This is my decision. The original comments should explain what is happening. 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 the 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 should include them in addition to three.js. At the time of writing, they can be found in the threejs project in the examples folder:

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

Answer 2

for me the best way to have perfect AA with not too much work (see code below) ps: if you increase by more than 2, its beginning will be too sharp.

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

Answer 3

Here's how you could solve it: in your initialization code three.js, when creating the renderer, make it double the size of the main canvas and set it to display a secondary hidden canvas element that is twice as large as your main canvas. Perform the necessary manipulations with the images on the secondary canvas, and then display the result on the main canvas.