Super campione antialiasing con threejs

Question

Voglio rendere la mia scena al doppio della risoluzione della mia tela e quindi ridurla prima di visualizzarla. Come lo farei usando i trejs?

Answer 1

Ecco come potresti essere in grado di risolverlo: nel tuo codice di inizializzazione three.js, quando crei il tuo renderer, raddoppia le dimensioni della tela primaria e impostalo per renderizzare su una tela nascosta secondaria elemento che è due volte più grande della tela principale. Eseguire la necessaria manipolazione dell'immagine sulla tela secondaria e quindi visualizzare il risultato sull'area di disegno principale.

Answer 2

Questa è la mia soluzione. I commenti alla fonte dovrebbero spiegare cosa sta succedendo. 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); 

Modifica il ciclo di animazione a:

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

Nota: EffectComposer, RenderPass, ShaderPass e CopyShader non fanno parte di quello predefinito Three.js file. Devi includerli in aggiunta a three.js. Al momento della scrittura possono essere trovato nel progetto threejs nella cartella esempi:

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

Answer 3

per me il modo migliore per avere un AA perfetto con non troppo lavoro (vedi il codice qui sotto) ps: se aumenta di più di 2 il suo inizio per essere troppo nitido

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