feat(soba): migrate performance

Chau Tran · Chau Tran · commit 9b16937f4fd7 · 2023-05-11T17:48:33.000-05:00
diff --git a/libs/angular-three/src/lib/loader.ts b/libs/angular-three/src/lib/loader.ts
@@ -140,7 +140,7 @@ injectNgtLoader['preload'] = <
     TLoaderConstructor extends NgtLoaderProto<TData>
 >(
     loaderConstructorFactory: (inputs: string[]) => TLoaderConstructor,
-    inputs: Signal<TUrl>,
+    inputs: () => TUrl,
     extensions?: NgtLoaderExtensions<TLoaderConstructor>
 ) => {
     Promise.all(load(loaderConstructorFactory, inputs, { extensions })());
diff --git a/libs/soba/controls/src/orbit-controls/orbit-controls.ts b/libs/soba/controls/src/orbit-controls/orbit-controls.ts
@@ -154,13 +154,18 @@ export class NgtsOrbitControls extends NgtSignalStore<NgtsOrbitControlsState> {
     #setEvents() {
         const trigger = computed(() => {
             const invalidate = this.#store.select('invalidate');
-            const performance = this.#store.get('performance');
-            return { invalidate: invalidate(), performance, controls: this.controlsRef.nativeElement };
+            const performance = this.#store.select('performance');
+            const regress = this.select('regress');
+            return {
+                invalidate: invalidate(),
+                performance: performance(),
+                regress: regress(),
+                controls: this.controlsRef.nativeElement,
+            };
         });
         effect((onCleanup) => {
-            const { controls, invalidate, performance } = trigger();
+            const { controls, invalidate, performance, regress } = trigger();
             if (!controls) return;
-            const regress = this.get('regress');
             const changeCallback: (e: THREE.Event) => void = (e) => {
                 invalidate();
                 if (regress) performance.regress();
diff --git a/libs/soba/loaders/README.md b/libs/soba/loaders/README.md
@@ -0,0 +1,3 @@
+# angular-three-soba/loaders
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/loaders`.
diff --git a/libs/soba/loaders/ng-package.json b/libs/soba/loaders/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}
diff --git a/libs/soba/loaders/src/gltf-loader/gltf-loader.ts b/libs/soba/loaders/src/gltf-loader/gltf-loader.ts
@@ -0,0 +1,68 @@
+import { Injector, Signal } from '@angular/core';
+import { injectNgtLoader, type NgtLoaderResults, type NgtObjectMap } from 'angular-three';
+// @ts-ignore
+import { MeshoptDecoder } from 'three-stdlib';
+import { DRACOLoader } from 'three-stdlib/loaders/DRACOLoader';
+import { GLTF, GLTFLoader } from 'three-stdlib/loaders/GLTFLoader';
+
+let dracoLoader: DRACOLoader | null = null;
+
+function _extensions(useDraco: boolean | string, useMeshOpt: boolean, extensions?: (loader: GLTFLoader) => void) {
+    return (loader: THREE.Loader) => {
+        if (extensions) {
+            extensions(loader as GLTFLoader);
+        }
+
+        if (useDraco) {
+            if (!dracoLoader) {
+                dracoLoader = new DRACOLoader();
+            }
+
+            dracoLoader.setDecoderPath(
+                typeof useDraco === 'string' ? useDraco : 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/'
+            );
+            (loader as GLTFLoader).setDRACOLoader(dracoLoader);
+        }
+
+        if (useMeshOpt) {
+            (loader as GLTFLoader).setMeshoptDecoder(
+                typeof MeshoptDecoder === 'function' ? MeshoptDecoder() : MeshoptDecoder
+            );
+        }
+    };
+}
+
+export function injectNgtsGLTFLoader<TUrl extends string | string[] | Record<string, string>>(
+    path: () => TUrl,
+    {
+        useDraco = true,
+        useMeshOpt = true,
+        injector,
+        extensions,
+    }: {
+        useDraco?: boolean | string;
+        useMeshOpt?: boolean;
+        injector?: Injector;
+        extensions?: (loader: GLTFLoader) => void;
+    } = {}
+): Signal<NgtLoaderResults<TUrl, GLTF & NgtObjectMap>> {
+    return injectNgtLoader(() => GLTFLoader, path, {
+        extensions: _extensions(useDraco, useMeshOpt, extensions),
+        injector,
+    });
+}
+
+injectNgtsGLTFLoader['preload'] = <TUrl extends string | string[] | Record<string, string>>(
+    path: () => TUrl,
+    {
+        useDraco = true,
+        useMeshOpt = true,
+        extensions,
+    }: {
+        useDraco?: boolean | string;
+        useMeshOpt?: boolean;
+        extensions?: (loader: GLTFLoader) => void;
+    }
+) => {
+    injectNgtLoader.preload(() => GLTFLoader, path, _extensions(useDraco, useMeshOpt, extensions));
+};
diff --git a/libs/soba/loaders/src/index.ts b/libs/soba/loaders/src/index.ts
@@ -0,0 +1 @@
+export * from './gltf-loader/gltf-loader';
diff --git a/libs/soba/performance/README.md b/libs/soba/performance/README.md
@@ -0,0 +1,3 @@
+# angular-three-soba/performance
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/performance`.
diff --git a/libs/soba/performance/ng-package.json b/libs/soba/performance/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}
diff --git a/libs/soba/performance/src/adaptive/adaptive-dpr.ts b/libs/soba/performance/src/adaptive/adaptive-dpr.ts
@@ -0,0 +1,41 @@
+import { Directive, effect, inject, Input, signal, untracked } from '@angular/core';
+import { NgtStore } from 'angular-three';
+
+@Directive({
+    selector: 'ngts-adaptive-dpr',
+    standalone: true,
+})
+export class NgtsAdaptiveDpr {
+    #pixelated = signal(false);
+    @Input() set pixelated(pixelated: boolean) {
+        this.#pixelated.set(pixelated);
+    }
+
+    constructor() {
+        const store = inject(NgtStore);
+        effect(
+            (onCleanup) => {
+                const domElement = store.get('gl', 'domElement');
+                onCleanup(() => {
+                    const active = store.get('internal', 'active');
+                    const setDpr = store.get('setDpr');
+                    const initialDpr = store.get('viewport', 'initialDpr');
+                    if (active) setDpr(initialDpr);
+                    if (untracked(this.#pixelated) && domElement) domElement.style.imageRendering = 'auto';
+                });
+            },
+            { allowSignalWrites: true }
+        );
+
+        effect(
+            () => {
+                const performanceCurrent = store.select('performance', 'current');
+                const { gl, viewport, setDpr } = store.get();
+                setDpr(performanceCurrent() * viewport.initialDpr);
+                if (untracked(this.#pixelated) && gl.domElement)
+                    gl.domElement.style.imageRendering = performanceCurrent() === 1 ? 'auto' : 'pixelated';
+            },
+            { allowSignalWrites: true }
+        );
+    }
+}
diff --git a/libs/soba/performance/src/adaptive/adaptive-events.ts b/libs/soba/performance/src/adaptive/adaptive-events.ts
@@ -0,0 +1,31 @@
+import { Directive, effect, inject } from '@angular/core';
+import { NgtStore } from 'angular-three';
+
+@Directive({
+    selector: 'ngts-adaptive-events',
+    standalone: true,
+})
+export class NgtsAdaptiveEvents {
+    constructor() {
+        const store = inject(NgtStore);
+        effect(
+            (onCleanup) => {
+                const enabled = store.get('events', 'enabled');
+                onCleanup(() => {
+                    const setEvents = store.get('setEvents');
+                    setEvents({ enabled });
+                });
+            },
+            { allowSignalWrites: true }
+        );
+
+        effect(
+            () => {
+                const performanceCurrent = store.select('performance', 'current')();
+                const setEvents = store.get('setEvents');
+                setEvents({ enabled: performanceCurrent === 1 });
+            },
+            { allowSignalWrites: true }
+        );
+    }
+}
diff --git a/libs/soba/performance/src/detailed/detailed.ts b/libs/soba/performance/src/detailed/detailed.ts
@@ -0,0 +1,60 @@
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, Input } from '@angular/core';
+import { extend, injectNgtRef, NgtSignalStore, type NgtBeforeRenderEvent, type NgtLOD } from 'angular-three';
+import { LOD } from 'three';
+
+extend({ LOD });
+
+export interface NgtsDetailedState {
+    distances: number[];
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngts-detailed': NgtsDetailedState & NgtLOD;
+    }
+}
+
+@Component({
+    selector: 'ngts-detailed',
+    standalone: true,
+    template: `
+        <ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onLODBeforeRender($event)">
+            <ng-content />
+        </ngt-lOD>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsDetailed extends NgtSignalStore<NgtsDetailedState> {
+    @Input() lodRef = injectNgtRef<LOD>();
+
+    @Input({ required: true }) set distances(distances: number[]) {
+        this.set({ distances });
+    }
+
+    constructor() {
+        super();
+        this.#updateChildren();
+    }
+
+    onLODBeforeRender({ object, state }: NgtBeforeRenderEvent<THREE.LOD>) {
+        object.update(state.camera);
+    }
+
+    #updateChildren() {
+        const trigger = computed(() => {
+            const children = this.lodRef.children();
+            const distances = this.select('distances');
+            return { children: children(), distances: distances() };
+        });
+        effect(() => {
+            const { children, distances } = trigger();
+            const lod = this.lodRef.untracked;
+            if (lod) {
+                lod.levels.length = 0;
+                children.forEach((child, index) => {
+                    lod.addLevel(child, distances[index]);
+                });
+            }
+        });
+    }
+}
diff --git a/libs/soba/performance/src/index.ts b/libs/soba/performance/src/index.ts
@@ -0,0 +1,4 @@
+export * from './adaptive/adaptive-dpr';
+export * from './adaptive/adaptive-events';
+export * from './detailed/detailed';
+export * from './stats/stats';
diff --git a/libs/soba/performance/src/stats/stats.ts b/libs/soba/performance/src/stats/stats.ts
@@ -0,0 +1,75 @@
+import { DOCUMENT } from '@angular/common';
+import { computed, Directive, effect, ElementRef, inject, Input } from '@angular/core';
+import { addAfterEffect, addEffect, is, NgtAnyRecord, NgtSignalStore } from 'angular-three';
+import * as Stats from 'stats.js';
+
+export interface NgtsStatsState {
+    showPanel: number;
+    right: boolean;
+    parent?: HTMLElement;
+    classes?: string;
+}
+
+@Directive({
+    selector: 'ngts-stats',
+    standalone: true,
+})
+export class NgtsStats extends NgtSignalStore<NgtsStatsState> {
+    @Input() set showPanel(showPanel: number) {
+        this.set({ showPanel });
+    }
+
+    @Input() set parent(parent: HTMLElement | ElementRef<HTMLElement>) {
+        this.set({ parent: is.ref(parent) ? parent.nativeElement : parent });
+    }
+
+    @Input() set classes(classes: string) {
+        this.set({ classes });
+    }
+
+    @Input() set right(right: boolean) {
+        this.set({ right });
+    }
+
+    constructor() {
+        super({ showPanel: 0, right: false });
+
+        const document = inject(DOCUMENT);
+        const stats: Stats = (Stats as NgtAnyRecord)['default']
+            ? new (Stats as NgtAnyRecord)['default']()
+            : new Stats();
+
+        const trigger = computed(() => {
+            const showPanel = this.select('showPanel');
+            const right = this.select('right');
+            const parent = this.select('parent');
+            const classes = this.select('classes');
+            return { showPanel: showPanel(), right: right(), parent: parent(), classes: classes() };
+        });
+
+        effect((onCleanup) => {
+            const { showPanel, right, parent, classes } = trigger();
+
+            const node = parent ?? document.body;
+            stats.showPanel(showPanel);
+            node.appendChild(stats.dom);
+            if (classes) {
+                stats.dom.classList.add(...classes.split(' ').filter((cls: string) => cls));
+            }
+            if (right) {
+                stats.dom.style.right = '0px';
+                stats.dom.style.left = 'inherit';
+            } else {
+                stats.dom.style.left = '0px';
+                stats.dom.style.right = 'inherit';
+            }
+            const begin = addEffect(() => stats.begin());
+            const end = addAfterEffect(() => stats.end());
+            onCleanup(() => {
+                node.removeChild(stats.dom);
+                begin();
+                end();
+            });
+        });
+    }
+}
diff --git a/libs/soba/project.json b/libs/soba/project.json
@@ -52,7 +52,11 @@
                     "libs/soba/cameras/**/*.ts",
                     "libs/soba/cameras/**/*.html",
                     "libs/soba/misc/**/*.ts",
-                    "libs/soba/misc/**/*.html"
+                    "libs/soba/misc/**/*.html",
+                    "libs/soba/performance/**/*.ts",
+                    "libs/soba/performance/**/*.html",
+                    "libs/soba/loaders/**/*.ts",
+                    "libs/soba/loaders/**/*.html"
                 ]
             }
         },
diff --git a/libs/soba/src/performance/adaptive.stories.ts b/libs/soba/src/performance/adaptive.stories.ts
diff --git a/libs/soba/src/performance/detailed.stories.ts b/libs/soba/src/performance/detailed.stories.ts
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# angular-three-soba/loaders`
	`2`	`+`
	`3`	+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/loaders`.
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "lib": {
 +        "entryFile": "src/index.ts"
 +    }
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './gltf-loader/gltf-loader';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# angular-three-soba/performance`
	`2`	`+`
	`3`	+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/performance`.