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

New features:

• CameraRig.active property (<lume-camera-rig> active attribute) - When the property is set to true, the CameraRig's camera becomes the scene's active camera.
• CameraRig.dollyFactor property (<lume-camera-rig> dolly-factor attribute) - A number that that multiplies the speed that the CamerRig will dolly the camera in and out when scrolling (zooming). Set it to a lower number to make the camera dolly slower, for example.
• The type definition for the has attribute has been added. F.e. <lume-mesh has="phong-material">.

Removed console.logs from source.

Summary:

The align property (align attribute) renamed to alignPoint property (align-point attribute).

Breaking changes:

• The align property was renamed to alignPoint (with its dash-cased align-point attribute equivalent) for all 3D elements. This prevents us from colliding and shadowing the built-in DOM align property.

Fixes:

• Fixed an issue preventing initial element property values from being passed to behaviors hosted by an element with those properties if the properties were assigned before custom element upgrade.

This release is non-breaking to plain JavaScript users, but some type definitions were modified and improved (especially for JSX templating), which is a breaking change in type checking for TypeScript users.

The properties that all LUME 3D elements have (f.e. position, rotation, etc) have setters that accept values that can be coerced into the underlying data type that is returned by the getter.

In JavaScript, we can set values as follows:

// with an array of numbers with up to three items:
element.position = [1, 2, 3]

// with an object with x,y, and z properties:
element.position = {x: 1, y: 2, z: 3}

// with a string (normally we avoid this form in JavaScript, but this is the form in which values from
// HTML attributes arrive to the properties):
element.position = "1 2 3"

// with an XYZValues object (f.e. XYZNumberValues):
element.position = new XYZNumberValues(1, 2, 3)

// with an property function which gets called repeatedly in an animation render loop. The function
// can return the same type of values as we can set in the previous example lines.
// The following animates Y position over time.
element.position = (x, y, z, time) => [x, ++y, z]
element.position = (x, y, z, time) => {x, y: ++y, z}
element.position = (x, y, z, time) => new XYZNumberValues(x, ++y, z)

The getters always return an XYZValues object (f.e. XYZNumberValues):

console.log(element.position) // XYZNumberValues { x: 1, y: 2, z: 3, ... }

// We can also set values like this:
element.position.x = 1
element.position.y = 2
element.position.z = 3

The breaking change is that now all of these possibilities are now described in the type definitions for the properties. Whereas before the types of the properties were only something like XYZNumberValues, they are now typed as XYZNumberValues | [number, number, number] | {x: number, y: number, z: number} | string | PropertyFunction or similar.

TypeScript has not (until the near future) had a way to define a different type for a getter than for a setter, so in TypeScript, the return value of element.position will currently be that union type, and we'd have to type cast it like the following in order to use it:

;(this.position as XYZNumberValues).x = 1

To remedy this until the upcoming TypeScript Variant Accessors is out, we've provided get*() methods for each of the properties, so TS users can write like follows:

this.getPosition().x = 1

A benefit of the new types is that all the following types of JSX are now valid and type checked correctly:

const sphere = <lume-box rotation={[1, 2, 3]} />
const sphere = <lume-box rotation={{x, y: ++y, z}} />
const sphere = <lume-box rotation={new XYZNumberValues(1, 2, 3)} />
const sphere = <lume-box rotation={"1 2 3"} />
const sphere = <lume-box rotation="1 2 3" />
const sphere = <lume-box rotation={(x, y, z, time) => [x, ++y, z]} />

This is the first release of LUME's 3D elements! 🎉

This isn't 1.0 yet. There will be changes until 1.0 is ready.