gkjohnson / three-gpu-pathtracer

Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.
https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/index.html
MIT License
1.27k stars 125 forks source link

Is there any way to render overlay on the pathTraced Scene? #639

Closed dongho-shin closed 1 month ago

dongho-shin commented 1 month ago

Hi Previous Version it can draw overlay over the pathTraced Scene like code below (ex. area light example that use TransformControls in past)

renderer.autoClear = false;
quad.render(renderer);
renderer.render(overlayScene, camera);
renderer.autoClear = true;

but somehow it can't render overlay

rasterized Scene it can render

image

but when it turns pathTraced Scene overlay cube disappear

image

is there something i missed?

thanks to read this issue

gkjohnson commented 1 month ago

Currently if you'd like to render after the fact with depth you'll have to render to depth first and then draw the opaque objects on top of that. The pathtraced view has never provided a depth buffer state after rendering.

(ex. area light example that use TransformControls in past)

These controls never interacted with the depth buffer as far as I remember. Can you provide a small working example of what you were able to do in previous examples of the project in a previous verison?

dongho-shin commented 1 month ago

I want do same in the 0.0.20 version of three-gpu-pathtracer /areaLight example TransformControls Gizmos drawn on the view i think it's not related depth buffer I know it's draw over rendered view without clear

image

i open pr for example sharing https://github.com/gkjohnson/three-gpu-pathtracer/pull/640

gkjohnson commented 1 month ago

The transform controls don't check the depth buffer as far as I remember so the depth state wouldn't have ever really mattered while your box is test depth. But if you clear depth in your PR the objects will render just fine:

renderer.autoClear = false;
renderer.clearDepth();
renderer.render(testMesh, activeCamera);
renderer.autoClear = true;
image

We could change the path tracer full screen quad writing to disable writing and checking depth but it won't necessarily make the state of the depth buffer predictable. Initially it may have the depth state of the scene. But once the path tracer is rendering it will be empty:

this._quad = new FullScreenQuad( new ClampedInterpolationMaterial( {
    depthTest: false,
    depthWrite: false,

    // ...
} ) );

If you want to always use the depth state of the scene for rendering gizmos you can render the depth of the scene after the pathtracer contents are copied to the canvas you can do so like so:


renderer.autoClear = false;

// render depth of the scene
renderer.clearDepth();
scene.overrideMaterial = depthMat;
renderer.render( scene, activeCamera );
scene.overrideMaterial = null;

// render the gizmos / real time interactive objects
renderer.render( testMesh, activeCamera );

renderer.autoClear = true;
image

If you'd like to make a PR for adjusting the path tracer quad or a small example showing how to render objects on top of the path traced scene that would be appreciated!

dongho-shin commented 1 month ago

Thanks for answers I think make a example is better than adjusting quad if it don't causes a bug I'll make PR for small example until this week