Question: How to export a scene as a png file?

[Avi-Cohen-Nehemia]

Hi There, I was looking in the examples and package's docs but couldn't find a way to export a scene as a png file. Since we are dealing with a canvas element, I thought I could achieve that using vanilla JS but all I get is an empty image.

const link = document.createElement('a');
link.download = 'image.png';
link.href = document.getElementById('my-canvas').toDataURL();
link.click();

I thought maybe there are some special conditions since it's a 3d canvas? Does the package provides a way to export png?

[brianzinn]

Can you share how your Engine is created. You need to set preserveDrawingBuffer: https://doc.babylonjs.com/divingDeeper/scene/renderToPNG#createscreenshot

You can use useScene hook (inside of <Scene ..> </Scene> children) to get the engine/scene and activeCamera if you have just one camera. Does that help?

[brianzinn]

hi @Avi-Cohen-Nehemia I made a code sandbox with the babylon tools: https://codesandbox.io/s/compassionate-ganguly-y2zrf?file=/src/App.tsx

clicking the button triggers download of file:

re-open if that doesn't solve your issue. cheers.

[Avi-Cohen-Nehemia]

That did help @brianzinn, thank you very much! 🙏🏼