具有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之外,你还必须包含它们.在撰写本文时,可以在examples文件夹下的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 初始化代码中，当您创建渲染器时，将其设置为主画布尺寸的两倍，并将其设置为渲染到两倍的辅助隐藏画布元素和你的主画布一样大。在辅助画布上执行必要的图像处理，然后在主画布上显示结果。