How to scale GUI text with camera distance?

[jaredm]

Hi, I'm looking at the GUI example here: http://www.babylonjs.com/demos/gui/ and wondering how I can scale the 2D elements to shrink as the camera zooms out (i.e. fixed sized relative to the mesh/3d context)?

[Wingnut]

Hi @jaredm, welcome to the forum.

AdvancedDynamicTexture (the basis of Babylon GUI) can be used as a texture on a plane, and then it can be zoomed/backed-away like any other plane.

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

This is an arcRotateCamera, so use mousewheel to zoom/back.  It will also work with a freeCamera's arrow keys.

Would this work for you?  If not, there may be other more-technical ways.

[adam]

https://www.babylonjs-playground.com/#ZI9AK7#124

[jaredm]

@adam That is EXACTLY what I wanted! Thank you.  And @Wingnut - that sample is something I know I will need later so bookmarked.  You guys are great!

[Wingnut]

Great!  Yeah, at the heart, the only difference is Adam's is billBoarded and might use 'mesh tracking'.

I saw Adam in the thread with me, so I figured we were in an answering race.  He's a great coder... so I figged I couldn't win. 

But I did, but you liked his, better.  heh.  I figged Adam was actually going to bind camera z-position or camera.radius... directly-to some Babylon GUI scaler.  He's certainly smart enough to pull that off.  But nope, he used a panel... just like me.  FUN!  I like Adam... he's a SUPER forum helper and framework contributor.  Me and the boys built him a mansion on Lake Babylon... so that he'd NEVER leave us. 

[dbawel]

@jaredm-

I assume you're simply testing various GUI elements for reference. I just wanted to point out a couple of issues which I have found to become personal references in building UIs over the past few years. Firstly, I don't recommend image based color pickers, as these can be difficult to manage in varying OS', devices, and browsers. I personally prefer color pickers which are exclusively JavaScript based; as this affords me far greater flexibility.

Also, I was building all of my UIs using WebGL (babylon.js specifically), and stopped this practice as I had many issues with maintenance of the UIs over time. Instead, I build all GUIs using native HTML5, CSS, and non-WebGL JavaScript, as again, I find far greater flexibility and far less problems as outside of rendering meshes, I can create GUI elements with greater functionality which natively run on every device, OS, and browser. Whereas using WebGL, I was constantly battling all three of these elements and would quite often find my GUIs wouldwork in one version of BJS on most every device, yet stop functioning on some devices, OS, and browsers upon the next release of BJS, and/or browser updates - as there are still so many variables in the functionality of WebGL for devices and browsers - as WebGL is still a young standard comparatively.

As is obvious by reading my posts, I love babylon.js. However, I have lost many hours trying to make BJS the one framework to do EVERYTHING; and this has cost me allot of time and resources as well as limiting my ability to create tools and styles which are often quite simple to create in HTML, CSS, and JavaScript. I've mentioned this before, and am posting again, as I find that the current mindset appears to be to make babylon.js do everything in building content, games, and rich user experiences - excluding most of the basic tools which already exist and do many of these functions better. So I just wanted to point out that I personally am able to develop rich content and applications much faster when working with WebGL as an element among many others in developing on the web. Whereas for over one year, I took the path of developing most everything strictly within WebGL, and excluding many of the proven tools which are far more compatible acros multiple devices and browsers, and require far less maintenance in the long run - and often the short run as well.

Please don't get me wrong, as I'm a true believer in WebGL and specifically babylon.js. However, I find that many of the questions on this forum and questions I used to ask could be solved far easier by working outside of WebGL, and using WebGL for what it is best for - in rendering meshes and animation, and shading rich environments and objects which rival many of the best OpenGL games on the market these days. This is simply my personal observance and experience, and I'm far less of a fan of building GUIs using WebGL these days than I used to be. For me, it's all about keeping my options open. And FYI - I'm not suggesting that you are not considering all options and simply exploring WebGL GUI elements. Your post simply provided me the opportunity to make this point. And by the way - nice work on the GUI elements.

Cheers,

DB

[jaredm]

Thanks @dbawel - I appreciate you sharing your experience.  We're building tool to visualise application source code and data models so it's not quite a game

In this case, we have to label a bunch of elements with some basic text.  I already understand how trying to re-invent everything in WebGL could be painful so we're only displaying the minimal amount of textual information in WebGL itself and for everything else we have an HTML div that we overlay on mouse clicks/hovers.

[aanaa]

hi @jaredm  I happen to have stumbled across this post to solve the same problem, and I'm also prototyping a source visualisation! You must be a long way ahead by now, have you got anything you can share?

Thanks

[dbawel]

PHP, CastorGui, Bgui.

DB

[dbawel]

And for Gui elements - DONT SCALE WITH CAMERA...

DB