3つのスーパーサンプルアンチエイリアス

Question

私のキャンバスの2倍の解像度でシーンをレンダリングし、それを表示する前に縮小します。 threejsを使ってどうすればいいですか？

Answer 1

これを解決する方法は次のとおりです：three.js初期化コードで、レンダラーを作成するときにプライマリキャンバスのサイズを2倍にして、2番目の非表示キャンバスにレンダリングするように設定します要素は、プライマリキャンバスの2倍です。セカンダリキャンバスで必要なイメージ操作を実行し、その結果をプライマリキャンバスに表示します。

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に加えてそれらを含める必要があります。私にとって

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

Answer 3

も過言ではない作品との完璧なAAを持っているための最良の方法（以下のコードを参照してください） PS：もしを書いている時点では、彼らは例のフォルダの下threejsプロジェクトで見つけることができますあなたはその開始を2より大きくして、シャープすぎるようにします。

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