Unable to get canvas of the invisible model if there are multiple models on the page and there are less than two models visible
de-tester opened this issue · comments
Description
Due to Renderers countVisibleScenes optimization it's impossible to get access to the canvas of the particular model if there are less than 2 models visible on the screen.
displayCanvas method will always return canvas3D property if there are less than two visible models, meaning regardless of the selected model one of the models canvas will be used.
In the live demo if you use buttons on the top you'd always get image of one of the models, once you scroll to the point when both of the models are visible and using buttons on the bottom will always produce proper result. Event handlers for both sets of the buttons are the same.
Live Demo
Make sure that both of the models in the demo are below viewport(invisible) otherwise it'll be impossible to reproduce an issue. Models loading is set to eager so they'd be loaded properly.
https://glitch.com/edit/#!/easy-glow-medicine
Version
Browser Affected
- Chrome, version: xx.x.xxxx.xx
- Edge
- Firefox
- IE
- Safari
OS
- Android
- iOS
- Linux
- MacOS
- Windows
Interesting, thanks for the clear repro link. You say
it's impossible to get access to the canvas of the particular model if there are less than 2 models visible on the screen.
But what about in the common case of a single model visible on the screen (1 < 2)? Is that also broken? That would be a bigger deal.
Remind me what the use case is for screen-shotting models that aren't visible on the page? I'm not quite sure how easy this will be to solve, so I'm tempted to just add some documentation. Of course PRs are always welcome, since it looks like you've found the source of the issue.
But what about in the common case of a single model visible on the screen (1 < 2)? Is that also broken? That would be a bigger deal.
Here's the table that hopefully would give a better understanding what are the cases for an issue.
For instance at https://glitch.com/edit/#!/mountainous-truthful-homegrown you can get model b canvas even though model a is visible. You might need to reload it couple times, it totally depends on timing.
| Number of Models | Models Visible | Can access canvas |
|---|---|---|
| 1 | 0 | ✅ |
| 1 | 1 | ✅ |
| >=2 | 0 | 🛑 |
| >=2 | 1 | 🛑 |
| >=2 | >=2 | ✅ |
Remind me what the use case is for screen-shotting models that aren't visible on the page?
In my case it's a carousel with one model per slide and some image transforms that needs previous and next slide image.
Of course PRs are always welcome, since it looks like you've found the source of the issue.
The fix that I see the simplest right now it to add/rename displayCanvas to canvas and make it look like
canvas(scene: ModelScene): HTMLCanvasElement {
return scene.element[$canvas];
}displayCanvas is only used in the toDataURL and toBlob methods. It looks like there's not much benefit of using canvas3D for those use cases.
Renaming might not be good since it'll be a breaking change.
Please let me know what do you think about it.
Thank you! Anything not exposed in our public (documented) API is not a breaking change, so I'm not too worried about this. A PR would be most appreciated, and I'll be better able to review in that form.
Close, but if you always use $canvas, then it breaks when only one model is showing (particularly after interaction) since it doesn't bother updating the non-shared canvas if it doesn't need to. I just needed to make sure it always uses $canvas for invisible elements.