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 {}rdData0

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/ にある同梱のぼかしシェーダーを使用して、2 つのパスでバッファー全体をぼかします。

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 に答える