슈퍼 샘플 앤티 앨리어싱을 사용하여

Question

내 씬을 캔버스의 두 배 해상도로 렌더링 한 다음 디스플레이하기 전에 크기를 줄이고 싶습니다. 3J를 사용하면 어떻게 될까요?

Answer 1

해결 방법 : three.js 초기화 코드에서 렌더러를 만들 때 기본 캔버스의 크기를 두 배로 설정하고 보조 숨겨진 캔버스로 렌더링하도록 설정합니다 기본 캔버스 크기의 두 배입니다. 보조 캔버스에서 필요한 이미지 조작을 수행 한 다음 결과를 기본 캔버스에 표시하십시오.

Answer 2

이것은 내 해결책입니다. 소스 주석은 무슨 일이 일어나는지 설명해야합니다. 설정 (초기화) :

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

참고 :에

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

변경 애니메이션 루프는 EffectComposer, RenderPass, ShaderPass 및 CopyShader 파일 three.js를 기본의 일부가 아닙니다. 당신은 three.js에 추가해야합니다. 너무 많은 작업과 완벽한 AA이 PS (아래 코드 참조) 나를 위해

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

Answer 3

가장 좋은 방법 : 글을 쓰는 시점에서 그들은 예제 폴더 아래 threejs 프로젝트에서 찾을 수 있습니다 경우 당신은 2보다 더 증가시켜 시작을 너무 날카롭게한다.

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