three.js - threejsによるスーパーサンプルアンチエイリアス

Question

シーンをキャンバスの2倍の解像度でレンダリングしてから、表示する前にダウンスケールしたいと思います。threejsを使用してそれをどのように行うのですか？

Answer 1

これが私の解決策です。ソースのコメントは、何が起こっているのかを説明する必要があります。セットアップ (初期化):

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 に加えてそれらを含める必要があります。これを書いている時点では、examples フォルダーの下のthreejsプロジェクトにあります。

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

Answer 2

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