I am building a game which has a UI similar to this interface in the Sims. I was thinking that one approach to rendering the options to choose from would be to render them and then take screenshots of each option that will then be downloaded… this will increase the build / download size, and also be more brittle as it relies on me making 3D models only to manually taking screenshots of the rendered 3D models and store those files in the right place. It is also onerous as every time I want to update the model I need to remember to update the screenshot.
An alternative I was hoping might be possible and easy would be to render each one of them into a new scene that is clipped by a UI rectangle. I tried searching for demos of this but could not find any. Does anyone know if this is possible?
Another approach might be to automate the process of rendering models / scenes, taking screenshots of them and then storing them into the right directory / file name. Does anyone do that / know of any example code demonstrating this?
Thank you for the speedy reply @carolhmj ! I will try to implement that into a UI Rectangle tomorrow and report back if I am successful… assuming no one else beats me to it
I did get a simple demo of a viewport working: Babylon.js Playground but I can’t see how to get that viewport into a UI element (inside a UI ScrollViewer).
So I went down the screenshots route and have got this far: https://playground.babylonjs.com/#G9JIJS#2 (if you open the console and run it you will see it log out the screenshot data and hit the debugger. If you change scene.activeCamera = camera//_mesh_preview_screenshots to scene.activeCamera = camera_mesh_preview_screenshots then the correct screenshot data is produced.)
For now I will write a script that produces all the screenshot previews I need and then manually copy them into the code like this: https://playground.babylonjs.com/#G9JIJS#3 to produce the desired result:
