4

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

4

2 回答 2

20

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

如果您想模糊整个帧缓冲区并将其渲染到屏幕上，请使用效果器。它位于 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

于 2013-03-14T16:04:43.593 回答
0

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

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

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

于 2015-10-22T11:52:10.290 回答