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。这是我正确的做法吗？

- Ovilia

---

这不会模糊“场景中的每个纹理”。 - Nicol Bolas

@NicolBolas 那么，我应该如何详细模糊整个场景？ - Ovilia

我认为你会发现这篇文章对你的问题很有启发性：https://dev59.com/rW7Xa4cB1Zd3GeqPvOlv - gaitat

Answer 1

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

如果你想要对整个帧缓冲进行模糊处理并将其渲染到屏幕上，请使用Effect Composer。它位于three.js/examples/js/postprocessing/EffectComposer.js中。

像往常一样设置场景相机和渲染器，但另外添加一个Effect Composer实例，并将场景作为一个渲染通道。

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而不是renderer调用您的方法。

composer.render();

这是一个链接，指向一个全屏模糊效果的工作示例

- Andrew Berg

---

我会根据每个像素的深度信息模糊整个场景，因此我仍需要获取帧缓冲而不是为整个场景添加“HorizontalBlurShader”。 - Ovilia

听起来你正在尝试进行景深模糊处理。该过程类似，模糊处理仍将由着色器处理，并写回到全屏四边形。我在这里有一个景深的工作示例http://www.andrewberg.com/prototypes/threejs/bokeh/。 - Andrew Berg

非常好的答案，感谢提供链接！我理解得对吗，“effectscomposer”库独立于其余三个渲染器工作？它将渲染器内部的任何内容作为2D图像并对其应用滤镜？（我问这个问题是因为我想模糊图像并对其进行阈值处理以实现“摇晃”的效果） - user151496

这是正确的，所有效果都在后处理步骤中应用于2D图像。 - Andrew Berg

谢谢Andrew，这段代码片段对我非常有帮助，易于理解。 - mlepage

Answer 2

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

我建议使用专用相机渲染模糊通道，使用与场景漫反射相机相同的设置。然后通过调整相机的视锥体，您可以实现屏幕和深度模糊效果。对于屏幕设置，请将近截面向相机移动，并将远截面以增量方式远离相机。

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

- Eli Peters