show LUME version and github link in console, and inside <lume-scene> elements

fix projected material behavior cleanup

Features

• make <lume-camera-rig> attributes reactive instead of accepting only initial values b48b682be7826233b8a92937c5ee4a5311f64d28
• make XYZValues x, y, z properties enumerable bd566f01041e78e464482895922ba8744464ca39 c97721754b4b497657015832515c6b0db106ea11
• make <lume-camera-rig> attributes reactive instead of serving only as initial values b48b682be7826233b8a92937c5ee4a5311f64d28
• initial standard-material and physical-material behaviors 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099 5711e8beeb04454b5484b11c1d4339f7d3b39269 (expanded from alpha.9)
• PointLight.power property 6cbedf6645761ddd2dfaa1b7579d12ae9516056b
• <lume-torus> element, torus-geometry behavior, and docs for other mesh elements db268f9ef2eca1e7f1bfc4a1d913d69074482eb7
• reactive .version number property on all elements increments when world matrices of an element and its subtree have been updated 4e555fa78ede362ebfa6d9d3d42086ea89c00000
• Scene.physicallyCorrectLights property to enable physically-correct lighting mode. c52628bd43b032a7afc5f2c9e448284765832f15
• projected-material behaviors for Mesh elements, along with accompanying <lume-texture-projector> elements that project a texture onto meshes, and doc updates 5f3587f3ab06b1d7f1411155733b2b8b7ec6b0ef
  • demos:
    • https://docs.lume.io/#/api/textures/TextureProjector
    • https://docs.lume.io/#/examples/picture-frame

Fixes

• initial pre-upgrade values on elements were not being honored for properties decorated with the @emits decorator bb02328a8d686c7722f592e3afb5e96fdbf50622

Breaking

• removed the @emits decorator, we now officially use the more robust and flexible dependency-tracking reactivity patterns for observing property changes bb02328a8d686c7722f592e3afb5e96fdbf50622
• remove valuechanged events from XYZValues and subclasses, no longer re-export @lume/eventful from the index fb7fcb373b367eb17bef36b33b2a2d7872e859f8 We're going all in on automatic dependency-tracking reactivity and discouraging event patterns except where it makes sense. We'll keep some events around that align with DOM patterns, for example load events for when elements are done loading.

Features:

• feat: <lume-3ds-model> element to load .3ds files. It works exactly like <lume-fbx-model> and <lume-gltf-model> elements, accepting a src attribute for the asset file path. The only difference is the name of the element. abb9c5a7a4086cdd830ce52da4afed41c732ede8

Breaking changes:

• breaking: update three to 0.139. This doesn't break LUME APIs, but any code relying on element.three to use Three.js objects directly may break, especially code that relies on Geometry APIs because the Geometry class was removed and all geometries that previously extended from Geometry now extend from BufferGeometry. 1e85a50ebd76e89294bf92b010676521ae6d74ec

Full Changelog: https://github.com/lume/lume/compare/v0.3.0-alpha.9...v0.3.0-alpha.10

Features

• add deltaTime parameter to property functions 32d2942ae5fe11c33187c011a32a2edb898709f4 f.e. element.rotation = (x, y, z, t, dt) => {...}
• add a ShadowRoot to <lume-camera-rig> to make it possible to position (slot) external children relative to the internal camera (f.e. for HUDs) https://github.com/lume/lume/commit/55d6f9954add5332dd95bd74c765209b338f44f0
• add missing types in base classes for TypeScript users. yay https://github.com/lume/lume/commit/2f068af672ab033b5c20dadb7f38653df32445d7
• improve DOM and JSX element types https://github.com/lume/lume/commit/80bd1263c5aefe2e7af75c465e49a77f5229e99b
• new <lume-shape> element allows for creating extrudable 2D shapes including the ability to define shapes with SVG path strings 9d3a37085b0ff792cf62295142f644caf80f3fb0 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• new <lume-clip-plane> element that allows clipping objects on a plane, along with docs and example 4c834df26191f0fb9d686778ca6a5a2b1515e7bf 6b69d0a29eb81da44ec7f4a25c663773cdec8976 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• initial standard-material and physical-material behaviors 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• more properties for PhongMaterialBehavior 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• add minHorizontalAngle and maxHorizontalAngle to <lume-camera-rig> to control min/max amount of lateral rotation 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• new <lume-cube-layout> element makes a layout with 6 areas, one one each side of an invisible cube 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• breaking: rename lumeParent to parentLumeElement 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
• new examples and docs!

Fixes

• fix: scene resize no longer moves camera to wrong position
• fix: removing elements no longer sometimes leaves Three.js object behind still rendering

Deprecations

• deprecate LUME.useDefaultNames() in favor of LUME.defineElements(), deprecate Class.define(name) in favor of Class.defineElement(name) https://github.com/lume/lume/commit/0a93fdd9acbd3aa6499e5cbb76125bdd72ef726c

Breaking changes

• remove the getter methods we had in place for Transformable and Sizeable properties, as TypeScript now has the ability to define different types for getters and setters of an accessor

  This removes Transformable's .getPosition(), .getRotation(), .getScale(), .getOrigin(), .getAlignPoint(), .getMountPoint(), and .getOpacity(), and Sizeable's .getSize() and .getSizeMode() methods.

  Migration: use the respective properties directly (.position, .rotation, etc)

  https://github.com/lume/lume/commit/f1f7055628b2d445b24a4ef8b19139310ab3409f

• better handling of string values, XYZNumberValues now coerces strings to numbers when setting x, y, or z, which can change behavior of an app in some cases. Migration: make sure you provide numbers, not strings; there is no way to restore old behavior because it was undefined. https://github.com/lume/lume/commit/79d514ffe41721eda86b2ee832b3b485dc015f36

• renamed lumeParent to parentLumeElement 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099

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. bdac4ee515a6972172bd5c28d4e2d93b5daa8124
• feat: add a center-geometry boolean attribute to <lume-gltf-model> that when true centers all of the model's geometry at the origin. f1a2856b867dee2de357473870a48a9a1e97035e
• 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. 76da7edb49d100a59ef3846c13597bb51969892c
• feat: add fogMode, fogNear, fogFar, and fogColor attributes to <lume-scene> to set a visual fog. 18fe01a562ff9251f047f6ad6a126e41104aea69
• feat: add a .fogDensity property to Scene to configure fog density with fogMode is expo2. 3e45dd06b9240311aca5eda3a47d1a5ba4b799d1
• feat: cameraNear and cameraFar properties to control the near and far of a Scene's default camera. e24cdb7b2d86a3401c68671846e92797e01e2a05
• feat: Pass a second argument to render tasks containing the delta time for convenience. 0051a783f33fadced022ef8a30e824be224e4f01
• feat: add a .swapLayers property to Scene to allow the CSS layer to be rendered below the WebGL layer. 762704f6e11dfec409c1c0486582209d88dea4d8
• 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. ec854161797c3875654b1a13b4f47c16692923e1 20b9906090ebd07040879a13115305acb3ae7c33

Fixes

• fix: don't forget to remove ScrollFling's and FlingRotation's render tasks (i.e. terminate any animations) on stop(). ded9fe229447d7e7069479adce1b83643e43ad11
• fix: disconnected children were not having their three object removed from rendering. 21f40de95e1d5a1a978d96679dbb7edeed2d23e8
• 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. 97de8f890b527f0a94f1e220b9cf0d8dfec9df55
• 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). 84762e19988b51e5617c8518365cfa137f58893b

BREAKING CHANGES:

• breaking: A FlingRotation instance no longer automatically starts on construction; the start() method should be called manually after instantiation. 8a1b4b7355f97a04ced712fbb0f0b8d3d6b40005
• 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. 23033d2b708d3840ea731fbd40cff00d151c9b74 aa25085d72c163924c0e94a009772c30d2b85a0f
• 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. 598d1b5b962f3217e3283df2d8103b60fcc5205e 9056944f756be98bf6d0e9fedb05b277649c4a37

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.

New features

• New lambert-material behavior. 797156360ad9f658bc0fdeb977abeb025ca89994
• New <lume-direction-light> element for defining directional lighting. 1ffd1818e107cbe3a16c18afdddaa71829c966f0

No public changes, just internal refactoring.

BROKEN, DO NOT USE

Version 0.3 is now in progress!

See the new demos!

Breaking changes:

• the flingRotation function was converted into a FlingRotation class, which now provides an instance with start/stop methods similar to ScrollFling. 444ecbe38414dbf60d9f4c0af115ce69821de66b

• add the <lume-fbx-model> element for loading FBX models. 6fbb1de0c1f27bcb7746179f9b7b8fb28548d06e

• use a single type of event for all model elements. All model elements (<lume-gltf-model>, <lume-obj-model>, <lume-collada-model>, <lume-fbx-model>, and any elements with a points-geometry behavior) now emit a generic event named MODEL_LOAD of type {format: 'obj' | 'gltf' | 'collada' | 'fbx' | 'ply'; model: Group | GLTF | Collada | BufferGeometry}, and a generic MODEL_ERROR event of type Error. The GLTF_* and COLLADA_* events were removed.

• support for declaration emit. This changes mixin type definitions and usage in order to make declaration output be possible import for TypeScript projects). Because of this, mixins are now called as extends SomeClass(Foo) instead of extends SomeClass.mixin(Foo), and come classes were converted to plain classes (use extends SomeClass instead of extends SomeClass.mixin(Foo) now). 56df57aaa9aec2bf738115c132cd5fd77bf842a1

  • Avoid use of "protected" and "private" modifiers by converting most private properties to #private fields and leaving "protected" properties public with single-underscore prefixes. A handful of private properties were left with double underscore prefixes because converting them to #private causes runtime errors.
  • Sizeable and Transformable private properties were converted to WeakMap storages. Let's see if we like this...
  • remove lowclass/Mixin from mixins
  • some classes were converted from mixins to regular classes
  • avoid default exports in all modules
  • update @lume/eventful with similar changes
  • some formerly private members are now public and prefixed with double-underscores __ to denote private. Do not rely on private members labeled with double underscores!, they can change at any time.

• reorganize folder structure to co-locate related classes independently. Too many things were in the core/ folder. If you're importing classes directly from LUME's sub-folders, this will break your import statements. b06766a79b78a1322b02d70377cc8ae86b040341

• rename LightBase to Light (the base class for <lume-point-light> and <lume-ambient-light> elements). 432b14bc30c59152b8eed3cc8df0f1667361aa4a

• rename AutoLayoutNode's add and remove methods to addToLayout and removeFromLayout, respectively, to satisfy the TypeScript requirement that subclass methods do not change the signature of superclass methods. 4a357a4d2541d0bfa57667cadf28bbf0e657dda5

• rename classes (along with corresponding element and behavior names) to follow a strict PascalCase convention, and one class deleted. e1366716df37e378f9a18a31abc7131370c5ed3d

  All words or "parts" or "things" of a name should have only the first letter uppercase and other letter lowercased. For example "GltfModel" instead of "GLTFModel", or "HtmlScene" instead of "HTMLScene".

  Main changes to worry about:

  • DOMNode (<lume-dom-node>) was deleted.
  • DOMPlane (<lume-dom-plane>) => MixedPlane (<lume-mixed-plane>)
  • DOMNodeGeometryBehavior (domnode-geometry) => MixedPlaneGeometryBehavior (mixedplane-geometry)
  • DOMNodeMaterialBehavior (domnode-material) => MixedPlaneMaterialBehavior (mixedplane-material)
  • domnode-material => mixedplane-material
  • Other renamed items are namely internal, undocumented, or both.

New features:

• improve native ESM compatibility. 429f4ea5ffde95f545bf329eab155e64fd417471 and other commits
• add NASA Astrobee and HTML Earth demos. 332a484225da026f0c093960c7900d14101c9aa4
• add a perspective attribute to Scene (<lume-scene>). a991e69749b78f9cefdecb36c86f0656ecbb83ae
• Add a points-material behavior for lume-mesh elements for rendering point clouds. See the ply-geometry example (the lume-points element there implicitly uses the points-material behavior by default). 8c7025879c17befc1d1a3487f09d755f7d6194c2
• protected keywords were removed, working towards working declaration emit. This means formerly protected members are now technically public, but note that they are still prefixed with an underscore _ to denote that they are protected! 00758eaa29054e6ae2732a60d4b9f7e0a33a8a6a
• add initial React JSX types for all the elements. See the react-typescript example. b971c4d90d8b6e8ac0165e64fd87275bcf345d0b
• add a plain JavaScript React example. e2b58d12e9074f1e4d6b7f44fcc9e479c76c6350

Fixes

• make sure to clear stop functions on cleanup (fix memory leak). 6a1f9019945bcdd22ab0776b85f66f625fd804a2
• workaround for bug in Chrome that causes camera rig dragging to break sometimes (https://crbug.com/1166044). e1667300aaf8762cec9e5826f644bc80f3662b84
• specify pointer-events:none on the CSS 3D camera element to prevent it from blocking pointer events in Firefox. 82dcdf2c120ca22e7e1332c337fb3cf5fb9f9745
• remove event handler when finished with it (fix memory leak). 6f5a039d5abc06712396dae1d893230518d3be4d
• content was leaking outside of a scene when a scene was not full screen. e5206c5808fa36a28daba45768505b257e26277e