Supertypowe wygładzanie z trójdźwiękiem

Question

Chcę renderować scenę z dwukrotnie większą rozdzielczością niż moje płótno, a następnie przeskalować ją przed wyświetleniem. Jak mam to zrobić za pomocą trojków?

Answer 1

Oto, jak możesz go rozwiązać: w kodzie inicjującym three.js, gdy tworzysz renderer, zmień go dwukrotnie na wymiary głównego płótna i ustaw go jako renderowany na dodatkowe, ukryte płótno element, który jest dwa razy większy od podstawowego płótna. Wykonaj niezbędną manipulację obrazem na płótnie pomocniczym, a następnie wyświetl wynik na kanwie podstawowym.

Answer 2

To jest moje rozwiązanie. Komentarze źródłowe powinny wyjaśniać, co się dzieje. Setup (startowych):

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

Zmień swoje pętla animacji:

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

Uwaga: EffectComposer, RenderPass, ShaderPass i CopyShader nie są częścią domyślnie Three.js pliku. Musisz dodać je oprócz pliku three.js. W chwili pisania tego tekstu można je znaleźć w projekcie threejs w folderze Przykłady:

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

Answer 3

dla mnie najlepszym sposobem, aby mieć idealny AA z nie zbyt wiele pracy (patrz poniższy kod) PS: Jeśli zwiększasz więcej niż 2, jego początek jest zbyt ostry

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