I am revisiting some code I wrote a few months back when I was new to BablylonJS.
I have a “screen” in my scene where the user can choose to upload an image or a video.
I create a plane of a certain width and height and add a video texture or a regular texture that is an image.
The catch-22 seems to be that you need to know aspect ratio before you create the plane since the default behaviour of textures seems to be “stretch” - so if you make a plane mesh say 400 by 300 and the load an image that is say 600 by 200 you will have distortions.
I solved this for the image option by giving the user a nice little thumbnail of the image they uploaded in the control panel I provide for them - I create the planar mesh that is to become the screen only after the thumbnail has been loaded - and at this point in time I can interrogate the loaded image - ask for its natural width and natural height and make my planar mesh accordingly so what looks like an attractive detail for the user is actually an opportunity for me to get my hands on the loaded image before I commit to specifying the size of the planar mesh (screen) I wish to display the image on inside the scene.
Not so sure I can make this quite as nice for HTML5 video - especially since the user can upload a video OR an image - and I would like to make appearance and functionality very similar irrespective of which media type the user decides to upload.
This made me wonder about my strategy ie load the image or video to some kind of a ‘control panel thumbnail’ just to get aspect ratio so that I can make up a planar mesh ‘screen’ with the correct aspect ratio.
I wondered if there is an option I have missed?
in HTML you can specify only the width of an image and know that the height will be automatically adjusted to preserve aspect ratio of whatever you load.
Is there a way of informing BabylonJS video and regular textures that for instance the texture should occupy the full width OR the full height of the planar mesh that is to serve as a ‘screen’ but if necessary a black bar should appear Left and Right OR top and bottom in order to preserve the aspect ratio of the media being displayed?
Effectively an auto-adjust rather than a stretch?
For my purposes it would be fine if the image or video aspect ratio was preserved - black bars would be fine. The media I am loading is used by the user to capture geometric relationships so I need it to be distortion free.