THREE.js模糊幀緩衝區

我需要模糊幀緩衝區，我不知道如何使用THREE.js獲取幀緩衝區。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。我是否以正確的方式做這件事？

來源

2013-03-12 Ovilia

這並不模糊「場景中的每個紋理」。 – 2013-03-12 05:44:11

@NicolBolas然後，我應該如何詳細模糊整個場景？ – Ovilia 2013-03-12 05:53:48

我想你會發現這個帖子洞察你的問題：http://stackoverflow.com/questions/15077762/three-js-shader-texture-linking – gaitat 2013-03-12 09:49:32

任何模糊應該使用着色器來保持高效，但在這種情況下不應該作爲材質。

如果您想模糊整個幀緩衝區並將其渲染到屏幕上，請使用效果器。它位於three.js/examples/js。/ postprocessing/EffectComposer.js

正常情況下設置場景攝像頭和渲染器，但另外添加效果編輯器的實例。將場景作爲渲染通道。

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

然後使用位於three.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();

這裏是全屏幕殘影的工作示例的鏈接http://bit.ly/WfFKe7

來源

2013-03-14 16:04:43

我會模糊整個場景取決於每個像素的深度信息，所以我仍然需要獲取framebuffer，而不是爲整個場景添加「HorizontalBlurShader」。 – Ovilia 2013-03-15 01:22:20

這聽起來像你正在試圖做一個景深模糊。這個過程是相似的，模糊仍然會被着色器處理，並被寫回到全屏四元組。我有一個在這裏http://www.andrewberg.com/prototypes/threejs/bokeh/ – 2013-03-15 01:51:59

很好的答案，謝謝你的鏈接的景深工作的例子！我是否正確理解「effectscomposer」庫獨立於其他三個渲染器？它將渲染器內部的任何內容作爲2D圖像並對其應用濾鏡？（我在問，因爲我想模糊圖像和閾值它爲了實現「搖擺」效果） – user151496 2014-10-05 13:43:52

嘗試使用MeshDepthMaterial並將其渲染到着色器中。

我建議使用與場景的漫反射相同的設置使用專用相機渲染模糊通道。然後通過調整相機的截止點，您可以同時進行屏幕和模糊效果的深度。對於屏幕設置，朝着相機移動近空心腔，並以遠離相機的增量移動遠心空心腔。

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

來源

2015-10-22 11:52:10

THREE.js模糊幀緩衝區

回答

相關問題