Taking screenshot of the invisible scene with multiple models

[de-tester]

It looks like there's a race condition or rather unexpected behavior with the displayCanvas and invisible(not in the viewport) multiple models.

Lets take example of 2 models side by side. If those models are out of the viewport multipleScenesVisible would be set to false since none of the models are in the view port. Because of that displayCanvas would always use this.canvas3D meaning that if you want get access to the canvas that's off the screen you'd get last rendered and not the canvas for that specific scene.

The reason displayCanvas is to take screenshot, meaning if there's no models in the viewport it's impossible to take a screenshot of it even if it's rendered.

What's the easiest and most convenient way to get proper canvas each time?

• Putting empty visible modes to get more than one model in the view port - will fix an issue but looks like a terrible hack
• Add separate renderer for each model - should fix an issue but might have performance implications
• Somehow disable countVisibleScenes
• Try to access scene.element[$canvas] directly - not sure how to do that and what might be an implications of it since countVisibleScenes is used in other places for render as well.

Non of the above solutions seems to be proper one for the situation described.

Thanks!

[elalish]

We have a dedicated screenshot method: https://modelviewer.dev/docs/index.html#entrydocs-loading-methods-toBlob - is there any reason that won't work?

[de-tester]

@elalish It won't work for exact reasons that i've described.
toBlob under the hood makes this call blobCanvas.getContext('2d')!.drawImage(this[$renderer].displayCanvas(this[$scene])
Note that displayCanvas(this[$scene]) would return renderers canvas3D property if there's less than two models visible on the screen. Meaning that you are unable to get display canvas for the model if it's off the screen regardless what method you use toBlob or toDataURL. That statement is true only if you have multiple models on the same page.

------- (page top)
Content
------- (viewport edge)
Model A
Model B
------- (page end)

With the content located like that toBlob would always return canvas for Model A or Model B just based on which one was loaded last. I.e it's always same canvas of one of the models because displayCanvas optimization strategy.

[elalish]

Thanks, that sounds like a bug report. Would mind filing an issue and critically, including a link to a minimal test page where we can reproduce the problem?

[de-tester]

Created #4691