Two questions re BABYLON.Layer imgUrl support and aspect ratio

Re https://www.babylonjs-playground.com/#08A2BS#1

I am trying to spec out if I can build a trace feature based on Babylon.Layer. The feature I want to build allows a user to upload a JPG, PNG and potentially SVG image to a url where that will get added to the scene similar to above and traced.

My first question is do we support svg or similar? Just using an example svg url with the above does not seem to render for me.

My second question, I noticed in the example above the aspect ratio of the layer is relative to the viewport of the screen. Is there a way to force the aspect ratio so that the layer will not bend with the browser size?

Hello and welcome to the forum!
We do support SVGs, and I’m able to use one in a Layer: https://www.babylonjs-playground.com/#08A2BS#383 What example SVG url were you using?
As for the second question, let me take a look :slight_smile:

1 Like

Thank you! I was just using a random example svg I found. The main thing I am trying to see is if I can convert a DWG file to an SVG and then embed that in the layer. So if I can at least get one standard SVG working I can get a spec for converting the DWG to SVG for web. Thanks.

Awesome! Yes, that should work :slight_smile:
It doesn’t look like we have a built-in way to force the original aspect ratio of the Layer’s image, since Layer is designed for fullscreen use cases. But you can do it manually with something like this:

3 Likes

Thank you! That works great.

One more question, is it possible to use a base64 encoded image with a layer?

It is possible - https://www.babylonjs-playground.com/#08A2BS#387

2 Likes

Nice! Thank you

1 Like

One more question, is it possible to change opacity of the Babylon Layer?

The opacity will come from your texture. Is it enough?

For Layer opacity control you may also use these parameters:

alphaBlendingMode: number
Define the alpha blending mode used in the layer in case the texture or color has an alpha.

alphaTest: boolean
Define if the layer should alpha test or alpha blend with the rest of the scene. Alpha test will not mix with the background color in case of transparency. It will either use the texture color or the background depending on the alpha value of the current pixel.

For further tuning you may use a separate camera and layerMask and postProcesses.

1 Like