taseenb / THREE.Highres

High resolution and depth rendering to PNG for Three.js
https://taseenb.github.io/THREE.Highres/demo/index.html
MIT License
36 stars 4 forks source link

[advice requested] raytracing with three-gpu-pathtracer #2

Open Shrilliant opened 1 year ago

Shrilliant commented 1 year ago

Hello!

I was looking for a way to generate very large images in my three.js project that uses three-gpu-pathtracer to raytrace images and I stumbled on dekapng where I submitted a similar issue, and the creator linked me to your library.

I'm thinking that your generator moves the camera/renders a certain part of the canvas in order to stitch the PNG together. This works well for the normal THREE renderer, though I was wondering if there would need to be some sort of waiting period to wait for a raytraced image to converge in the scene before applying it to the output png and exporting it.

Do you have any guidance on accomplishing this with your library?

Thank you!

taseenb commented 1 year ago

You must have found a solution already. But if you wanted to try using this library you can change the renderNormal method (and renderDepth if you need it). It is a very simple method: you can replace the render method and then wait before calling finishRender.

https://github.com/taseenb/THREE.Highres/blob/612808977e3098aa207fa7ceda1b2748640c1af4/src/highres.js#L266

renderNormal (array, size) {
    this.rt = new THREE.WebGLRenderTarget(size.width, size.height)
    this.renderer.render(this.scene, this.camera, this.rt)

    // wait here somehow until happy

    this.finishRender(array, size)
}

You can then rebuild the library with npm build or use the class directly in your project. Also, note that this is quite old now, so I am not sure it still works with the latest three.