Displaying 3d objects in a 2D grid?

[Nodragem]

Hello,

I am making an inventory and I am wondering if there are simple ways to display 3D objects in the cells of a BABYLON.GUI grid?

Any ideas? 

[Guest]

You can use the new GUI3D mechanism for that:

http://doc.babylonjs.com/how_to/gui3d#planepanel

And you can render the grid itself on a mesh using regular 2D GUI

[Nodragem]

Yep, the idea was to mix 3d and 2d objects because, for instance, I wanted to put a 3d object in a 2d GUI container.

I finally used 3d planes with an orthographic camera.

I found a way to match the size a my main 3d plane with a 2d GUI rectangle. Hence I thought I could use 2d GUI buttons and grids, but no: you can't position them using percentage, hence their position is dependent on the screen resolution... While 3d objects are not. 

[brianzinn]

What I did (and it's slow), was create a part of my scene with 3d models and take screenshots with a second camera and then use those in the 2D GUI.  Sounds like you have a better way, but I can't quite visualize it.  I don't know what a 3d plane is for example.

[Nodragem]

I meant a plane, as in a flat surface made of 4 vertices. I used the term 3d plane as opposed to the 2d GUI.

So basically, I made an orthographic camera this way:

this.camera.orthoTop = 1080/2;
this.camera.orthoBottom = -1080/2
this.camera.orthoLeft = -1920/2
this.camera.orthoRight = 1920/2;

 

This set up simulates a 1080 x 1920 resolution, that's a "virtual" resolution, because it is independent from the actual resolution of the device screen. That resolution is in world coordinate and reads in fact as 1080 meters x 1920 meters rather than 1080 pixels x1920 pixels.

Then I make my 3d objects (planes, cubes, characters) so that their largest side measure 1m. 

Hence if I apply mymesh.scaling = 120, the largest side would measure 120m, which will correspond to 120 virtual pixels.

Virtual resolution is a common method to make GUI independent of screen resolution. Using this method the size of the objects/menu will resize automatically for any screen resolution as their position/scale are in world coordinate (meters).

 

The main problem as for now is that BABYLON.GUI does not use a virtual resolution. Hence the only way to match the 2D GUI with the 3D objects rendered with the ortographic camera is by using percentage of the screen space. However, as far as I know, BABYLON.GUI does not support percentage for position (left, top). Hence at the end of the day, I made all my GUI (buttons, textBlock, etc...) with 3d planes, so that the GUI scale automatically and in accordance with the other 3D objects.

@Deltakosh An obvious feature request would be to implement virtual resolution in BABYLON.GUI. It is quite common in game engines I think and would help mixing 3d objects and 2d GUI.

 

EDIT: if you wanted to have a perspective camera to render the 3d objects on top of the GUI, the process would be a bit more complicated. You would compute the distance at which your camera is covering 1080 meters x 1920 meters and place/organise your objects on that plane. However your 3d objects will suffer from perspective distortion when they are near the border of the screen. If that bother you, you would need to consider having one perspective camera per 3d objects, so that all the 3d objects are rendered in the center of their camera.

[Guest]

everything can be expressed with % (even left and top): https://www.babylonjs-playground.com/#XCPP9Y#712

[Nodragem]

ha ok  I thought it was implemented only in the preview version for some reason.

So I guess I have no reason to use 3d planes anymore!

[Nodragem]

Also, I need to check if the font size be percentage  

 

[Guest]

It works

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

[Nodragem]

Yep, I gave it a try yesterday. But I need to find a way to resize the canvas or my web browser's window while keeping a fixed vertical to horizontal ratio. Without that I cannot judge if the text stays within my buttons.

I guess that one thing that could be nice is that BABYLONJS could compute the fontsize for the text to fit the button. I did find some documentation on how to do it in the BABYLONJS documentation on drawText() for advanced textures. However, it might be nice to have such a feature out-of-the-box. Of course, we could freeze /unfreeze the fontsize.