three.js - 使用threejs的超级示例抗锯齿

Question

我想以两倍于画布的分辨率渲染我的场景，然后在显示之前缩小它。我将如何使用threejs来做到这一点？

Answer 1

对我来说，最好的方法是在不太多工作的情况下获得完美的 AA（参见下面的代码） ps：如果你增加超过 2 个，它的开始就太锐化了

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

Answer 2

这是我的解决方案。源评论应该解释发生了什么。设置（初始化）：

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

以下是您可以解决的方法：在您的three.js初始化代码中，当您创建渲染器时，将其设置为主画布尺寸的两倍，并将其设置为渲染到两倍的辅助隐藏画布元素与您的主画布一样大。在辅助画布上执行必要的图像处理，然后在主画布上显示结果。