Jump to content

Metro Styled Templates like Windows 10 and Xbox One

Recommended Posts

Hello all, I have been messing around with Three.js but found Babylon.js to be more of my liking. What I am looking for is examples or templates for a standard WebGL/Canvas web page that resembles the metro style look of Windows 10 and Xbox One Dash. 

I also have questions of using Babylon with other frameworks like jquery, nodejs/expressjs, and others like it. What is the best combination of libraries that work in compatible with Babylon?

Thanks all!

Link to comment
Share on other sites

From what I know, the only GUI libraries for Babylon are bGUI and CastorGUI. I've never used either of them so I'm not sure how flexible they are. If you're not opposed to used libraries outside of Babylon, you can take a look at https://metroui.org.ua/

It's a css library that will give you the metro look and feel. You will then use javascript to interact with the UI and Babylon.js. 

I hope this helps.

Link to comment
Share on other sites

@Temechon makes a good point, however I like the ease of resolution independant (or dependant) scalability written into his bGUI extension, as this makes it much faster for me to build flexible GUIs. And I like CastorGUI used together with bGUI and Canvas2D - as the later two work in WebGL, and the added functionality of HTML objects in CastorGUI allows me to do things I currently cannot build in WebGL directly - such as to generate additional HTML canvas' for floating windows and other functions within HTML.

This is all simply personal preferences, but I prefer to take advantage of all 3 in my applications.



FYI - CastorGUI will also provide you with what you are looking for using a .css file providing the Metro appearance. And very easy to modify to make uniquely your own.

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...