2

SSAO 後処理シェーダーを使用してシーンをレンダリングしようとしています。エラーはありませんが、SSAO パスを使用した場合と使用しない場合でレンダリングされたシーンに違いは見られません。次のようにレンダラーを初期化します。

// Create WebGL Renderer
var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF };
renderer = new THREE.WebGLRenderer(renderParameters);
renderer.autoClear = false;
renderer.setSize(viewportWidth, viewportHeight);

// Create render targets
renderTargetParametersRGB = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGBA);
colorTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGB);

// The shader pass to draw the scene
var renderScenePass = new THREE.RenderPass(scene, camera);

// Copy to screen render pass
var copyToScreenPass = new THREE.ShaderPass(THREE.CopyShader);
copyToScreenPass.renderToScreen = true;

// SSAO render pass
effectSSAO = new THREE.ShaderPass(THREE.SSAOShader);
effectSSAO.uniforms['tDepth'].texture = depthTarget;
effectSSAO.uniforms['size'].value.set(width, height);
effectSSAO.uniforms['cameraNear'].value = camera.near; // 1
effectSSAO.uniforms['cameraFar'].value = camera.far;  // 1000
//effectSSAO.uniforms.onlyAO.value = 1;

// Setup post processing chain
composer = new THREE.EffectComposer(renderer, colorTarget);
composer.addPass(effectSSAO);
composer.addPass(copyToScreenPass); 

// Depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin(depthPassPlugin);

render 関数では、次のようにシーンをレンダリングします。

requestAnimationFrame(render);
depthPassPlugin.enabled = true;
renderer.render(scene, camera, composer.renderTarget2, true);
depthPassPlugin.enabled = false;
composer.render(0.1);

前に言ったように、すべて正常に動作しているように見えますが、画面に AO 効果が表示されません。たぶん、間違ったパラメータ値を使用しているだけですか? depthTarget をシーンにレンダリングすることで、深度パスが更新されていることを確認しました。effectSSAO.uniforms.onlyAO.value をオンにすると、実際のシーン (テクスチャを含む) のかなり「フラットな」茶色がかったレンダリングが得られますが、AO はまだありません。次に何を試せばよいかアドバイスをいただけますか?

4

1 に答える 1

5

https://twitter.com/mrdoob/status/300919764262477824に、three.js (r56) の現在のリリースで動作する例があります。

コードへの直接リンクは次のとおりです: http://goo.gl/RzfwH

サンプル コードと three.js ライブラリを提供してくれた Altered Qualia と MrDoob に感謝します。

于 2013-03-13T16:28:20.427 に答える