About example motion blur, three.js r163 and Firefox updates, house c…

…leaning

assets/textures/blue_noise.txt

@@ -0,0 +1,2 @@
+Blue Noise Fast
+https://docs.substance3d.com/sddoc/blue-noise-fast-159450665.html

assets/textures/matcaps/040full.txt

@@ -0,0 +1 @@
+https://devtalk.blender.org/t/call-for-content-matcaps/737/66

assets/textures/matcaps/defaultwax.txt

@@ -0,0 +1 @@
+https://devtalk.blender.org/t/call-for-content-matcaps/737/213

examples/test_sound.html

@@ -10,8 +10,16 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
     <link rel="stylesheet" href="assets/css/style.css">
 
+    <script type="importmap">
+        {
+            "imports": {
+                "@alienkitty/space.js": "../src/index.js"
+            }
+        }
+    </script>
+
     <script type="module">
-        import { BufferLoader, WebAudio } from '../src/index.js';
+        import { BufferLoader, WebAudio } from '@alienkitty/space.js';
 
         const bufferLoader = new BufferLoader();
         await bufferLoader.loadAllAsync(['assets/sounds/gong.mp3']);

examples/test_stream.html

@@ -10,8 +10,16 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
     <link rel="stylesheet" href="assets/css/style.css">
 
+    <script type="importmap">
+        {
+            "imports": {
+                "@alienkitty/space.js": "../src/index.js"
+            }
+        }
+    </script>
+
     <script type="module">
-        import { WebAudio } from '../src/index.js';
+        import { WebAudio } from '@alienkitty/space.js';
 
         WebAudio.init({ sampleRate: 48000 });
 

examples/test_tween.html

@@ -10,8 +10,16 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
     <link rel="stylesheet" href="assets/css/style.css">
 
+    <script type="importmap">
+        {
+            "imports": {
+                "@alienkitty/space.js": "../src/index.js"
+            }
+        }
+    </script>
+
     <script type="module">
-        import { ticker, tween } from '../src/index.js';
+        import { ticker, tween } from '@alienkitty/space.js';
 
         ticker.start();
 

examples/thread_canvas.html

@@ -131,24 +131,18 @@
             }
 
             static initThread() {
-                if ('transferControlToOffscreen' in this.params.canvas && !/firefox/i.test(navigator.userAgent)) {
-                    this.thread = new Thread({
-                        imports: [
-                            ['../src/index.js', 'ticker']
-                        ],
-                        classes: [CanvasNoise],
-                        controller: [CanvasNoiseThread, 'init', 'resize', 'start', 'stop']
-                    });
-
-                    this.element = this.params.canvas;
-                    this.params.canvas = this.element.transferControlToOffscreen();
-
-                    this.thread.init({ params: this.params, buffer: [this.params.canvas] });
-                } else {
-                    ticker.start();
-
-                    this.noise = new CanvasNoise(this.params);
-                }
+                this.thread = new Thread({
+                    imports: [
+                        ['../src/index.js', 'ticker']
+                    ],
+                    classes: [CanvasNoise],
+                    controller: [CanvasNoiseThread, 'init', 'resize', 'start', 'stop']
+                });
+
+                this.element = this.params.canvas;
+                this.params.canvas = this.element.transferControlToOffscreen();
+
+                this.thread.init({ params: this.params, buffer: [this.params.canvas] });
             }
 
             // Event handlers
@@ -160,27 +154,15 @@
             // Public methods
 
             static resize = (width, height, dpr) => {
-                if (this.thread) {
-                    this.thread.resize({ width, height, dpr });
-                } else {
-                    this.noise.resize(width, height, dpr);
-                }
+                this.thread.resize({ width, height, dpr });
             };
 
             static start = () => {
-                if (this.thread) {
-                    this.thread.start({ fps: 20 });
-                } else {
-                    ticker.add(this.onUpdate, 20);
-                }
+                this.thread.start({ fps: 20 });
             };
 
             static stop = () => {
-                if (this.thread) {
-                    this.thread.stop();
-                } else {
-                    ticker.remove(this.onUpdate);
-                }
+                this.thread.stop();
             };
         }
 

src/math/Color.js

