Shader Accumulation using Three.js

Question

Shader Accumulation using Three.js

Currently, I am in the process of developing a path tracer using THREE.js. The approach involves rendering a full-screen quad with path tracing taking place in the pixel shader.

To achieve a higher sampling rate, one option is to sample one path for each pixel and then combine the resulting images by averaging them out over multiple shader passes.

While I have been successful in generating the necessary images, I am struggling with how to accumulate them. My initial thought is to utilize two render targets: one for the latest sampled image and another for the average of all previously displayed images.

However, I am unsure of how to extract data from a WebGLRenderTarget and use it to manipulate the data within another render target. Is this even feasible with Three.js? I have been exploring FrameBuffer Objects as a potential solution and going through MrDoob's FBO example at , which seems promising but I'm uncertain if I am on the right track.

javascript opengl-es three.js webgl

Answer 1

Answer №1

It appears that the challenge lies in the inability to read and write from the same buffer simultaneously. When you render something in one frame, you must then output to the accum buffer. However, when it comes to performing calculations in the next frame and saving them to the same buffer, WebGL does not currently support this functionality.

An alternative approach would be to utilize two buffers. Within the shader where you output your data and perform calculations, include an additional texture sampler to read from the previous frame's buffer, save to the next buffer, and then alternate between the two. This method ensures that you always have access to your accumulated values, allowing for various mathematical operations to be applied. It is crucial to ensure that you are reading from the correct buffer at each frame.

For tasks like these, three.js offers a post-processing plugin which can greatly simplify the process.

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;
}

Answer 2

It appears that the challenge lies in the inability to read and write from the same buffer simultaneously. When you render something in one frame, you must then output to the accum buffer. However, when it comes to performing calculations in the next frame and saving them to the same buffer, WebGL does not currently support this functionality.

An alternative approach would be to utilize two buffers. Within the shader where you output your data and perform calculations, include an additional texture sampler to read from the previous frame's buffer, save to the next buffer, and then alternate between the two. This method ensures that you always have access to your accumulated values, allowing for various mathematical operations to be applied. It is crucial to ensure that you are reading from the correct buffer at each frame.

For tasks like these, three.js offers a post-processing plugin which can greatly simplify the process.

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;
}

Shader Accumulation using Three.js

Answer №1

Similar questions

Organizing data in a table with AngularJS

Switching Bootstrap Navbar Active State with JavaScript

How can you access the URL of an ajax request in JavaScript/jQuery once the request has been completed?

Update the base path from /docs/ to /home/ for Docusaurus websites

Is there a solution to successfully retrieving the value of res from the readCsv() method instead of it returning undefined?

Prevent scrolling on browser resize event

Calculate the total value of a specific field within an array of objects

Saving data between refreshes in AngularJS can be achieved by utilizing services or local

Testing reactive streams with marble diagrams and functions

Displaying a Variety of Images using React and HTML

Tips for stopping Vue.js automatic merging of CSS classes

Another way to display mjpeg using an img tag and Basic Authentication

Utilizing jquery to showcase the information in a neat and organized table

Tips for managing lag caused by large raw image re-renders in a React application

Tips for automatically breaking or paginating HTML in order to ensure that the resulting PDF mirrors the paginated HTML layout

What is preventing me from adding any style to this specific element?

The functionality of hiding elements using the .hide() function in Javascript is affected by Qualtrics

Mastering the art of iterating through an array of objects in Vue/Nuxt

Looping through data returned from Ajax call and displaying it as HTML in CodeIgniter using JQuery

Manipulating data with Angular's array object