用threejs的超級樣本抗鋸齒

Question

我想以我的畫布分辨率的兩倍渲染場景，然後在顯示它之前將其縮小。我將如何使用threejs做到這一點？

Answer 1

下面介紹瞭如何解決這個問題：在您的three.js初始化代碼中，當您創建渲染器時，將它的主要畫布的尺寸加倍，並將其設置爲渲染到次要的隱藏畫布元素的大小是您主要畫布的兩倍。在輔助畫布上執行必要的圖像處理，然後在主畫布上顯示結果。

Answer 2

這是我的解決方案。來源評論應該解釋發生了什麼。設置（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); 

改變動畫環路：

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

注：EffectComposer，RenderPass，ShaderPass和CopyShader不是默認three.js所文件的一部分。除了three.js，你還必須包含它們。在寫這篇文章的時候，他們可以在示例文件夾下的threejs項目中找到：

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

Answer 3

對我來說，最好的辦法有沒有太多的工作完美的AA（見下面的代碼） PS：如果你增加超過2它的開始太尖銳

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