fix(soba): adjust environment to use ngtsEnvironmentInput as a provider

Author: Chau Tran

libs/soba/staging/src/environment/environment-cube.ts

@@ -1,29 +1,35 @@
-import { Directive, computed, effect, inject } from '@angular/core';
-import { NgtStore } from 'angular-three';
+import { Directive, Input, computed, effect, inject } from '@angular/core';
+import { NgtStore, requestAnimationInInjectionContext } from 'angular-three';
 import { NgtsEnvironmentInput } from './environment-input';
 import { injectNgtsEnvironment, setEnvProps } from './utils';
 
 @Directive({
     selector: 'ngts-environment-cube',
     standalone: true,
 })
-export class NgtsEnvironmentCube extends NgtsEnvironmentInput {
+export class NgtsEnvironmentCube {
+    protected readonly environmentInput = inject(NgtsEnvironmentInput);
     readonly #store = inject(NgtStore);
-    readonly textureRef = injectNgtsEnvironment(this.environmentParams);
+    readonly textureRef = injectNgtsEnvironment(this.environmentInput.environmentParams);
+
+    @Input() set background(background: boolean) {
+        this.environmentInput.set({ background });
+    }
 
     constructor() {
-        super();
-        this.set({ background: false });
-        this.#setEnvProps();
+        this.environmentInput.patch({ background: false });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
     }
 
     #setEnvProps() {
         const scene = this.#store.select('scene');
         const trigger = computed(() => ({
             defaultScene: scene(),
-            scene: this.environmentScene(),
-            background: this.environmentBackground(),
-            blur: this.environmentBlur(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            blur: this.environmentInput.environmentBlur(),
             texture: this.textureRef.nativeElement,
         }));
 

libs/soba/staging/src/environment/environment-ground.ts

@@ -1,4 +1,4 @@
-import { Component, computed, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { extend, NgtArgs } from 'angular-three';
 import { GroundProjectedEnv } from 'three-stdlib';
 import { NgtsEnvironmentInput } from './environment-input';
@@ -11,27 +11,23 @@ extend({ GroundProjectedEnv });
     selector: 'ngts-environment-ground',
     standalone: true,
     template: `
-        <ngts-environment-map
-            [background]="environmentBackground()"
-            [blur]="environmentBlur()"
-            [scene]="environmentScene()"
-            [map]="texture()"
-        />
+        <ngts-environment-map [map]="texture()" [background]="environmentInput.environmentBackground()" />
         <ngt-ground-projected-env *args="groundArgs()" [scale]="scale()" [height]="height()" [radius]="radius()" />
     `,
     imports: [NgtsEnvironmentMap, NgtArgs],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class NgtsEnvironmentGround extends NgtsEnvironmentInput {
-    readonly #defaultTexture = injectNgtsEnvironment(this.environmentParams);
+export class NgtsEnvironmentGround {
+    protected readonly environmentInput = inject(NgtsEnvironmentInput);
+    readonly #defaultTexture = injectNgtsEnvironment(this.environmentInput.environmentParams);
 
     readonly texture = computed(() => {
         const defaultTexture = this.#defaultTexture.nativeElement;
-        return this.environmentMap() || defaultTexture;
+        return this.environmentInput.environmentMap() || defaultTexture;
     });
 
     readonly groundArgs = computed(() => (this.texture() ? [this.texture()] : []));
-    readonly height = computed(() => (this.environmentGround() as any)?.height);
-    readonly radius = computed(() => (this.environmentGround() as any)?.radius);
-    readonly scale = computed(() => (this.environmentGround() as any)?.scale ?? 1000);
+    readonly height = computed(() => (this.environmentInput.environmentGround() as any)?.height);
+    readonly radius = computed(() => (this.environmentInput.environmentGround() as any)?.radius);
+    readonly scale = computed(() => (this.environmentInput.environmentGround() as any)?.scale ?? 1000);
 }

libs/soba/staging/src/environment/environment-map.ts

@@ -1,29 +1,39 @@
-import { Directive, computed, effect, inject } from '@angular/core';
-import { NgtStore } from 'angular-three';
+import { Directive, Input, computed, effect, inject } from '@angular/core';
+import { NgtStore, requestAnimationInInjectionContext } from 'angular-three';
 import { NgtsEnvironmentInput } from './environment-input';
 import { setEnvProps } from './utils';
 
 @Directive({
     selector: 'ngts-environment-map',
     standalone: true,
 })
-export class NgtsEnvironmentMap extends NgtsEnvironmentInput {
+export class NgtsEnvironmentMap {
+    protected readonly environmentInput = inject(NgtsEnvironmentInput);
     readonly #store = inject(NgtStore);
 
+    @Input() set map(map: THREE.Texture) {
+        this.environmentInput.set({ map });
+    }
+
+    @Input() set background(background: boolean) {
+        this.environmentInput.set({ background });
+    }
+
     constructor() {
-        super();
-        this.set({ background: false });
-        this.#setEnvProps();
+        this.environmentInput.patch({ background: false });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
     }
 
     #setEnvProps() {
         const scene = this.#store.select('scene');
         const trigger = computed(() => ({
             defaultScene: scene(),
-            scene: this.environmentScene(),
-            background: this.environmentBackground(),
-            blur: this.environmentBlur(),
-            texture: this.environmentMap(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            blur: this.environmentInput.environmentBlur(),
+            texture: this.environmentInput.environmentMap(),
         }));
 
         effect((onCleanup) => {

libs/soba/staging/src/environment/environment-portal.ts

@@ -10,6 +10,7 @@ import {
     NgtRenderState,
     NgtStore,
     prepare,
+    requestAnimationInInjectionContext,
 } from 'angular-three';
 import * as THREE from 'three';
 import { CubeCamera } from 'three';
@@ -28,45 +29,53 @@ extend({ CubeCamera });
             <ng-template ngtPortalContent>
                 <ng-content />
                 <ngt-cube-camera *args="cameraArgs()" [ref]="cubeCameraRef" />
-                <ng-container *ngIf="environmentFiles() || environmentPreset(); else environmentMap">
-                    <ngts-environment-cube
-                        [background]="true"
-                        [files]="environmentFiles()"
-                        [preset]="environmentPreset()"
-                        [path]="environmentPath()"
-                        [extensions]="environmentExtensions()"
-                    />
+                <ng-container
+                    *ngIf="
+                        environmentInput.environmentFiles() || environmentInput.environmentPreset();
+                        else environmentMap
+                    "
+                >
+                    <ngts-environment-cube [background]="true" />
                 </ng-container>
                 <ng-template #environmentMap>
-                    <ngts-environment-map
-                        [background]="true"
-                        [map]="environmentMap()"
-                        [extensions]="environmentExtension()"
-                    />
+                    <ngts-environment-map [background]="true" [map]="environmentInput.environmentMap()" />
                 </ng-template>
             </ng-template>
         </ngt-portal>
     `,
     imports: [NgtPortal, NgtPortalContent, NgtsEnvironmentMap, NgtsEnvironmentCube, NgIf, NgtArgs],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class NgtsEnvironmentPortal extends NgtsEnvironmentInput {
+export class NgtsEnvironmentPortal {
+    protected readonly environmentInput = inject(NgtsEnvironmentInput);
     readonly #store = inject(NgtStore);
 
     readonly virtualSceneRef = injectNgtRef<THREE.Scene>(prepare(new THREE.Scene()));
     readonly cubeCameraRef = injectNgtRef<THREE.CubeCamera>();
 
     readonly #fbo = computed(() => {
-        const fbo = new THREE.WebGLCubeRenderTarget(this.environmentResolution());
+        const fbo = new THREE.WebGLCubeRenderTarget(this.environmentInput.environmentResolution());
         fbo.texture.type = THREE.HalfFloatType;
         return fbo;
     });
-    readonly cameraArgs = computed(() => [this.environmentNear(), this.environmentFar(), this.#fbo()]);
+    readonly cameraArgs = computed(() => [
+        this.environmentInput.environmentNear(),
+        this.environmentInput.environmentFar(),
+        this.#fbo(),
+    ]);
 
     constructor() {
-        super();
-        this.set({ near: 1, far: 1000, resolution: 256, frames: 1, background: false, preset: undefined });
-        this.#setEnvProps();
+        this.environmentInput.patch({
+            near: 1,
+            far: 1000,
+            resolution: 256,
+            frames: 1,
+            background: false,
+            preset: undefined,
+        });
+        requestAnimationInInjectionContext(() => {
+            this.#setEnvProps();
+        });
         injectBeforeRender(this.#onBeforeRender.bind(this, 1));
     }
 
@@ -78,10 +87,10 @@ export class NgtsEnvironmentPortal extends NgtsEnvironmentInput {
             gl: gl(),
             defaultScene: scene(),
             fbo: this.#fbo(),
-            scene: this.environmentScene(),
-            background: this.environmentBackground(),
-            frames: this.environmentFrames(),
-            blur: this.environmentBlur(),
+            scene: this.environmentInput.environmentScene(),
+            background: this.environmentInput.environmentBackground(),
+            frames: this.environmentInput.environmentFrames(),
+            blur: this.environmentInput.environmentBlur(),
             virtualScene: this.virtualSceneRef.nativeElement,
             cubeCamera: this.cubeCameraRef.nativeElement,
         }));
@@ -95,7 +104,7 @@ export class NgtsEnvironmentPortal extends NgtsEnvironmentInput {
     }
 
     #onBeforeRender(count: number, { gl }: NgtRenderState) {
-        const { frames } = this.get();
+        const { frames } = this.environmentInput.get();
         if (frames === Infinity || count < frames) {
             const camera = this.cubeCameraRef.nativeElement;
             const virtualScene = this.virtualSceneRef.nativeElement;

libs/soba/staging/src/environment/environment.ts

@@ -13,63 +13,19 @@ export class NgtsEnvironmentContent {}
     selector: 'ngts-environment',
     standalone: true,
     template: `
-        <ngts-environment-ground
-            *ngIf="environmentGround(); else noGround"
-            [ground]="environmentGround()"
-            [map]="environmentMap()"
-            [scene]="environmentScene()"
-            [blur]="environmentBlur()"
-            [background]="environmentBackground()"
-            [preset]="environmentPreset()"
-            [frames]="environmentFrames()"
-            [far]="environmentFar()"
-            [near]="environmentNear()"
-            [resolution]="environmentResolution()"
-            [files]="environmentFiles()"
-            [path]="environmentPath()"
-            [extensions]="environmentExtensions()"
-        />
+        <ngts-environment-ground *ngIf="environmentGround(); else noGround" />
         <ng-template #noGround>
             <ngts-environment-map
                 *ngIf="environmentMap(); else noMap"
                 [map]="environmentMap()"
-                [scene]="environmentScene()"
-                [blur]="environmentBlur()"
                 [background]="environmentBackground()"
             />
             <ng-template #noMap>
-                <ngts-environment-portal
-                    *ngIf="content; else noPortal"
-                    [frames]="environmentFrames()"
-                    [far]="environmentFar()"
-                    [near]="environmentNear()"
-                    [resolution]="environmentResolution()"
-                    [map]="environmentMap()"
-                    [background]="environmentBackground()"
-                    [blur]="environmentBlur()"
-                    [scene]="environmentScene()"
-                    [files]="environmentFiles()"
-                    [path]="environmentPath()"
-                    [preset]="environmentPreset()"
-                    [extensions]="environmentExtensions()"
-                >
+                <ngts-environment-portal *ngIf="content; else noPortal">
                     <ng-container *ngTemplateOutlet="content" />
                 </ngts-environment-portal>
                 <ng-template #noPortal>
-                    <ngts-environment-cube
-                        [frames]="environmentFrames()"
-                        [far]="environmentFar()"
-                        [near]="environmentNear()"
-                        [resolution]="environmentResolution()"
-                        [map]="environmentMap()"
-                        [background]="environmentBackground()"
-                        [blur]="environmentBlur()"
-                        [scene]="environmentScene()"
-                        [files]="environmentFiles()"
-                        [path]="environmentPath()"
-                        [preset]="environmentPreset()"
-                        [extensions]="environmentExtensions()"
-                    />
+                    <ngts-environment-cube [background]="environmentBackground()" />
                 </ng-template>
             </ng-template>
         </ng-template>
@@ -82,6 +38,7 @@ export class NgtsEnvironmentContent {}
         NgIf,
         NgTemplateOutlet,
     ],
+    providers: [{ provide: NgtsEnvironmentInput, useExisting: NgtsEnvironment }],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsEnvironment extends NgtsEnvironmentInput {