Hello,
I’m encountering an issue with handling aspect ratios in my project involving screens (plane) that display content (images or videos). I’ve implemented 3 aspect ratio modes: Fill, Fit, and Stretch.
The Fill and Stretch modes are working as intended, but I’m facing a problem with the Fit mode. The content is fitting into the screen perfectly, but I have problems with the remaining area.
By default, the remaining area is repeating the texture. To address this, I’ve used the CLAMP_ADDRESSMODE on (wrapU and wrapV), which successfully prevents the texture from repeating. However, with this mode enabled, the remaining area is stretching the edges of the content instead of filling it with a specified color (white or black) or at least stay empty.
I’ve prepared a Playground to showcase the issue: Babylon.js Playground
I’m unable to resolve this. I would greatly appreciate any insights or suggestions.
Thank you in advance for your help!
Hello and welcome 
Using the CLAMP_ADDRESSMODE, the texture coordinates are clamped which means they won’t go over 1 or under 0. So the extra space is indeed filled with the content of the border line, which uses to be fine when you have a transparent texture with some object inside (and transparent borders). Here one solution could be to simply edit the texture to add some transparent borders, which would be used as the extended part of the surface.
++
Tricotou
2 Likes
A custom shader might be required to do it and fill the empty space with color once outside 0-1 UVs
2 Likes
Thank you for the suggestion!
I’ve already tried using a canvas to modify the content and add transparent borders. This approach works well for images, I can draw the image onto the canvas with padding and then load the canvas as a texture onto the screen, which indeed resolves the issue.
However, I’m facing challenges when dealing with videos. Since videos can’t be directly drawn onto a canvas in the same way as images, I can only capture a single frame at a time. As a result, I need to process each frame and add transparent borders before continuously updating the texture, which is not an ideal approach.
I’ll try to use a custom shader as @sebavan suggested.
Thanks again for your help!
I’ve successfully resolved the issue by implementing a custom shader 
Aspect Ratio Handling - Fit Mode | Babylon.js Playground (babylonjs.com)
Thank you so much 
1 Like