An Adventure with the Babylon.js GUI System!

@yuripourre this looks GREAT

@PirateJC Thanks, it is very simple I didn´t have enough time to polish it but does the job. I am getting inspiration from Beat Saber.

1 Like

@mawa You did a great job, the environment and the UI really match!

Although I like the wood frame a lot, the image without it for some reason looks better.

1 Like

Thanks for your kind comment. :hugs:

What you cannot see in the screenshots (obviously) is that both visuals will be available for all pictures.
You can interact with pictures in frames to scale them up to a holographic projection. For each frame, you will also be able to call a menu to select between 4 different artworks from the artist.
This morning, I have just finalized the base of the logic and mechanics for both landscape and portrait format. I can now generate n numbers of each in the scene by changing 2 variables. What the variables cannot do automagically :magic_wand: is gather the source of all these Artworks :cry:. Nearly a project within the project, since there will be around 200 paintings, 100 photographies and 50 other format (i.e. street-art). Let’s just say I’m not there yet. But at least I’m happy that the base of the logic and the base of the design is in. I hope I will soon be able to share a link to let you Guys discover this. Meanwhile, have a great day :sunglasses:



.

3 Likes

Hey Everyone!

We’re excited to announce an official end date to our friendly “Summer GUI Adventure” contest.

The contest will officially end on Oct 14th!

That means you’ve got a little less than a month to put make your Babylon GUI experiences sing!

We can’t wait to see what you create!

And if you’re just joining the contest, there’s no better time to start. :slight_smile: You’ve got an opportunity to win a signed copy of the upcoming Babylon.js book by @jelster called “Going the Distance with Babylon.js.”

We’d love to see you post your progress here along the way!

3 Likes

There goes the faen deadline :grin: I was wondering when this would happen and when I would need to start putting-in the second gear on my lazy work for this :wink:
After having set-up a base for my 3D GUI interactions, I’m now back on my 2D GUI for meshes based on the capabilities of the GUI Editor (praise the GUI editor :smiley:)

This morning I have just finalized the interaction with my 3 hub doors. All made from instances and from a same GUI Editor ADT. I’m not gonna say it has been ez. I struggled because of my small brain and my doubts about the handling of the GUI from editor. But, turns out it works (finally :wink:)




Next step, animate and rule my 5 elevators in the scene. As of just now, I only have a rough idea of how I will be doing this (I bet it will be a long journey, but hopefully not all too long).

October 14, is it? I’ll try my best to meet with this deadline. :sweat_smile:
Meanwhile, have a great day :sunglasses:

Edit: BTW, forgot to mention that in between that, I had to return to my display of pictures in landscape and portrait mode and my 3D GUI. All that because of these faen ‘great artists’ from the medieval, renaissance or modern era that had just absolutely no respect for the digital art that would emerge 2 or 5 centuries later. :joy: These guys used just any size of canvas for their art; completely disregarding any known normalized ratio for screens :grin: And then, I won’t even mention the ‘title’ of their artworks. These are no titles. At the best, they are a description. Some are half a book. If they wanted to be remembered for their art of writing, they should have become great writers, not great artists :laughing: Seriously, how am I supposed to put into a label/button a title like “Cabane de bois parmis les oliviers et cyprés”… dixit Vincent–, … If you were not dead at this moment, we would have had a chat about this :joy: Anyways, I guess I fixed it now (hopefully :wink:)


5 Likes

Now that we have a deadline, I had to make some tweaks. Now it is more aligned with the Space Pirates theme.

The environment still needs some work. But it looks better than before:

Attributions:

3D Environment - Space station scene Wip 6 (Test) - Download Free 3D model by 3DHaupt (@dennish2010) [b60f824] - Sketchfab

Spaceship Icon - Spaceship - Free transport icons

Options Icon - settings Vector Icons free download in SVG, PNG Format

Credits Icon - Party Vector Icons free download in SVG, PNG Format

Star Map Dome - SVS: Deep Star Maps

Space Pirate Assets - GitHub - BabylonJS/SpacePirates: The Space Pirates game is a demo made to celebrate the Babylon.js 5.0 Release.

5 Likes

Is this still happening XD?

Here is my last minute delivery :sweat_smile: of this very early version of ‘Project Space Museum’.
The project itself and the GUI is far from something I wanted to show that early, but I hope yours will just focus on the parts of GUI that have yet been (partly) implemented.



The scene comes with two links for a view with the default arcRotateCamera (free, with panning, no collisions)
https://media-geneva.ch/demos/bjs/museum/museum.html

