Three.js가 포함 된 누적 셰이더

Question

THREE.js를 사용하여 경로 추적 프로그램을 구현하려고합니다. 기본적으로 전체 화면 쿼드를 렌더링하고 경로 쉐이핑은 픽셀 쉐이더에서 발생합니다.

나는 더 높은 샘플링 속도를 원하며 그렇게하는 한 가지 방법은 각 픽셀에 대해 하나의 경로를 샘플링하고 결과 이미지를 축적하는 것입니다. (즉, 각 쉐이더 패스에서 얻은 이미지를 평균 처리)

필자는 필요한 이미지를 생성 할 수 있었지만 그 이미지를 축적하는 방법을 모릅니다. 내 생각 엔 두 개의 렌더링 타겟을 사용해야한다는 것입니다. 하나는 "최신"샘플 이미지를 포함하고 하나는 지금까지 표시된 모든 이미지의 평균을 포함합니다.

WebGLRenderTarget에서 데이터를 가져와 다른 렌더링 대상에 포함 된 데이터를 조작하는 방법을 알지 못합니다. Three.js에서 가능한 일이 가능한 것입니까? FrameBuffer 객체를 살펴 봤는데 이것은 유망한 경로처럼 보이고 MrDoob의 FBO 예제 (http://www.mrdoob.com/lab/javascript/webgl/particles/particles_zz85.html)를 통해 빗질하고 있으며 유망한 것으로 보입니다. 그러나 나는 올바른 방향으로 향하고 있는지 확신 할 수 없습니다.

Answer 1

저는 같은 버퍼에서 읽고 쓸 수 없다고 생각합니다. 한 프레임을 렌더링한다고 가정하면 누적 버퍼로 출력하는 패스가 필요합니다. 다음 프레임, 당신은 당신의 계산을하고, 같은 버퍼에 저장해야합니다. 그러나 이것이 올바르게 이해된다면, 현재 WebGL에서는 불가능합니다.

대신 할 수있는 것은 두 개의 버퍼가 있습니다. 버퍼에 물건을 출력하고 계산을 수행하는 셰이더에서 다른 텍스처 샘플러를 추가하고 이전 프레임의 샘플을 읽고 다음 프레임으로 저장 한 다음 대체합니다. 누적 된 값을 항상 갖게 될 것이므로, 추가하고자하는 수학을 사용할 수는 있지만 올바른 프레임에서 올바른 버퍼를 읽고 있는지 확인해야합니다.

three.js에는 후 처리를위한 플러그인이 있으며, 이와 같은 작업을 수행 할 때 매우 편리해야합니다.

var flipFlop = true; 
var buffer1 = THREE.WebGLRenderTarget(BUFFERSIZE, BUFFERSIZE, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, type: THREE.FloatType}); 
var buffer2 = THREE.WebGLRenderTarget(BUFFERSIZE, BUFFERSIZE, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, type: THREE.FloatType}); 


function render() { 
    // If we are in frame1 read buffer from frame0 and add it to whatever you compute 
    yourComputeShaderMaterial.uniforms._accumulationBuffer.value = flipFlop ? buffer2 : buffer1; 

    if (flipFlop) // Frame 0 
     renderer.render(scene, camera, buffer1); 
    else // Frame 1 
     renderer.render(scene, camera, buffer2); 

    // Get whatever just renderered in this frame and use it 
    yourEndShader.uniforms._accumulationBuffer.value = !flipFlop ? buffer2 : buffer1; 

    // Switch frame 
    flipFlop = !flipFlop; 
}