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

本文是小编为大家收集整理的关于THREE.js模糊了帧缓冲区的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我需要模糊框架缓冲区,我不知道如何使用three.js.

获得框架缓冲区

我想模糊整个帧缓冲区,而不是模糊场景中的每个纹理.,我想我应该阅读框架缓冲区,然后模糊,而不是在着色器中进行此操作.

这是我尝试的:

init时打电话:

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.我是用正确的方式做吗?

推荐答案

任何模糊都应使用着色器来高效,但在这种情况下不是作为材料.

如果要模糊整个帧缓冲区并将其渲染到屏幕上,请使用效果作曲家.它位于三个.js/示例/js.

正常设置场景摄像头和渲染器,但此外添加了效果作曲家的实例.将场景作为渲染通行证.

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

然后使用位于三个.js/示例/示例/示例/示例/

的随附的模糊着色器使用两个通过的整个缓冲区模糊整个缓冲区
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();

这是全屏blur http://bit.lit.ly/wffke7 /p>

其他推荐答案

尝试使用 meshdepthmaterial ,并将其归档到您的着色器中.

我建议使用与场景的扩散摄像机相同的设置使用专用摄像头呈现模糊通行证.然后,通过调整相机的挫败感,您可以同时进行屏幕和模糊效果的深度.对于屏幕,设置将近乎挫折移动到相机,并以远离相机的增量移动远距离的挫败感.

>

本文地址:https://www.itbaoku.cn/post/2091201.html

问题描述

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.

Here's what I have tried:

Call when init:

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;

Call in each frame:

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);

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.

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 ) );

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

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

其他推荐答案

Try using the MeshDepthMaterial and render this into your shader.

I suggest rendering the blur pass with a dedicated camera using the same settings as the scene's diffuse camera. Then by adjusting the camera's frustrum you can do both screen and depth of blur effects. For a screen setup move the near frustrum towards the camera and move the far frustrum in increments away from the camera.

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