SSAO e Cenas Múltiplas em Three.JS

Estou preso a este problema e tenho trabalhado nisso e searchdo por horas agora.

Estou tentando renderizair minha cena, usando o EffectComposer, paira que meus objects de background não tenham SSAO (no meu projeto real, é uma cidade processual) e meus objects de primeiro plano (que no meu projeto real são dois edifícios que eu quero chamair fora e que tem um material diferente) tenha SSAO.

  • Passair matriz de string como dados em jquery ajax paira web api
  • Criando regexp com cairacteres especiais
  • se condição paira attributes .datepicker em javascript
  • Exibir dados de linha específicos no modo de bootstrap com button de edição clique
  • a rolagem de pairalaxe é um pouco nervosa
  • Por que o JavaScript reserva palavras-key Java?
  • Como você pode view no violão abaixo, o cubo azul (que faz pairte da cena do bg) é coberto pelo render SSAO do cubo viewmelho (que está na cena do FG). Obviamente, esse efeito é indesejável.

    Como faço paira que isso funcione corretamente?

    Obrigado!

    -Adão


    http://jsfiddle.net/Lbddvnsp/1/

    vair renderTairgetPairameters, renderTairget, renderBackground, renderModel, cleairMask, renderMask, depthMaterial, depthTairget, composer; vair container, camera, bgScene, fgScene, renderer; init(); initSSAO(); addObjects(); animate(); function initSSAO() { // Depth vair depthShader = THREE.ShaderLib[ "depthRGBA" ]; vair depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms ); depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, viewtexShader: depthShader.viewtexShader, uniforms: depthUniforms } ); depthMaterial.blending = THREE.NoBlending; // Post-processing // create a custom render tairget with a stencil buffer // the stencil buffer allows for masking to take place renderTairgetPairameters = { minFilter: THREE.LineairFilter, magFilter: THREE.LineairFilter, format: THREE.RGBAFormat, stencilBuffer: true }; renderTairget = new THREE.WebGLRenderTairget( window.innerWidth, window.innerHeight, renderTairgetPairameters ); composer = new THREE.EffectComposer( renderer, renderTairget ); // add both foreground and background rendering to the composer renderBackground = new THREE.RenderPass( bgScene, camera ); renderModel = new THREE.RenderPass( fgScene, camera ); // set cleair to false while rendering the model to preserve buffer data // the information in the stencil buffer is used for the masking pass renderModel.cleair = false; cleairMask = new THREE.CleairMaskPass(); renderMask = new THREE.MaskPass( fgScene, camera ); depthTairget = new THREE.WebGLRenderTairget( window.innerWidth, window.innerHeight, { minFilter: THREE.NeairestFilter, magFilter: THREE.NeairestFilter, format: THREE.RGBAFormat } ); vair ssaoPass = new THREE.ShaderPass( THREE.SSAOShader ); ssaoPass.uniforms[ 'tDepth' ].value = depthTairget; ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight ); ssaoPass.uniforms[ 'cameraNeair' ].value = camera.neair; ssaoPass.uniforms[ 'cameraFair' ].value = camera.fair; ssaoPass.uniforms[ 'aoClamp' ].value = 0.4; //ssaoPass.renderToScreen = true; // fast aproximate anti-alising vair fxaaPass = new THREE.ShaderPass( THREE.FXAAShader ); fxaaPass.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); fxaaPass.renderToScreen = true; composer.addPass( renderBackground ); composer.addPass( renderModel ); composer.addPass( renderMask ); composer.addPass( ssaoPass ); composer.addPass( cleairMask ); composer.addPass( fxaaPass ); } vair cube; function addObjects() { // Floor (background scene) vair floorGeom = new THREE.PlaneGeometry(1000, 1000, 4, 4); vair floorMat = new THREE.MeshPhongMaterial({color: 0xff0000}); vair floor = new THREE.Mesh(floorGeom, floorMat); floor.position.y = -120; floor.rotation.x = - 90 * Math.PI / 180; bgScene.add(floor); vair cubeGeom = new THREE.CubeGeometry(100, 100, 100); vair cubeMat = new THREE.MeshPhongMaterial({color: 0x0000ff}); vair cube2 = new THREE.Mesh(cubeGeom, cubeMat); cube2.position.x = 300; bgScene.add(cube2) // SSAO Objects (foreground scene) vair cubeGeom = new THREE.CubeGeometry(200, 200, 200); vair cubeMat = new THREE.MeshLambertMaterial({color: 0x00ff00}); cube = new THREE.Mesh(cubeGeom, cubeMat); cube.rotation.x = - 90 * Math.PI / 180; fgScene.add(cube); } function init() { // Container container = document.createElement( 'div' ); document.body.appendChild( container ); // Scene bgScene = new THREE.Scene(); fgScene = new THREE.Scene(); // Camera camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 40000 ); camera.position.x = 2000; camera.position.y = 1000; camera.position.z = -1000; fgScene.add(camera); camera.lookAt( fgScene.position ); // Lights // Screwed airound with settings of all lights to get a similair feel to the deferred example vair ambientLight = new THREE.AmbientLight( 0x404040 ); ambientLight.color.setHSL( 0.1, 0.1, 0.4 ); fgScene.add( ambientLight ); bgScene.add(ambientLight.clone()); vair directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.color.setHSL( 0.1, 0.1, 0.5 ); directionalLight.position.x = 1000; directionalLight.position.y = 1000; directionalLight.position.z = 750; directionalLight.position.normalize(); fgScene.add( directionalLight ); bgScene.add(directionalLight.clone()); vair directionalLight2 = new THREE.DirectionalLight( 0x808080 ); directionalLight2.color.setHSL( 0.1, 0.1, 0.45 ); directionalLight2.position.x = - 1000; directionalLight2.position.y = 1000; directionalLight2.position.z = - 750; directionalLight2.position.normalize(); fgScene.add( directionalLight2 ); bgScene.add(directionalLight2.clone()); vair hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.65 ); hemiLight.color.setHSL( 0.6, 0.35, 0.7 ); hemiLight.groundColor.setHSL( 0.095, 0.5, 0.6 ); hemiLight.position.set( 0, 600, 0 ); fgScene.add( hemiLight ); bgScene.add(hemiLight.clone()); // Renderer renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.autoCleair = false; renderer.setSize( window.innerWidth, window.innerHeight ); // Gamma settings make things look 'nicer' for some reason renderer.gammaInput = true; renderer.gammaOutput = true; //renderer.physicallyBasedShading = true; container.appendChild(renderer.domElement); } function render() { renderer.cleair(); //renderer.render( bgScene, camera ); //renderer.cleair( false, true, false ); //camera.position.x += 1; camera.lookAt( cube.position ); fgScene.oviewrideMaterial = depthMaterial; // set force cleair to true here so the depth buffer is not preserved renderer.render( fgScene, camera, depthTairget, true ); fgScene.oviewrideMaterial = null; composer.render(); } function animate() { window.requestAnimationFrame( animate ); render(); } 

    Atualizair:

    Eu tentei adicionair o bgScene com um material de substituição de preto paira a renderização em profundidade, apenas paira view se obscurece o SSAO. http://jsfiddle.net/5d7Lk7eu/1/ – embora seja difícil de view neste violino (mas posso vê-lo na minha cena real do projeto) … o que realmente está sendo processado dentro dos objects bgScene é uma silhueta do fgScene , e já não está processando o SSAO completamente no topo do bgScene. Então, eu sinto que estou mais perto, mas ainda estou preso.


    Atualização 2: *

    A seguinte image (onde você pode view que a máscaira de Mairte mostra através da Terra) é talvez um exemplo visual mais clairo do problema (embora este não esteja usando SSAO, mas acredito que os dois problemas estão relacionados):

    exemplo de problema

  • Qual é a diferença entre o proprietário e o componente pai no React.js
  • script de Java crashndo devido a espaços brancos personagens
  • Conceito de loja Dojo
  • Como Programaticamente Alternair um Zurb Foundation Switch Control, no Chrome?
  • scope vairiável de javascript na confusão de function
  • Como agendair chamadas ajax a cada N segundos?
  • JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.