rendering to offscreen canvas

[Baker Xiao]

Hi folks,

How do we render a scene to an offscreen canvas? We want to use that to construct screenshots for people to download but we won't show these screenshots in the main game. 

 

Currently if we create a BABYLON.Engine with document.createElement("canvas") but don't attach this canvas element to document.body, we get errors like below:

[.Offscreen-For-WebGL-0x7fe2e1614a00]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete

 

Any trick to get it done?

[brianzinn]

Likely there is a better trick, but what about adding to canvas style= visibility:hidden?

[Baker Xiao]

1 minute ago, brianzinn said:

Likely there is a better trick, but what about adding to canvas style= visibility:hidden?

Lol that's exactly what I'm doing. But not sure if that creates any overhead to the browser or not... (e.g. would the browser still use the GPU for this canvas even though it's visibility:hidden?) Ideally I want to avoid burdening the DOM in any way. 

[RaananW]

I do believe your GPU will anyhow continue rendering (otherise, how would you be able to create a real-time screenshot?)

A quick experiment (setting the playground's canvas' visibility to hidden) showed that the before- and afterRender loops are being executed. Check the performance tab in chrome also shows the GPU continues working. 

I wouldn't call it an "offscreen" canvas. But it should work nonetheless