For a few years now, one of my free-time projects has been to start answering the question "what would HTML elements with 3D powers be like?"

The project is Lume, working towards a 1.0 release. Lume provides a set of HTML elements for 3D rendering, built on three.js for rendering, with a system for defining new custom HTML elements with reactivity and templating powered by Solid.js.

Here is Lume's "hello world" example.

Paste that code into a CodePen pen, and you will have a demo that simply works (no build tools required!):

In this Disco Helmet example, remove the enable-css="false" attribute, inspect the elements in your browser devtools, hover on a <flickering-orb> element, and notice that the browser will natively show you the position of the 3D object in the view, and that we can change the color of a light right from the inspector:

We removed the enable-css="false" attribute (it defaults to true) to make Lume apply CSS 3D transforms to the elements. Lume's CSS transforms are aligned with the WebGL transforms, which is what tells Chrome devtools where WebGL objects are located on the screen. This is nifty for development and debugging! We didn't have to install additional devtools like we would with React, Vue, Svelte, etc. Custom HTML elements are simply supported out of the box by browser devtools!

With CSS rendering enabled using enable-css="true", we get the ability to combine today's standard built-in HTML elements with Lume's 3D elements. The next demo shows the browser's built-in <button> elements mixed with Lume's WebGL rendering. Right click and inspect the buttons!

This is powerful because it means we can use all of today's HTML/CSS abilities inside of a 3D space with additional graphical powers, gaining accessibility of 3D content.

3D content made with Lume is not only more accessible to humans, but also to robots such as

• screen readers
• search engines
• automation and design tools
• and AI

Here is Lume in the wild, in an app called Neo Fairies that gives players the ability to own characters in a fantasy-punk open world:

Besides 3D elements, Lume also provides Lume Element, a system for defining custom elements. The next demo shows a <name-card> element that has no relation to Lume's 3D elements. It is a custom element that is composed only of today's built-in elements. None of Lume's 3D features are loaded in the next demo, only the necessary pieces for making Custom Elements are imported and downloaded:

In a following article, I'll describe additional features that Lume builds on top of Three.js, as well as more details on parts of Lume's road map which include:

• 3D elements for geospatial globe/planet rendering powered by lume/harp.gl
• AR/VR/MR/XR controls
• 3D-oriented UI component library with the ability to transition from 2D UIs into 3D XR UIs
• HTML elements for applying physics to objects
• 2D and 3D layouts
• Server-side rendering of 3D scenes for simple resumability and link sharing of 3D experiences
• Compilation of Lume's TypeScript codebase to WebAssembly and native, including Three.js and Solid.js (more on this later!)
• A no/low/full-code creative studio and IDE with AI assisted asset and code generation
• And more...

I'm excited to see where HTML 3D can go. We have some fun work ahead!