Merge pull request #1 from lume/update-lowclass-and-lume-element

Update `lowclass` and `@lume/element` versions.

api/behaviors/PropReceiver.md

@@ -5,7 +5,7 @@
 
 Forwards properties of a specified `observedObject` onto properties of
 `this` object. The properties to be received from `observedObject` are those
-listed in the `static receivedProperties` array, or the ones decorated with
+listed in the `receivedProperties` array, or the ones decorated with
 `
 
 ## Properties

api/behaviors/mesh-behaviors/materials/ProjectedMaterialBehavior.md

@@ -22,6 +22,11 @@ associating it with the `texture-projectors` attribute:
 ></lume-box>
 ```
 
+<live-code id="example"></live-code>
+<script>
+  example.content = projectedTextureExample
+</script>
+
 ## Properties
 
 Inherits properties from [PhysicalMaterialBehavior](PhysicalMaterialBehavior.md).

api/meshes/MixedPlane.md

@@ -18,17 +18,11 @@ available properties.
 
 <live-code src="../../../examples/buttons-with-shadow/example.html"></live-code>
 
-## Properties
 
-Inherits properties from [Mesh](Mesh.md).
 
+Inherits properties from [Mesh](Mesh.md).
 
-### <code>.<b>isMixedPlane</b></code> :id=isMixedPlane
 
-An always-`true` property signaling that
-this element is a `MixedPlane`. Useful for duck typing, especially in
-plain JavaScript as opposed to TypeScript.
-
 
 
 

examples/autolayout-declarative.md

@@ -21,7 +21,7 @@
           position="300 300 120"
           size="0 0 0"
           cast-shadow="true"
-          intensity="0.5"
+          intensity="300"
           shadow-radius="2"
           distance="800"
           shadow-bias="-0.01"

examples/autolayout-imperative.md

@@ -40,7 +40,7 @@
           position: "300 300 120",
           size: "0 0 0",
           castShadow: "true",
-          intensity: "0.5",
+          intensity: "300",
           shadowRadius: 2,
           distance: 800,
           shadowBias: -0.01,

examples/disco-helmet/example.html

@@ -36,7 +36,7 @@
 	<lume-perspective-camera id="cam" position="0 0 1000"></lume-perspective-camera>
 
 	<!-- See src/examples/FlickeringOrbs.ts -->
-	<flickering-orbs id="lights" rotation="0 30 0"></flickering-orbs>
+	<flickering-orbs id="lights" rotation="0 30 0" intensity="1000"></flickering-orbs>
 
 	<lume-gltf-model
 		id="model"

examples/hello-vr.md

@@ -19,6 +19,7 @@
         mount-point="0.5 0.5 0.5"
         position="-200 0 0"
         color="white"
+        intensity="1000"
     ></lume-point-light>
   </lume-scene>
 

examples/hello-world/example.html

@@ -46,7 +46,7 @@
 					size="0 0"
 					position="0 0 1800"
 					color="white"
-					intensity="2"
+					intensity="3"
 					distance="10000"
 					xxx="Here we adjust the shadow camera size so it fits around the earth and moon, making the shadow as crisp as possible without increasing the shadow texture size."
 					shadow-camera-near="1500"

examples/nasa-astrobee-robot/README.md

@@ -30,6 +30,8 @@
 
 <script type="module">
   import {defineElements, booleanAttribute, Element, element, attribute, html} from 'lume'
+  import {MeshPhysicalMaterial} from 'three'
+	import {toCreasedNormals} from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
   const bodyModelUrl = '/examples/nasa-astrobee-robot/astrobee/body.dae'
   const pmcModelUrl = '/examples/nasa-astrobee-robot/astrobee/pmc.dae'
@@ -44,29 +46,31 @@
 
   // Long live HTML elements!
 