@@ -94,17 +94,17 @@ export class Color {
         const match = /^#([A-Fa-f\d]+)$/.exec(style);
 
         if (match) {
-            const str = match[1];
-            const size = str.length;
+            const string = match[1];
+            const size = string.length;
 
             if (size === 3) {
-                this.r = parseInt(str.charAt(0) + str.charAt(0), 16) / 255;
-                this.g = parseInt(str.charAt(1) + str.charAt(1), 16) / 255;
-                this.b = parseInt(str.charAt(2) + str.charAt(2), 16) / 255;
+                this.r = parseInt(string.charAt(0) + string.charAt(0), 16) / 255;
+                this.g = parseInt(string.charAt(1) + string.charAt(1), 16) / 255;
+                this.b = parseInt(string.charAt(2) + string.charAt(2), 16) / 255;
             } else if (size === 6) {
-                this.r = parseInt(str.charAt(0) + str.charAt(1), 16) / 255;
-                this.g = parseInt(str.charAt(2) + str.charAt(3), 16) / 255;
-                this.b = parseInt(str.charAt(4) + str.charAt(5), 16) / 255;
+                this.r = parseInt(string.charAt(0) + string.charAt(1), 16) / 255;
+                this.g = parseInt(string.charAt(2) + string.charAt(3), 16) / 255;
+                this.b = parseInt(string.charAt(4) + string.charAt(5), 16) / 255;
             }
         }
 

src/panels/ColorPicker.js

@@ -496,7 +496,7 @@ export class ColorPicker extends Interface {
             this.lastValue = value;
 
             if (this.isDown || force) {
-                this.events.emit('update', { path: [], value: this.value, target: this });
+                this.events.emit('update', { value: this.value, target: this });
 
                 if (this.callback) {
                     this.callback(this.value, this);

src/panels/List.js

@@ -69,8 +69,6 @@ export class List extends Interface {
     };
 
     onUpdate = e => {
-        e.path.unshift([this.name, this.index]);
-
         this.events.emit('update', e);
     };
 
@@ -121,7 +119,7 @@ export class List extends Interface {
     update() {
         const value = this.keys[this.index];
 
-        this.events.emit('update', { path: [], index: this.index, target: this });
+        this.events.emit('update', { index: this.index, target: this });
 
         if (this.callback) {
             this.callback(value, this);

src/panels/PanelLink.js

@@ -87,7 +87,7 @@ export class PanelLink extends Interface {
     }
 
     update() {
-        this.events.emit('update', { path: [], value: this.value, target: this });
+        this.events.emit('update', { value: this.value, target: this });
 
         if (this.callback) {
             this.callback(this.value, this);

src/panels/Slider.js

@@ -92,10 +92,10 @@ export class Slider extends Interface {
     }
 
     getPrecision(value) {
-        const str = String(value);
-        const delimiter = str.indexOf('.') + 1;
+        const string = String(value);
+        const delimiter = string.indexOf('.') + 1;
 
-        return !delimiter ? 0 : str.length - delimiter;
+        return !delimiter ? 0 : string.length - delimiter;
     }
 
     getValue(value) {
@@ -181,7 +181,7 @@ export class Slider extends Interface {
         if (this.value !== this.lastValue || force) {
             this.lastValue = this.value;
 
-            this.events.emit('update', { path: [], value: this.value, target: this });
+            this.events.emit('update', { value: this.value, target: this });
 
             if (this.callback) {
                 this.callback(this.value, this);

src/three/panels/Options.js

@@ -76,3 +76,14 @@ export const UVHelperOptions = {
     Off: false,
     UV: true
 };
+
+export const DisplayOptions = {
+    Default: 0,
+    Velocity: 1,
+    Geometry: 2,
+    Matcap1: 3,
+    Matcap2: 4,
+    Depth: 5,
+    Luma: 6,
+    Bloom: 7
+};

src/three/panels/lights/DirectionalLightPanel.js

@@ -22,7 +22,7 @@ export class DirectionalLightPanel extends Panel {
         const light = this.light;
 
         // Defaults
-        if (!light.userData.helper) {
+        if (light.userData.helper === undefined) {
             light.userData.helper = false;
         }
 

src/three/panels/lights/HemisphereLightPanel.js

@@ -22,7 +22,7 @@ export class HemisphereLightPanel extends Panel {
         const light = this.light;
 
         // Defaults
-        if (!light.userData.helper) {
+        if (light.userData.helper === undefined) {
             light.userData.helper = false;
         }
 

src/three/panels/lights/PointLightPanel.js

@@ -22,7 +22,7 @@ export class PointLightPanel extends Panel {
         const light = this.light;
 
         // Defaults
-        if (!light.userData.helper) {
+        if (light.userData.helper === undefined) {
             light.userData.helper = false;
         }
 

src/three/panels/lights/RectAreaLightPanel.js

@@ -22,7 +22,7 @@ export class RectAreaLightPanel extends Panel {
         const light = this.light;
 
         // Defaults
-        if (!light.userData.helper) {
+        if (light.userData.helper === undefined) {
             light.userData.helper = false;
         }
 

src/three/panels/lights/SpotLightPanel.js

@@ -22,7 +22,7 @@ export class SpotLightPanel extends Panel {
         const light = this.light;
 
         // Defaults
-        if (!light.userData.helper) {
+        if (light.userData.helper === undefined) {
             light.userData.helper = false;
         }
 

src/three/panels/materials/PhongMaterialSubsurfacePanel.js

@@ -21,7 +21,7 @@ export class PhongMaterialSubsurfacePanel extends Panel {
         const mesh = this.mesh;
 
         // Defaults
-        if (!mesh.userData.subsurface) {
+        if (mesh.userData.subsurface === undefined) {
             mesh.userData.subsurface = false;
 
             mesh.userData.subsurfaceUniforms = {

src/three/panels/materials/PhysicalMaterialSubsurfacePanel.js

@@ -21,7 +21,7 @@ export class PhysicalMaterialSubsurfacePanel extends Panel {
         const mesh = this.mesh;
 
         // Defaults
-        if (!mesh.userData.subsurface) {
+        if (mesh.userData.subsurface === undefined) {
             mesh.userData.subsurface = false;
 
             mesh.userData.subsurfaceUniforms = {

src/three/panels/materials/StandardMaterialSubsurfacePanel.js

@@ -21,7 +21,7 @@ export class StandardMaterialSubsurfacePanel extends Panel {
         const mesh = this.mesh;
 
         // Defaults
-        if (!mesh.userData.subsurface) {
+        if (mesh.userData.subsurface === undefined) {
             mesh.userData.subsurface = false;
 
             mesh.userData.subsurfaceUniforms = {

src/three/panels/objects/MeshHelperPanel.js

@@ -23,15 +23,15 @@ export class MeshHelperPanel extends Panel {
         const point = Point3D.getPoint(mesh);
 
         // Defaults
-        if (!mesh.userData.normals) {
+        if (mesh.userData.normals === undefined) {
             mesh.userData.normals = false;
         }
 
-        if (!mesh.userData.tangents) {
+        if (mesh.userData.tangents === undefined) {
             mesh.userData.tangents = false;
         }
 
-        if (!mesh.userData.uv) {
+        if (mesh.userData.uv === undefined) {
             mesh.userData.uv = false;
         }
 

src/three/panels/physics/OimoPhysicsPanel.js

@@ -16,14 +16,14 @@ export class OimoPhysicsPanel extends Panel {
     }
 
     initPanel() {
+        const { physics } = Point3D;
+
         let object = this.mesh;
 
         if (object.parent && object.parent.isGroup) {
             object = object.parent;
         }
 
-        const { physics } = Point3D;
-
         const angularVelocity = physics.getAngularVelocity(object);
 
         const items = [

src/three/ui/Point3D.js

@@ -276,7 +276,7 @@ export class Point3D extends Group {
 
         const unique = [...new Set(types)];
 
-        return unique.map(type => `${counts[type]} ${type}`).join(', ');
+        return unique.map(type => `${counts[type]}&nbsp;${type}`).join('<br>');
     }
 
     static getMultipleTargetNumbers() {
@@ -577,17 +577,13 @@ export class Point3D extends Group {
         Point3D.events.emit('click', { target: this });
     };
 
-    onUpdate = ({ path, value, index, target }) => {
+    onUpdate = ({ value, index, target }) => {
         if (this.isMultiple) {
             Point3D.multiple.forEach(point => {
                 if (point !== this) {
-                    path.forEach(([name, index]) => {
-                        point.setPanelIndex(name, index);
-                    });
-
-                    if (typeof index !== 'undefined') {
+                    if (index !== undefined) {
                         point.setPanelIndex(target.name, index);
-                    } else if (typeof value !== 'undefined') {
+                    } else if (value !== undefined) {
                         point.setPanelValue(target.name, value);
                     }
                 }

src/ui/DetailsTitle.js

@@ -26,14 +26,14 @@ export class DetailsTitle extends Interface {
     initText() {
         const split = this.title.split('');
 
-        split.forEach(str => {
-            if (str === ' ') {
-                str = '&nbsp';
+        split.forEach(string => {
+            if (string === ' ') {
+                string = '&nbsp';
             }
 
             const letter = new Interface(null, 'span');
             letter.css({ display: 'inline-block' });
-            letter.html(str);
+            letter.html(string);
             this.add(letter);
 
             this.letters.push(letter);