three.js - 具有三个js的 super 样本抗锯齿

Question

我想以两倍于 Canvas 的分辨率渲染场景，然后在显示之前缩小其比例。我将如何使用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