Canvas transparency

[VinAr22]

Hello again! Im trying to save canvas as image like this

var data = renderer.domElement.toDataURL("image/png");
var img = new Image();
img.src = data;
$("body").append(img);

this way works only with three WebGLRenderer. In ray traycing renderer i get black background. Whats im doing wrong?

[jaxry]

That's a good question and I'm not sure. I can try to offer some possible solutions.

https://stackoverflow.com/a/26790802
If you follow the instructions here and get the code structured in the right order, does it work? If not, it may be because the renderer doesn't always draw to the screen each frame, and only draws to the screen when the next sample is completely rendered. In this case, does running your code inside the renderer.onSampleRendered callback work?

[RenderTool]

Hello! @VinAr22 I can save it normally on my Google browser, and it's also black on Firefox.

[VinAr22]

Hi! Thanks for the quick response. The method using requestAnimationFrame does not work. renderer.onSampleRendered did the trick

[VinAr22]

So i have another question about this topic. Maybe it is possible to save only model view on transparent background? :)

[jaxry]

Good question. It's not possible at the moment, but I'm in the middle of separating the different of stages of rendering (useful for spatial denoising) that will also make transparency possible as well. So we'll probably have that in a few weeks!

[VinAr22]

Hello! It'll be cool! Please let me know when it will be possible

[VinAr22]

Hello @jaxry! After the update, saving the canvas data does not work with renderer.onSampleRendered. :(

[jaxry]

Thanks for letting me know. onSampleRendered now measures performance as well, and to get an accurate number, the callback is called one frame after the sample is rendered to the screen. Doing so makes the callback fall out of sync with the browser's draw frame.

Unfortunately I don't think we can move the callback back to where it was. Instead, would a separate callback, like renderer.getScreenshot(callback) get the job done?

[VinAr22]

Hi @jaxry ! Thanks for the response. I understand correctly, this function already exists? Or is it just planned? it would be cool to be able to save a screenshot.

[nicolab28]

I have hard-coded this code:

if (typeof window.screenShot == "function") {
        if (window.doScreenShot){
          window.screenShot();
          window.doScreenShot=false;
        }
      }

At the end of the function drawTile()

if (isLastTile) {
...

HERE
}

[VinAr22]

Hi @nicolab28 ! Is it works with the last version of the ray tracing renderer?

[nicolab28]

I don't think I'm using the very last one, but I don't see why it won't work?