Draw png over what is rendered

Questions
1

Et bonjour

I would like to display a transparent png over what is rendered.
For example, if I want to simulate to be in a car, at the bottom’s screen’s edge, I would find the dashbord, on the sides, I would have the visible parts of the windshield of the car, and at the top the mirror.
And in the center, it will be my 3D scene.
And this picture should be static, and never move or change, even if my camera move…
Is it possible to display such picture ?

Searching about that, I found this : StarFighter, but all the edges (cockpit) are made using babylon.js engine.
I search the same example, but using a static transparent picture.

Thanks for all your great examples. It’s a real pleasure working with this engine :slight_smile:
Jean-Pierre

2

Is this what you are looking for : Use Layermasks and Multi-Camera Textures - Babylon.js Documentation ?

3

Et bonjour,

Thanks for your answer, and for yours examples you share. Your StarFighter is very interesting…
I think you are right, LayerMask and multi camera is a part of the solution…
I was thinking about something simpler, but what you provide seems much more powerfull.

And how to load transparent picture/png ? I saw a solution using SpriteManager, but do you have something simpler ?

Thanks
Regards,
Jean-Pierre

4

An alternative is How to combine Babylon.js and Pixi.js - Babylon.js Documentation or use html image with style position absolute to put image on top of canvas displaying the scene

5

Hi guys.

Using BabylonJS GUI, you can also put an image onto the screen… sort of “locked-to” the camera.

https://www.babylonjs-playground.com/#XCPP9Y#866

Many other GUI “controls” are available to be placed-upon that ‘AdvancedTexture’, too. You could actually create REAL CONTROLS for each one on the picture. BabylonJS GUI… could make the image come-alive, if wanted. :slight_smile: Hope this helps.

7

The easiest is to rely on layer: https://www.babylonjs-playground.com/#08A2BS#8

8

Many answers, and many solutions. Thanks…
I have not chosen yet, but with all these solutions, I do not worry.

Thanks again…
Jean-Pierre