[Open Source] Write spatial GUI panels in HTML & CSS

Take a look at the below at first:

(Online demo: JSAR-DOM on Babylon.js)

The new markup language XSML is a Babylon.js based framework. In XSML, I have designed a feature that allows developers to write spatial GUI panels using traditional HTML and CSS, making GUI development with Babylon.js more convenient. What do you think about it?

In addition, for 3D elements, I have introduced SpatialDocument and SpatialElement based on JSDOM, but they are fundamentally built on Babylon.js entities such as Node, TransformNode, and Mesh.

XSML and JSAR together form a framework similar to micro-frontends. You can easily integrate them into existing Babylon.js projects, for example, here’s a preview page of JSAR: jsar-dom/pages/impl-babylonjs.ts at main · M-CreativeLab/jsar-dom · GitHub. In addition to running the XSML requested by the user, there is also a persistent execution of a console.xsml, which is used to toggle the inspector (and later other XSML and features can be added to the same scene).

By the way, any XSML could be run at other host environment/scene like Unity, Unreal Engine, Bevy and anything else, that is because every XSML means a digital object/product with interactions, every object could be used in any scene in real world :slight_smile:

Are you interested in this new way of developing Babylon.js applications with mini-programs? Feel free to participate in the GitHub - M-CreativeLab/jsar-dom: The 3D-first designed DOM implementation for XR applications project, and let’s work together to make this approach more refined and enjoyable. Your contributions are welcome to enhance the functionality and fun of this method.

5 Likes

Nice, thanks for sharing it !!!

Very cool :slight_smile: