Skip to content

v0.3.0-alpha.8

Compare
Choose a tag to compare
@trusktr trusktr released this 17 Jan 21:57
· 421 commits to develop since this release

This includes updates from v0.3.0-alpha.4 to v0.3.0-alpha.8

Get them while they're hot!

Features

  • feat (from alpha.2): add the VisualLayers class adapted from my work at https://discourse.threejs.org/t/multiple-scenes-vs-layers/12503/34. We will soon use this to implement a declarative way for specifying visual layers in HTML markup. bdac4ee
  • feat: add a center-geometry boolean attribute to <lume-gltf-model> that when true centers all of the model's geometry at the origin. f1a2856
  • feat: add an interactive boolean attribute to <camera-rig> that when false disables user interaction, useful for non-interative positioning of a camera using a camera-rig as the positioning mechanism. 76da7ed
  • feat: add fogMode, fogNear, fogFar, and fogColor attributes to <lume-scene> to set a visual fog. 18fe01a
  • feat: add a .fogDensity property to Scene to configure fog density with fogMode is expo2. 3e45dd0
  • feat: cameraNear and cameraFar properties to control the near and far of a Scene's default camera. e24cdb7
  • feat: Pass a second argument to render tasks containing the delta time for convenience. 0051a78
  • feat: add a .swapLayers property to Scene to allow the CSS layer to be rendered below the WebGL layer. 762704f
  • feat: feat: initial <lume-instanced-mesh> element. We are able to supply instance positions, rotations, and colors via
    properties or attributes of those names, each taking an array of numbers. Attributes accept a string of comma-separated number triplets such as position="1 2 3, 4 5 6, 7 8 9" with each triplet being an X, Y and Z value. ec85416 20b9906

Fixes

  • fix: don't forget to remove ScrollFling's and FlingRotation's render tasks (i.e. terminate any animations) on stop(). ded9fe2
  • fix: disconnected children were not having their three object removed from rendering. 21f40de
  • fix: Firefox has the older version of ResizeObserver without the arrays of size values for column layouts, so LUME was broken in Firefox. Adds a fallback to the non-array contentBoxSize value. 97de8f8
  • fix: improve Scene's shadow DOM so that absolutely nothing in there can be interacted with, i.e. no pointer events, etc (it is implementation detail for rendering only). 84762e1

BREAKING CHANGES:

  • breaking: A FlingRotation instance no longer automatically starts on construction; the start() method should be called manually after instantiation. 8a1b4b7
  • feat / breaking: ShadowDOM composition edge case bugs are fixed, and thus it is finally and officially fully supported, plus new DOM traversal APIs! See more info below. 23033d2 aa25085
  • breaking: all Solid.js dependencies updated to v1.0. This may make newer elements incompatible with older elements due to underlying differing compilation outputs depending on different Solid runtimes for HTML/JSX template functionality. 598d1b5 9056944

feat/breaking: ShadowDOM composition edge case bugs are fixed, plus a few new APIs.

Massive cleanup:

Factor out some old code from a few years back, making the tree structure
easier to understand and less error prone. This allowed us to make more sense
of the ShadowDOM composition stuff and to be able to finally polish the
remaining rough edges. 🎉

BREAKING CHANGES:

To clean up the code and finish ShadowDOM composition, we removed some APIs:

  • Removed the TreeNode APIs add, addChildren, removeNode,
    removeChildren, removeAllChildren, childCount, subnodes, and
    parent. You must now simply use the actual DOM APIs like append,
    appendChild, remove, removeChild, parentElement, children, etc.
  • Removed Scene.mount() and Scene.unmount(). Just use regular DOM APIs to
    append or remove a Scene from the DOM.

Unrelated to ShadowDOM composition, we cleaned up some other things too:

  • Removed the old imperativeCounterpart property.
  • Renamed _render() to update() because it is called from the outside in
    the Motor class.

The stuff we removed existed for two reasons:

  1. The TreeNode APIs (add, removeChild, etc) existed from before we were
    using Custom Elements, just plain JS objects, so we needed our own tree API
    in order to create our scene graph
  2. When we added support for Custom Elements, we initially had two trees, the
    DOM tree and our own scene graph tree. Our tree had all the logic and the
    DOM tree was merely an interface that proxied data to/from our tree. The
    idea was that a plain JS user could use our tree APIs in non-DOM
    environments, and DOM users could use the custom element tree. We have since
    merged the two trees so our LUME objects are also the custom elements
    themselves. With removal of our old TreeNode APIs, we can later support
    non-DOM environments by instead polyfilling some of the DOM tree APIs as
    needed in those environments.

Other new features:

feat: Added new APIs that are LUME-specific and complementary to DOM APIs:

  • .lumeParent - Get the parent element of the current LUME element only if
    the parent is a LUME element. Returns null if there is no DOM parent, or if
    the DOM parent is not a LUME element.
  • .lumeChildren - Get the child LUME elements of the current LUME element.
    This ignores any DOM children that are not LUME elements; those elements will
    not be included in the result array.
  • .lumeChildCount - Get the count of child LUME elements of the current LUME
    element. This ignores child elements that are not LUME elements.
  • composedLumeParent - The composed parent LUME element (based on the composed tree) of the current LUME element.
  • composedLumeChildren - The composed child LUME elements (based on the composed tree) of the current LUME element.
  • .traverseSceneGraph(visitorFn) - Traverses the composed tree of LUME
    elements in pre-order. The tree that this traverses is the tree that is
    composed from the hierarchy of ShadowRoot trees with elements distributed
    through those trees via slot elements.

In these new APIs, non-LUME elements are ignored similarly to how some regular
DOM APIs ignore text nodes (.children, .parentElement, .assignedElements,
etc). To certain LUME elements like <lume-node> or <lume-mixed-plane>,
non-LUME HTML elements and text nodes are merely content that render on their
rectangular flat surface, and those non-LUME elements are not part of the
hierarchy of 3D objects, so these new APIs make it easier to traverse LUME elements
while ignoring the rest.