SSAO [Three.js]

Question

을 사용하여 하나만 사용하여 여러 장면 렌더링하기 Three.js를 사용한 내 실험에서 다른 벽을 넘어서서 등반 할 수없는 것처럼 보였습니다.

SSAO 후 처리 효과가있는 전경 장면 아래에 렌더링 된 배경 장면 (바닥이 있음)을 갖기 위해 노력하고 있습니다. 배경 장면에는 사후 처리가 적용되어서는 안됩니다.

나는 여러 가지 접근법 (마스크 등 사용)을 시도했지만이 문제를 해결할 수 없습니다. 내가 보는 주요 문제는 SSAO 장면의 배경이 투명하지 않아 배경 장면이 보이지 않는다는 것입니다. 나는 투명성 문제가 해결 되더라도 상황이 예상대로 진행될 것이라고 확신하지 못합니다. http://jsfiddle.net/uJbPe/1/

그리고 일 현재 활성화 된 SSAO의 사후 처리와보고 방법이있다 : 내가 잘못 뭘하는지 http://jsfiddle.net/7hfdC/6/

어떤 생각을

이 상황이 SSAO 후 처리없이 보는 방법입니까?

Answer 1

마스킹 패스를 사용하여이를 수행 할 수 있습니다. 나는 이것이 문제에 접근하는 올바른 방법이라고 믿습니다. 원래 코드는 이것을 가능하게하기 위해 몇 가지 추가가 필요할 것입니다.

먼저 스텐실 버퍼를 사용하여 렌더링 할 대상을 만들어야 사용할 수 있도록 효과 작성기로 전달할 수 있습니다. 스텐실 버퍼의 정보는 마스킹을 허용합니다.

renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true }; 
renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters); 
composer = new THREE.EffectComposer(renderer, renderTarget); 

다음으로 배경 및 전경 통과 모두를 작곡가에 맡기는 것이 좋습니다. 렌더링 스택을보다 깨끗하게 만듭니다. 전경 장면을 렌더링 할 때 해당 clear 속성이 false로 설정되어 스텐실 버퍼 데이터가 마스킹 패스에 대해 보존되도록하십시오.

마스크 패스, ssao 패스, 클리어 마스크 패스 및 최종 셰이더 패스를 모두 화면에 표시합니다. 여기서 셰이더 또는 fxaa를 통한 간단한 패스를 사용할 수 있습니다. 화면에 렌더링하는 또 다른 방법이 있을지 모르지만, 스크린에 렌더링하기 위해 ssao 패스를 할당 할 수는 없으며 클리어 마스크 패스가이를 따라갈 때 사용할 수 있습니다.

여기가 적어도 눈에 띄게, 아무것도 변경하지 않았지만이 방법 바이올린에 대한 링크의 조언을 http://jsfiddle.net/xqLdz/3/

Answer 2

나는 아주 비슷한 것을하고있다. 귀하의 SSAO에서 'ssaoPass.material.transparent = true;'를 시도해 보셨습니까? ' 기본 RGB가 아닌 전경 RGBA를 만들면 문제를 해결할 수있는 것처럼 보입니다.