Video Textures - aspect ratios

Questions
1

Hi,

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.

2

The HTML video tag can provide you with the video width and height so you can change the size of the panel accordingly - javascript - HTML5 Video Dimensions - Stack Overflow

We expose the video tag as part of the texture (.video)

3

Hi Raanan,

Thanks, yes I found that page earlier today - I have just completed coding around it, now

I effectively have a video OR image thumbnail ( I use display:none to show only the one that is required according to which file type the user loads ).

I had some concerns of effectively having two video elements feeding off the same video source - would there be performance issues, would the video file be loaded twice and so on - I was imagining more issues than with still images.

With images we already know that the browser tries not to load the same image file twice but instead shares between elements that refer to that image file.

I had concerns that video might not be so nice, I am loading the video from into a ‘thumbnail’ video player which is only there to enable me to get the video size - I then create the planar mesh and video texture to create my screen now that I know what size to create the screen and then assign the video source to that texture.

I have not fully tested but so far in Firefox the thumbnail video player does not seem responsive once I have loaded that same video into the Babylon video texture and played it there - this is actually desired behaviour - once I know the size of the video to play in Babylon then the video thumbnail is not really wanted anymore - not functionally anyway - as things stand all I get is a still poster image which is great since that mirrors the look and feel when I load a still image instead of a video.

I was not aware I could get at the video tag through the video texture, I think that would have solved my problem since I could get the size after creating the texture but before creating the planar mesh.

Its late now so I will continue tomorrow - but this makes me wonder if the Babylon texture for a still image can also expose the natural image size - that would provide a neat solution for video or still image textures… load texture => get sizes / aspect => make planar mesh screen.