THREE.js 模糊帧缓冲区

Question

我需要模糊帧缓冲区，但我不知道如何使用 THREE.js 获取帧缓冲区。

我想模糊整个帧缓冲区而不是模糊场景中的每个纹理。 所以我想我应该读取帧缓冲区然后进行模糊处理，而不是在着色器中执行此操作。

这是我尝试过的:

初始化时调用:

var renderTarget = new THREE.WebGLRenderTarget(512, 512, {
    wrapS: THREE.RepeatWrapping,
    wrapT: THREE.RepeatWrapping,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
    format: THREE.RGBAFormat,
    type: THREE.FloatType,
    stencilBuffer: false,
    depthBuffer: true
});
renderTarget.generateMipmaps = false;

在每一帧中调用:

var gl = renderer.getContext();

// render to target
renderer.render(scene, camera, renderTarget, false);
framebuffer = renderTarget.__webglFramebuffer;
console.log(framebuffer);

gl.flush();
if (framebuffer != null)
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
var width = height = 512;
var rdData = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rdData);
console.log(rdData);

// render to screen
renderer.render(scene, camera);

但是 framebuffer是 WebFramebuffer {}和 rdData满满的 0 .我这样做是否正确？

Answer 1

任何模糊都应该使用着色器来提高效率，但在这种情况下不是作为 Material 。

如果要模糊整个帧缓冲区并将其渲染到屏幕，请使用效果器。它位于three.js/examples/js./postprocessing/EffectComposer.js

像往常一样设置场景相机和渲染器，但另外添加一个效果器的实例。将场景作为渲染 channel 。

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

然后使用位于three.js/examples/shaders/中的包含的模糊着色器通过两次通过模糊整个缓冲区

hblur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
composer.addPass( hblur );

vblur = new THREE.ShaderPass( THREE.VerticalBlurShader );
// set this shader pass to render to screen so we can see the effects
vblur.renderToScreen = true;
composer.addPass( vblur );

最后在使用 Composer 而不是渲染器的每帧渲染中调用的方法中

composer.render();

这是全屏模糊工作示例的链接 http://bit.ly/WfFKe7