THREE.js模糊帧缓冲区 [英] THREE.js blur the frame buffer

问题描述

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

I need to blur the frame buffer and I don't know how to get the frame buffer using THREE.js.

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

I want to blur the whole frame buffer rather than blur each textures in the scene. So I guess I should read the frame buffer and then blur, rather than doing this in shaders.

这是我尝试过的:

在初始化时调用:

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.我以正确的方式这样做吗?

But framebuffer is WebFramebuffer {} and rdData is full of 0. Am I doing this in the right way?

推荐答案

任何模糊处理都应使用着色器以提高效率，但在这种情况下，请不要将其用作材质.

Any blur should use shaders to be efficient, but in this case not as materials.

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

If you want to blur the entire frame buffer and render that to the screen use the effect composer. It's located in three.js/examples/js./postprocessing/EffectComposer.js

正常设置场景摄影机和渲染器，但另外添加一个效果编辑器实例.将场景作为渲染过程.

Set up the scene camera and renderer as normal but in addition add an instance of the effect composer. With the scene as a render pass.

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

然后使用位于three.js/examples/shaders/

Then blur the whole buffer with two passes using the included blur shaders located in 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 );

最后，在使用构图器而不是渲染器的每一帧渲染中调用的方法中

finally in your method called in each frame render using the composer instead of the renderer

composer.render();

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

Here is a link to a working example of full screen blur http://bit.ly/WfFKe7

这篇关于THREE.js模糊帧缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！