Forum

How to setup a HUD?

06 October 2015 16:40
Hi all,
I'm very new to Blender and Blend4web.
I'm looking for someting like a head up display, a 2D object (like a text menu, for example) that always look at the camera and don't change its position and dimensions while rotating and moving my camera.
As example, something like the Mi-34 Hermit demo.

Any advice?

Thank you
Isselnord S.r.l.
Digital Content Creation & Virtual Reality
Innovative Technologies Dept
06 October 2015 17:14
Hi and welcome to the Blend4Web forums!
I'm looking for someting like a head up display, a 2D object (like a text menu, for example) that always look at the camera and don't change its position and dimensions while rotating and moving my camera.
As example, something like the Mi-34 Hermit demo.
This can be done by parenting UI elements to the camera, like in this demo (the corresponding blend file can be found in the SDK).
Otherwise, you can use plain HTML/CSS and some JavaScript programming to make HUD, as it is done in this example.
The Founder | Twitter | Facebook | Linkedin
06 October 2015 17:47
Thank You!
I've experienced this a few minutes ago.

And what about hiding/showing groups using the "hide/show object" logic node?
Is it possible?

Thank you
Isselnord S.r.l.
Digital Content Creation & Virtual Reality
Innovative Technologies Dept
06 October 2015 18:53
Hi!
Hiding/showing groups is not supported now, but will be enabled in the near future.
In the meantime, you should use hide/show node for each object in dupligroup.
Alexander (Blend4Web Team)
twitter
06 October 2015 19:02
Thank you.
I have to hide/show several objects at the same time, i'll merge them into a single mesh.

thank you again
Isselnord S.r.l.
Digital Content Creation & Virtual Reality
Innovative Technologies Dept
18 March 2018 21:38
The demo has one flaw it is not responsive, more precisely the GUI is distorted, overflowing or not even visible on certain canvas aspect ratios.

misalignment
misaligned-gui.png

overflow
overflowing-gui.png

Victory Day 2015 works way better, and it has a Katyusha as a bonus , the key is to use the append_stiff_viewport function

I tried to resolve this aspect ratio scaling problem problem, by parenting all GUI element to one object (which itself is parented to the camera), and change the X and Y scale of that object to match to the canvas aspect ratio.

However I did not find an appropriate API call.

And tensors did not work, you just need to see tensor format to understand why.

> format: [X, Y, Z, SCALE, QUAT_X, QUAT_Y, QUAT_Z, QUAT_W]

Scale is one float…

So I tried with matrices and ran into this: or if you prefer Blender stackexchange:

Of course I could frame step a XY scale animation… but come on!

However the best example is the helicopter demo, for example it rotates the control object instead of scaling.
19 March 2018 14:57
Use Viewport Align for 3d-objects-based GUI. But for 100% responsive GUI use HTML-elements and css.
Alexander (Blend4Web Team)
twitter
19 March 2018 17:04
Thank you Alexander, you helped a lot , when you warned me that non-uniform scale is not yet possible.

I bypassed the problem using non-uniform scale animations exported from blender and frame-interpolation by frame stepping.

I wrote an exhaustive blenderstackexchange answer.

and here is sample project (.blend file link is in the readme).

It would be so awesome to create a responsive pure Blend4Web GUI… If I succeed with it, I will share the whole project.

However it is possible that my approach will expose some flaw in the long run, that case I will wait until the non-uniform scale support.
 
Please register or log in to leave a reply.