-  element('astrobee-app')((() => {
+  element('astrobee-app')(
     class App extends Element {
-      constructor() {
-        super()
-
-        this.rotationDirection = 1 // clockwise
-        this.rotationAmount = 0.2 // degrees
+      static observedAttributeHandlers = {
+        rotationDirection: attribute.number(),
+        rotationAmount: attribute.number(),
+        rotationEnabled: attribute.boolean(),
+        view: attribute.string(),
+      }
 
-        this.rotationEnabled = true
-        this.view = 'free'
+      rotationDirection = 1 // clockwise
+      rotationAmount = 0.2 // degrees
+      rotationEnabled = true
+      view = 'free'
 
-        this.astrobee
-        this.sceneContainer
-        this.loading
-        this.models = []
-      }
+      astrobee
+      sceneContainer
+      loading
+      models = []
 
       template = () => html`
         <>
           <loading-icon ref=${el => this.loading = el}></loading-icon>
 
           <div class="sceneContainer hidden" ref=${el => this.sceneContainer = el}>
-            <lume-scene webgl enable-css="false" environment=${() => lunaStation}>
+            <lume-scene webgl enable-css="true" environment=${() => lunaStation}>
               <lume-element3d align-point="0.5 0.5 0.5">
                 <lume-camera-rig
                   ref=${el => this.cameraRig = el}
@@ -82,22 +86,22 @@
                 </lume-element3d>
               </lume-element3d>
 
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 90 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 -90 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 90" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 -90" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 -80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 80 0" />
-              <lume-point-light intensity="0.3" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 -80 0" />
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 90 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 -90 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 90" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="0 0 -90" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="90 -80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
+              <lume-point-light intensity="150" align-point="0.5 0.5 0.5" color="#a3ffff" position="-90 -80 0" ><lume-sphere has="basic-material" cast-shadow="false" mount-point="0.5 0.5 0.5" sidedness="front" size="2 2 2"/></lume-point-light>
 
               <lume-element3d ref=${el => this.astrobee = el} align-point="0.5 0.5 0.5" rotation=${() => this.astrobeeRotation}>
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => bodyModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
                 <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcBumperModelUrl} />
 
-                <comment style="display:none">The other side.</comment>
+                <!-- The other side. -->
                 <lume-element3d scale="1 1 -1">
                   <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcModelUrl} />
                   <lume-collada-model ref=${el => this.models.push(el)} src=${() => pmcSkinModelUrl} />
@@ -111,7 +115,7 @@
                 color="white"
                 align-point="0.5 0.5 0.5"
                 mount-point="0.5 0.5 0.5"
-                size="100 100 100"
+                size="200 200 200"
                 sidedness="double"
                 cast-shadow="false"
                 receive-shadow="false"
@@ -228,7 +232,7 @@
 
         const rigCam = this.cameraRig.shadowRoot.querySelector('lume-perspective-camera')
         rigCam.near = this.freeCam.near = 0.1
-        rigCam.far = this.freeCam.far = 110
+        rigCam.far = this.freeCam.far = 150
 
         const promises = []
 
@@ -237,20 +241,38 @@
 
         await Promise.all(promises)
 
+        for (const model of this.models) {
+          // Here we do some manipulation of the underlying Three.js objects directly.
+          model.three.traverse(node => {
+            if (node.isLight) node.visible = false
+
+            function newMat(oldMat) {
+              return new MeshPhysicalMaterial({
+                metalness: 0.5,
+                roughness: 0.5,
+                ...(oldMat.color ? {color: oldMat.color} : {}),
+                ...(oldMat.map ? {map: oldMat.map.clone()} : {}),
+              })
+            }
+
+            if (node.isMesh) {
+              if (Array.isArray(node.material))
+                for (const [i, mat] of node.material.entries()) node.material[i] = newMat(mat)
+              else
+                node.material = newMat(node.material)
+
+              // smooth out the normals so the rendering is not flat-faced unless angle between faces is greater than 25 deg
+              node.geometry = toCreasedNormals(node.geometry, (25 / 180) * Math.PI)
+            }
+        })
+
+        }
+
         this.sceneContainer.classList.remove('hidden')
         this.loading.remove()
       }
     }
-
-    App.observedAttributes = {
-      rotationDirection: attribute.number(1),
-      rotationAmount: attribute.number(1),
-      rotationEnabled: attribute.boolean(true),
-      view: attribute.string('free'),
-    }
-
-    return App
-  })())
+  )
 </script>
 </template>
 </live-code>

examples/rounded-rectangle.md

@@ -21,16 +21,15 @@
   </style>
 
   <lume-scene id="scene" webgl>
-      <lume-ambient-light intensity="0.3"></lume-ambient-light>
+      <lume-ambient-light intensity="1"></lume-ambient-light>
       <lume-point-light
           id="light"
           color="white"
           position="300 300 300"
           size="0 0 0"
           cast-shadow="true"
-          intensity="0.8"
+          intensity="800"
           shadow-radius="2"
-          distance="800"
           shadow-bias="-0.001"
           >
       </lume-point-light>

examples/shelby-gt350-points/example.html

@@ -43,7 +43,7 @@
 
 <lume-scene id="scene" perspective="800" webgl class="hidden">
 	<lume-element3d position="-250 0 0">
-		<lume-point-light id="light" intensity="3" color="limegreen"></lume-point-light>
+		<lume-point-light id="light" intensity="600" color="limegreen"></lume-point-light>
 	</lume-element3d>
 
 	<lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
@@ -60,8 +60,7 @@
 <script type="module">
 	import 'lume'
 
-	const ua = window.navigator.userAgent
-	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
+	const shimmerEffect = false // nice effect but only on Firefox right now.
 
 	// Rendering shimmering points with a non-points material does not work in
 	// iOS Safari (point sizes are blown up), fallback to points-material on
@@ -74,7 +73,7 @@
 		-->
 		<lume-points
 			id="model"
-			has="ply-geometry ${is_iOS ? 'points' : 'phong'}-material"
+			has="ply-geometry ${shimmerEffect ? 'phong' : 'points'}-material"
 			src="/examples/shelby-gt350-points/shelby-gt350.ply"
 			rotation="90 0 0"
 			position="-250 0 0"

examples/skateboard-configurator/example.html

@@ -414,20 +414,29 @@ <h1>Trucks</h1>
 	const getScale = () => [scene.calculatedSize.y * 1.3, scene.calculatedSize.y * 1.3, scene.calculatedSize.y * 1.3]
 
 	createEffect(() => {
+		console.log('skateboard scale effect')
+		// debugger
 		// The size of the skateboard is just less than a pixel, hence we can
 		// easily scale it based on scene pixel dimensions to make it
 		// approximately fit in view.
 		const scale = getScale()
 		skateboard.scale = scale
 		projectorContainer.scale = scale
 	})
+	// createEffect(() => {
+	// 	console.log('set skateboard scale')
+	// 	// debugger
+	// 	getScale()
+	// 	// skateboard.scale = [1, 1, 1]
+	// })
 
 	//
 
 	// Wait for the gltf-model behavior to exist and then for it to load the
 	// model, finally handle the loaded model.
 
 	createEffect(() => {
+		// debugger
 		const modelBehavior = skateboardModel.behaviors.get('gltf-model')
 		if (!modelBehavior) return
 
@@ -464,7 +473,11 @@ <h1>Trucks</h1>
 
 		const deck = document.getElementById('deck_basic002_0')
 
-		createEffect(() => (projector.size = [deck.size.y, deck.size.x]))
+		createEffect(() => {
+			console.log('projector size effect')
+			// debugger
+			projector.size = [deck.size.y, deck.size.x]
+		})
 
 		loadPromises.push(waitForTextureLoad())
 		Promise.all(loadPromises).then(revealScene)

examples/spotlight.html

@@ -2,7 +2,7 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.js"></script>
 
 <lume-scene webgl shadowmap-type="soft">
-	<lume-ambient-light color="white" intensity="0.7"></lume-ambient-light>
+	<lume-ambient-light color="white" intensity="2"></lume-ambient-light>
 
 	<!-- A sphere to visualize the world origin -->
 	<lume-sphere
@@ -38,7 +38,7 @@
 			color="deeppink"
 			position="0 0 400"
 			distance="0"
-			intensity="0.3"
+			intensity="500"
 			angle="30"
 			penumbra="0.2"
 			shadow-map-width="1024"
@@ -62,7 +62,7 @@
 			color="royalblue"
 			position="0 0 400"
 			distance="0"
-			intensity="0.4"
+			intensity="700"
 			angle="30"
 			penumbra="0.2"
 			shadow-map-width="1024"

examples/velodyne-lidar-scan/example.html

@@ -8,7 +8,7 @@
 
 <lume-scene id="scene" perspective="800" webgl enable-css="false" class="hidden">
 	<lume-point-light id="light" position="200 -200 200" intensity="3" color="deeppink"></lume-point-light>
-	<lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
+	<lume-ambient-light color="white" intensity="1200"></lume-ambient-light>
 
 	<lume-camera-rig
 		active
@@ -67,8 +67,7 @@
 <script type="module">
 	import 'lume'
 
-	const ua = window.navigator.userAgent
-	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
+	const shimmerEffect = false // nice effect but only on Firefox right now.
 
 	// Rendering shimmering points with a non-points material does not work in
 	// iOS Safari (point sizes are blown up), fallback to points-material on
@@ -80,7 +79,7 @@
 		-->
 		<lume-points
 			id="model"
-			has="ply-geometry ${is_iOS ? 'points' : 'phong'}-material"
+			has="ply-geometry ${shimmerEffect ? 'phong' : 'points'}-material"
 			src="/examples/velodyne-lidar-scan/shelby-scene.ply"
 			rotation="90 0 0"
 			position="0 0 60"

guide/cameras/default-camera.html

@@ -28,7 +28,7 @@
 
 <lume-scene id="scene" webgl perspective="150">
 	<lume-ambient-light intensity="0.3"></lume-ambient-light>
-	<lume-point-light id="light" color="white" position="300 300 300" size="0 0 0" cast-shadow="true" intensity="0.8">
+	<lume-point-light id="light" color="white" position="300 300 300" size="0 0 0" cast-shadow="true" intensity="1000">
 	</lume-point-light>
 	<!-- Specify a color otherwise the material will be tinted deeppink by default -->
 	<lume-box