feat(soba): migrate misc

Author: Chau Tran

libs/angular-three/src/index.ts

@@ -14,6 +14,7 @@ export * from './lib/stores/store';
 export * from './lib/three-types';
 export * from './lib/types';
 export * from './lib/utils/apply-props';
+export * from './lib/utils/assert-in-injection-context';
 export { createAttachFunction } from './lib/utils/attach';
 export * from './lib/utils/instance';
 export * from './lib/utils/is';

libs/angular-three/src/lib/di/before-render.ts

@@ -1,16 +1,13 @@
-import { DestroyRef, Injector, assertInInjectionContext, inject, runInInjectionContext } from '@angular/core';
+import { DestroyRef, Injector, inject, runInInjectionContext } from '@angular/core';
 import { NgtStore } from '../stores/store';
 import { NgtBeforeRenderRecord } from '../types';
+import { assertInjectionContext } from '../utils/assert-in-injection-context';
 
 export function injectBeforeRender(
     cb: NgtBeforeRenderRecord['callback'],
-    { priority = 0, injector }: { priority?: number; injector?: Injector | null } = {}
+    { priority = 0, injector }: { priority?: number; injector?: Injector } = {}
 ) {
-    assertInInjectionContext(injectBeforeRender);
-
-    if (!injector) {
-        injector = inject(Injector);
-    }
+    injector = assertInjectionContext(injectBeforeRender, injector);
 
     return runInInjectionContext(injector, () => {
         const store = inject(NgtStore);

libs/angular-three/src/lib/di/ref.ts

@@ -4,13 +4,13 @@ import {
     ElementRef,
     Injector,
     Signal,
-    assertInInjectionContext,
     computed,
     inject,
     runInInjectionContext,
     untracked,
 } from '@angular/core';
 import { NgtInstanceNode } from '../types';
+import { assertInjectionContext } from '../utils/assert-in-injection-context';
 import { getLocalState } from '../utils/instance';
 import { is } from '../utils/is';
 import { safeDetectChanges } from '../utils/safe-detect-changes';
@@ -25,11 +25,7 @@ export function injectNgtRef<TElement>(
     initial: ElementRef<TElement> | TElement = null!,
     injector?: Injector
 ): NgtInjectedRef<TElement> {
-    assertInInjectionContext(injectNgtRef);
-
-    if (!injector) {
-        injector = inject(Injector);
-    }
+    injector = assertInjectionContext(injectNgtRef, injector);
 
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);

libs/angular-three/src/lib/loader.ts

@@ -1,7 +1,6 @@
 import {
     ChangeDetectorRef,
     Injector,
-    assertInInjectionContext,
     computed,
     effect,
     inject,
@@ -19,6 +18,7 @@ import type {
     NgtLoaderReturnType,
     NgtObjectMap,
 } from './types';
+import { assertInjectionContext } from './utils/assert-in-injection-context';
 import { makeObjectGraph } from './utils/make';
 import { safeDetectChanges } from './utils/safe-detect-changes';
 
@@ -101,12 +101,7 @@ export function injectNgtLoader<
         injector?: Injector;
     } = {}
 ): Signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>> {
-    assertInInjectionContext(injectNgtLoader);
-
-    if (!injector) {
-        injector = inject(Injector);
-    }
-
+    injector = assertInjectionContext(injectNgtLoader, injector);
     return runInInjectionContext(injector, () => {
         const cdr = inject(ChangeDetectorRef);
         const response = signal<NgtLoaderResults<TUrl, NgtBranchingReturn<TReturn, GLTF, GLTF & NgtObjectMap>>>(null!);

libs/angular-three/src/lib/utils/assert-in-injection-context.ts

@@ -0,0 +1,13 @@
+import { Injector, assertInInjectionContext, inject } from '@angular/core';
+
+export function assertInjectionContext(fn: Function, injector?: Injector): Injector {
+    try {
+        if (!injector) {
+            return inject(Injector);
+        }
+        return injector;
+    } catch {
+        !injector && assertInInjectionContext(fn);
+        return null!;
+    }
+}

libs/soba/misc/src/animations/animations.ts

@@ -0,0 +1,72 @@
+import { DestroyRef, Injector, effect, inject, runInInjectionContext } from '@angular/core';
+import { assertInjectionContext, injectBeforeRender, injectNgtRef, type NgtInjectedRef } from 'angular-three';
+import * as THREE from 'three';
+
+export function injectNgtsAnimations(
+    animationsFactory: () => THREE.AnimationClip[],
+    {
+        ref,
+        injector,
+    }: {
+        ref?: NgtInjectedRef<THREE.Object3D> | THREE.Object3D;
+        injector?: Injector;
+    }
+) {
+    injector = assertInjectionContext(injectNgtsAnimations, injector);
+    return runInInjectionContext(injector, () => {
+        let actualRef = injectNgtRef<THREE.Object3D>();
+
+        if (ref) {
+            if (ref instanceof THREE.Object3D) {
+                actualRef.nativeElement = ref;
+            } else {
+                actualRef = ref;
+            }
+        }
+
+        const mixer = new THREE.AnimationMixer(null!);
+        const actions = {} as Record<string, THREE.AnimationAction>;
+        let cached = {} as Record<string, THREE.AnimationAction>;
+
+        const clips = [] as THREE.AnimationClip[];
+        const names = [] as string[];
+
+        inject(DestroyRef).onDestroy(() => {
+            // clear cached
+            cached = {};
+            // uncache actions
+            Object.values(actions).forEach((action) => {
+                mixer.uncacheAction(action as unknown as THREE.AnimationClip, actualRef.untracked);
+            });
+            // stop all actions
+            mixer.stopAllAction();
+        });
+
+        injectBeforeRender(({ delta }) => mixer.update(delta));
+
+        effect(() => {
+            const actual = actualRef.nativeElement;
+            const animations = animationsFactory();
+
+            for (let i = 0; i < animations.length; i++) {
+                const clip = animations[i];
+
+                names.push(clip.name);
+                clips.push(clip);
+
+                Object.defineProperty(actions, clip.name, {
+                    enumerable: true,
+                    get: () => {
+                        return cached[clip.name] || (cached[clip.name] = mixer.clipAction(clip, actual));
+                    },
+                });
+
+                if (i === 0) {
+                    actions[clip.name].play();
+                }
+            }
+        });
+
+        return { ref: actualRef, actions, mixer, names, clips };
+    });
+}

libs/soba/misc/src/bake-shadows/bake-shadows.ts

@@ -0,0 +1,17 @@
+import { Directive, effect, inject } from '@angular/core';
+import { NgtStore } from 'angular-three';
+
+@Directive({ selector: 'ngts-bake-shadows', standalone: true })
+export class NgtsBakeShadows {
+    constructor() {
+        const store = inject(NgtStore);
+        effect((onCleanup) => {
+            const gl = store.select('gl')();
+            gl.shadowMap.autoUpdate = false;
+            gl.shadowMap.needsUpdate = true;
+            onCleanup(() => {
+                gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
+            });
+        });
+    }
+}

libs/soba/misc/src/depth-buffer/depth-buffer.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectorRef, computed, effect, inject, Injector, runInInjectionContext } from '@angular/core';
+import { assertInjectionContext, injectBeforeRender, injectNgtRef, NgtStore, safeDetectChanges } from 'angular-three';
+import * as THREE from 'three';
+import { injectNgtsFBO } from '../fbo/fbo';
+
+export interface NgtsDepthBufferParams {
+    size: number;
+    frames: number;
+}
+
+export function injectNgtsDepthBuffer(
+    paramsFactory: () => NgtsDepthBufferParams = () => ({ size: 256, frames: Infinity }),
+    { injector }: { injector?: Injector } = {}
+) {
+    injector = assertInjectionContext(injectNgtsDepthBuffer, injector);
+    return runInInjectionContext(injector, () => {
+        const depthBufferRef = injectNgtRef<THREE.DepthTexture>();
+        const store = inject(NgtStore);
+        const cdr = inject(ChangeDetectorRef);
+
+        const fboParams = computed(() => {
+            const params = paramsFactory();
+            const size = store.select('size')();
+            const dpr = store.select('viewport', 'dpr')();
+
+            const width = params.size || size.width * dpr;
+            const height = params.size || size.height * dpr;
+            const depthTexture = new THREE.DepthTexture(width, height);
+            depthTexture.format = THREE.DepthFormat;
+            depthTexture.type = THREE.UnsignedShortType;
+            return { width, height, settings: { depthTexture } };
+        });
+
+        const fboRef = injectNgtsFBO(fboParams);
+
+        let count = 0;
+        injectBeforeRender(({ gl, scene, camera }) => {
+            const params = paramsFactory();
+            if ((params.frames === Infinity || count < params.frames) && fboRef.untracked) {
+                gl.setRenderTarget(fboRef.untracked);
+                gl.render(scene, camera);
+                gl.setRenderTarget(null);
+                count++;
+            }
+        });
+
+        effect(
+            () => {
+                const fbo = fboRef.nativeElement;
+                if (fbo) {
+                    depthBufferRef.nativeElement = fbo.depthTexture;
+                    safeDetectChanges(cdr);
+                }
+            },
+            { allowSignalWrites: true }
+        );
+
+        return depthBufferRef;
+    });
+}

libs/soba/misc/src/fbo/fbo.ts

@@ -1,5 +1,4 @@
 import {
-    assertInInjectionContext,
     ChangeDetectorRef,
     computed,
     DestroyRef,
@@ -8,7 +7,7 @@ import {
     Injector,
     runInInjectionContext,
 } from '@angular/core';
-import { injectNgtRef, NgtStore, safeDetectChanges } from 'angular-three';
+import { assertInjectionContext, injectNgtRef, NgtStore, safeDetectChanges } from 'angular-three';
 import * as THREE from 'three';
 
 interface FBOSettings extends THREE.WebGLRenderTargetOptions {
@@ -25,12 +24,7 @@ export interface NgtsFBOParams {
 }
 
 export function injectNgtsFBO(fboParams: () => NgtsFBOParams, { injector }: { injector?: Injector } = {}) {
-    assertInInjectionContext(injectNgtsFBO);
-
-    if (!injector) {
-        injector = inject(Injector);
-    }
-
+    injector = assertInjectionContext(injectNgtsFBO, injector);
     return runInInjectionContext(injector, () => {
         const store = inject(NgtStore);
         const cdr = inject(ChangeDetectorRef);
@@ -41,33 +35,33 @@ export function injectNgtsFBO(fboParams: () => NgtsFBOParams, { injector }: { in
 
         const trigger = computed(() => {
             const size = store.select('size');
-            const viewport = store.select('viewport');
+            const dpr = store.select('viewport', 'dpr');
             const { width, height, settings } = fboParams();
-            return { size: size(), viewport: viewport(), width, height, settings };
+            const _width = typeof width === 'number' ? width : size().width * dpr();
+            const _height = typeof height === 'number' ? height : size().height * dpr();
+            const _settings = (typeof width === 'number' ? settings : (width as FBOSettings)) || {};
+
+            return { width: _width, height: _height, settings: _settings };
         });
 
         effect(
             () => {
-                const { size, width, height, settings, viewport } = trigger();
-                const _width = typeof width === 'number' ? width : size.width * viewport.dpr;
-                const _height = typeof height === 'number' ? height : size.height * viewport.dpr;
-                const _settings = (typeof width === 'number' ? settings : (width as FBOSettings)) || {};
-                const { samples = 0, depth, ...targetSettings } = _settings;
-
+                const { width, height, settings } = trigger();
+                const { samples = 0, depth, ...targetSettings } = settings;
                 if (!targetRef.untracked) {
-                    const target = new THREE.WebGLRenderTarget(_width, _height, {
+                    const target = new THREE.WebGLRenderTarget(width, height, {
                         minFilter: THREE.LinearFilter,
                         magFilter: THREE.LinearFilter,
                         type: THREE.HalfFloatType,
                         ...targetSettings,
                     });
-                    if (depth) target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType);
+                    if (depth) target.depthTexture = new THREE.DepthTexture(width, height, THREE.FloatType);
 
                     target.samples = samples;
                     targetRef.nativeElement = target;
                 }
 
-                targetRef.untracked.setSize(_width, _height);
+                targetRef.untracked.setSize(width, height);
                 if (samples) targetRef.nativeElement.samples = samples;
                 safeDetectChanges(cdr);
             },

libs/soba/misc/src/index.ts

@@ -1 +1,4 @@
+export * from './animations/animations';
+export * from './bake-shadows/bake-shadows';
+export * from './depth-buffer/depth-buffer';
 export * from './fbo/fbo';