Jump to content

Displaying 3d objects in a 2D grid?


Recommended Posts

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...