THREE.js 模糊帧缓冲区答案

【问题标题】：THREE.js blur the frame bufferTHREE.js 模糊帧缓冲区
【发布时间】：2013-02-27 13:06:45
【问题描述】：

我需要对帧缓冲区进行模糊处理，但不知道如何使用 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。我这样做的方式是否正确？

【问题讨论】：

这不会模糊“场景中的每个纹理”。
@NicolBolas 那我应该如何对整个场景进行细节模糊处理？
我想你会发现这篇文章对你的问题很有洞察力：stackoverflow.com/questions/15077762/…

标签： three.js glsl shader framebuffer

【解决方案1】：

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

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

正常设置场景相机和渲染器，但另外添加效果合成器的实例。以场景作为渲染通道。

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.render();

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

【讨论】：

我会根据每个像素的深度信息模糊整个场景，所以我仍然需要获取帧缓冲区而不是为整个场景添加HorizontalBlurShader。
听起来您正在尝试进行景深模糊。该过程类似，模糊仍将由着色器处理并写回全屏四边形。我在这里有一个景深的工作示例andrewberg.com/prototypes/threejs/bokeh
很好的答案，感谢您的链接！我是否正确理解“effectscomposer”库独立于三个渲染器的其余部分工作？它将渲染器内部的任何内容作为 2d 图像并对其应用过滤器？（我问是因为我想模糊图像和阈值以达到“摇摆不定”的效果）
这是正确的，所有效果都在后期处理步骤中应用于 2d 图像。
感谢 Andrew，代码 sn-p 对我来说效果很好，很容易理解。

【解决方案2】：

尝试使用MeshDepthMaterial 并将其渲染到您的着色器中。

我建议使用与场景漫反射相机相同的设置使用专用相机渲染模糊通道。然后通过调整相机的视锥体，您可以制作屏幕和模糊深度效果。对于屏幕设置，将近视锥体移向相机，并将远视锥体逐渐远离相机。

http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial

【讨论】：