I also did a very rush version of a first person camera (with buggy coliders, sry :wink:)
https://media-geneva.ch/demos/bjs/museum/museum-fpc.html

Since the FS GUI is not done yet, I will need to give you some key assignments:

1 - To select the default camera
2 - To select the alt camera
0 - To reset the first person camera (important at this stage for when you are stuck or fall through the ground :grin:

X - To center the central sphere holo panel in front of the camera
w,a,s,d or arrows to move around with the first person camera
SHIFT - To toggle walk or sprint with the first person camera


GUI Featured:

3D GUI Cylinder panel, for the central sphere display. Not hooked to anything yet since the content that will be displayed in the central sphere is not done.

3D GUI for Pictures interface:
Click on the label (name of artist) below a picture/painting to call the interface.
Use icons to display menu (with a selection of 4 arts for each artist) and zoom icon to call a zoomed projection of the painting

2D GUI for mesh:

  • Lower level door controls. All 3 hub/docks access doors are operational. Click to open or close door
  • Elevators call controls. Click to call an elevator. Currently only one elevator can be operated at the time. Wait for the ‘Welcome’ text display to interact with dual elevators.
  • Elevator controls. Click on a floor to move to this location.

Only elevators number 1, 2 and 5 are operational at this moment. Elevators number 3 and 4 are not done yet (although they are basically a copy of 1 and 2 using the same functions and animations). Sry here also, just a bit short of time.


Last thing, if you want to take a look at the GUI Editor layout used for all of my ADT for mesh, this is the link in use in this preview:

#FEQNTL#70

So, as I said despite from being a very (too) early version, I hope you will still be able to get a feel of it.
Meanwhile, have a great day :sunglasses:

8 Likes

@PirateJC can we give @mawa his book now!? <3 :grin: :sweat_smile:

What can I say… I cannot disagree, can I? Or else I would need to become a reasonable person with an objective opinion on my work and the work of others… Just not sure I can achieve that :grin:

Well everyone, the contest has now officially closed and we’ll except your final submissions today.

Submission is as simple as putting a link to your GUI creation right here in this chat! We must have an active link for submission!

After submission, we will take some time to appropriately judge the submitted projects and we will announce the results in the coming weeks!

Thanks everyone!

annnnnd?

(21 day drum roll…)

lol yup annnnnnnnnd ???

LOL Sorry everyone! That’s on me!

It’s taken us some time to get the prizes signed by folks but we’ll be announcing winners next week!

3 Likes

Well without any further delay, it’s time to announce the winners of our Babylon Summer/Fall GUI contest!!!

HUGE congratulations to @Limes2018, @mawa @Pryme8, and @yuripourre!!!

For your efforts in creating some awesome looking GUIs, you’ll each receive a signed copy of @jelster’s Babylon.js book!

CONGRATULATIONS!!!

I’ll reach out via PM to get shipping addresses for each of you!

Since some time has passed since their entries, here’s a refresher look at what each winner created:
@Limes2018
image
image

@mawa
image
image
image

@Pryme8
image

@yuripourre
image

8 Likes

What can I say :hugs: :person_raising_hand:: I’m just so glad that BJS is more of a collab than a competitive environment :grin:
Else, I believe I would never have been among the winners :stuck_out_tongue_winking_eye:

Now if that’s so, I’m really eager to participate to the next Adventure. Please just make sure you don’t do it around fancy dev stuff such as shaders code or backend because I won’t be able to fake it as easily :rofl:

Also, for the price for the next adventure, since I now have my unique signed copy of the book :open_book: that will undoubtedly become a collector in a few years… I was just thinking, I could do with a new car :yum: :wink: :rofl:

4 Likes

Congrats to all the winners! Nice work!

3 Likes

Oh Wow, thank you so much!!! I wasn’t really expecting that, especially after seeing @mawa’s awesome work. This contest was a pretty good excuse to learn about babylon.js’ 3d GUI and sharp my typescript skills.

I will be waiting for the next challenges/adventures too, that was fun.

Btw, I am joining Microsoft next month (the team is not related to babylon.js nor computer graphics), but hopefully I can contribute even more to babylon.js.

4 Likes

Just spread the word that BJS is the best acquisition they have made in the past decade :grin: :wink:
Edit: …Apart from reviving the MSFS license :grin: :rofl: (a sim pilot’s view of course, no objectivity here of course :pilot: :wink:

1 Like