A graphical scene is made up of a hierarchy of objects called a "scene graph", A scene graph is a "tree" structure containing the objects that specify what will be rendered on screen.
A browser's Document Object Model (DOM) is a scene graph that has traditionally been used for 2D graphics. LUME brings 3D to the DOM, or shall we say, LUME brings the DOM into the future. 😎
💡Tip
The DOM is a tree of HTML elements that are in a web page. Here's Mozilla's introduction to the DOM.
The following graphic shows the idea of a hierarchical tree. The graphic itself is created with a tree of (Lume) elements (a scene graph) that defines the following visual depicting the concept of a scene graph.
<style> html, body { width: 100%; height: 100%; } lume-scene { user-select: none; } .line { background: black; } lume-element3d:not(.line) { font-family: sans-serif; background: skyblue; border-radius: 3px; } lume-element3d div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>The top-level node in a LUME scene is always a <lume-scene> element. The
<lume-scene> element creates an area in which we'll render LUME-based
graphics. Below the scene element are other types of elements that render in
different visual ways.
This next example shows how parent elements affect the positioning of child
elements. The positions and rotations of the child <lume-element3d> elements
are relative to their parent <lume-element3d> elements. This is why the
parent-most element only rotates but does not move to other positions, while
each child not only rotates but also moves due to the rotation of its parent.