fix: clean up selections from rx-state

libs/angular-three-soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts

@@ -12,7 +12,6 @@ import {
     Output,
     TemplateRef,
 } from '@angular/core';
-import { selectSlice } from '@rx-angular/state';
 import { extend, injectNgtRef, NgtPortal, NgtPortalContent, NgtRxStore, NgtStore } from 'angular-three';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
 import { combineLatest, map } from 'rxjs';
@@ -191,7 +190,13 @@ export class NgtsGizmoHelper extends NgtRxStore implements OnInit {
     private setGizmoPosition() {
         this.connect(
             'gizmoPosition',
-            combineLatest([this.store.select('size'), this.select(selectSlice(['alignment', 'margin']))]).pipe(
+            combineLatest([
+                this.store.select('size'),
+                combineLatest({
+                    alignment: this.select('alignment'),
+                    margin: this.select('margin'),
+                }),
+            ]).pipe(
                 map(([size, { alignment, margin }]) => {
                     const [marginX, marginY] = margin;
                     const x = alignment.endsWith('-center')

libs/angular-three-soba/abstractions/src/lib/text-3d/text-3d.ts

@@ -4,21 +4,12 @@ import { combineLatest, map, of, switchMap } from 'rxjs';
 import { Mesh } from 'three';
 import { FontLoader, TextGeometry } from 'three-stdlib';
 
-declare type Glyph = {
-    _cachedOutline: string[];
-    ha: number;
-    o: string;
-};
+declare type Glyph = { _cachedOutline: string[]; ha: number; o: string };
 
 declare type FontData = {
-    boundingBox: {
-        yMax: number;
-        yMin: number;
-    };
+    boundingBox: { yMax: number; yMin: number };
     familyName: string;
-    glyphs: {
-        [k: string]: Glyph;
-    };
+    glyphs: { [k: string]: Glyph };
     resolution: number;
     underlineThickness: number;
 };

libs/angular-three-soba/materials/src/lib/mesh-transmission-material/mesh-transmission-material.ts

@@ -203,8 +203,4 @@ export class NgtsMeshTranmissionMaterial extends NgtRxStore {
             }
         });
     }
-
-    ngOnInit() {
-        console.log(this.materialRef);
-    }
 }

libs/angular-three-soba/performance/src/lib/detailed/detailed.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit } from '@angular/core';
-import { extend, injectNgtRef, NgtRxStore } from 'angular-three';
+import { extend, injectNgtRef, NgtBeforeRenderEvent, NgtRxStore } from 'angular-three';
 import { combineLatest } from 'rxjs';
 import { LOD } from 'three';
 
@@ -9,7 +9,7 @@ extend({ LOD });
     selector: 'ngts-detailed[distances]',
     standalone: true,
     template: `
-        <ngt-lOD [ref]="lodRef" ngtCompound (beforeRender)="$any($event).object.update($any($event).state.camera)">
+        <ngt-lOD [ref]="lodRef" ngtCompound (beforeRender)="onLODBeforeRender($any($event))">
             <ng-content />
         </ngt-lOD>
     `,
@@ -26,6 +26,10 @@ export class NgtsDetailed extends NgtRxStore implements OnInit {
         this.updateLodChildren();
     }
 
+    onLODBeforeRender({ object, state }: NgtBeforeRenderEvent<THREE.LOD>) {
+        object.update(state.camera);
+    }
+
     private updateLodChildren() {
         this.hold(combineLatest([this.lodRef.children$(), this.select('distances')]), ([children, distances]) => {
             this.lodRef.nativeElement.levels.length = 0;

libs/angular-three-soba/shaders/src/index.ts

@@ -9,4 +9,5 @@ export * from './lib/mesh-refraction-material/mesh-refraction-material';
 export * from './lib/mesh-transmission-material/mesh-transmission-material';
 export * from './lib/mesh-wobble-material/mesh-wobble-material';
 export * from './lib/shader-material/shader-material';
+export * from './lib/soft-shadow-material/soft-shadow-material';
 export * from './lib/spot-light-material/spot-light-material';

libs/angular-three-soba/shaders/src/lib/soft-shadow-material/soft-shadow-material.ts

@@ -0,0 +1,42 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '../shader-material/shader-material';
+
+export const SoftShadowMaterial = shaderMaterial(
+    {
+        color: new THREE.Color(),
+        blend: 2.0,
+        alphaTest: 0.75,
+        opacity: 0,
+        map: null,
+    },
+    // language=GLSL
+    `
+varying vec2 vUv;
+void main() {
+  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+  vUv = uv;
+}
+  `,
+    // language=GLSL
+    `
+varying vec2 vUv;
+uniform sampler2D map;
+uniform vec3 color;
+uniform float blend;
+uniform float opacity;
+uniform float alphaTest;
+void main() {
+  vec4 sampledDiffuseColor = texture2D(map, vUv);
+  gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
+  #include <tonemapping_fragment>
+  #include <encodings_fragment>
+}
+  `
+);
+
+export type SoftShadowMaterialInputs = {
+    map: THREE.Texture;
+    color?: THREE.ColorRepresentation;
+    alphaTest?: number;
+    blend?: number;
+};

libs/angular-three-soba/src/shaders/mesh-refraction-material.stories.ts

@@ -27,12 +27,12 @@ extend({ Mesh, Color, AmbientLight, SpotLight, PointLight, SphereGeometry, MeshS
             <ng-template [ngtsCameraContent]="true" let-texture="fbo">
                 <ngts-caustics
                     color="white"
-                    [backfaces]="true"
+                    [backside]="true"
                     [position]="[0, -0.5, 0]"
                     [lightSource]="[5, 5, -10]"
                     [worldRadius]="1"
                     [ior]="1.8"
-                    [backfaceIor]="1.1"
+                    [backsideIOR]="1.1"
                     [intensity]="0.1"
                 >
                     <ngt-mesh

libs/angular-three-soba/staging/src/lib/accumulative-shadows/accumulative-shadows.ts

@@ -1,51 +1,11 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Directive, inject, InjectionToken, Input } from '@angular/core';
 import { extend, getLocalState, injectNgtRef, NgtRxStore, NgtStore } from 'angular-three';
-import { shaderMaterial } from 'angular-three-soba/shaders';
+import { SoftShadowMaterial, SoftShadowMaterialInputs } from 'angular-three-soba/shaders';
 import { combineLatest, Subject } from 'rxjs';
 import * as THREE from 'three';
 import { Group, Mesh, PlaneGeometry } from 'three';
 import { ProgressiveLightMap } from './progressive-light-map';
 
-const SoftShadowMaterial = shaderMaterial(
-    {
-        color: new THREE.Color(),
-        blend: 2.0,
-        alphaTest: 0.75,
-        opacity: 0,
-        map: null,
-    },
-    // language=GLSL
-    `
-varying vec2 vUv;
-void main() {
-  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
-  vUv = uv;
-}
-  `,
-    // language=GLSL
-    `
-varying vec2 vUv;
-uniform sampler2D map;
-uniform vec3 color;
-uniform float blend;
-uniform float opacity;
-uniform float alphaTest;
-void main() {
-  vec4 sampledDiffuseColor = texture2D(map, vUv);
-  gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
-  #include <tonemapping_fragment>
-  #include <encodings_fragment>
-}
-  `
-);
-
-type SoftShadowMaterialInputs = {
-    map: THREE.Texture;
-    color?: THREE.ColorRepresentation;
-    alphaTest?: number;
-    blend?: number;
-};
-
 extend({ SoftShadowMaterial, Group, Mesh, PlaneGeometry });
 
 export type NgtsAccumulativeShadowsLightApi = { update: () => void };
@@ -166,7 +126,7 @@ function accumulativeShadowsApiFactory(accumulativeShadows: NgtsAccumulativeShad
     return api;
 }
 
-@Directive({ selector: 'ngts-accumulative-shadows-consumer', standalone: true })
+@Directive({ selector: '[ngtsAccumulativeShadowsConsumer]', standalone: true })
 export class AccumulativeShadowsConsumer {
     constructor() {
         inject(NGTS_ACCUMULATIVE_SHADOWS_API);
@@ -180,7 +140,7 @@ export class AccumulativeShadowsConsumer {
         <ngt-group ngtCompound>
             <ngt-group [ref]="accumulativeShadowsRef" [traverse]="nullTraverse">
                 <ng-content />
-                <ngts-accumulative-shadows-consumer />
+                <ng-container ngtsAccumulativeShadowsConsumer />
             </ngt-group>
             <ngt-mesh [ref]="meshRef" [receiveShadow]="true" [scale]="get('scale')" [rotation]="[-Math.PI / 2, 0, 0]">
                 <ngt-plane-geometry />

libs/angular-three-soba/staging/src/lib/accumulative-shadows/randomized-lights.ts

@@ -60,7 +60,7 @@ function randomizedLightsApiFactory(randomizedLights: NgtsRandomizedLights) {
     return api;
 }
 
-@Directive({ selector: 'ngts-randomized-lights-consumer', standalone: true })
+@Directive({ selector: '[ngtsRandomizedLightsConsumer]', standalone: true })
 export class RandomizedLightsConsumer {
     constructor() {
         inject(NGTS_RANDOMIZED_LIGHTS_API);
@@ -81,7 +81,7 @@ export class RandomizedLightsConsumer {
                 <ngt-vector2 *args="[get('mapSize'), get('mapSize')]" attach="shadow.mapSize" />
                 <ngt-orthographic-camera *args="get('cameraArgs')" attach="shadow.camera" />
             </ngt-directional-light>
-            <ngts-randomized-lights-consumer />
+            <ng-container ngtsRandomizedLightsConsumer />
         </ngt-group>
     `,
     imports: [RandomizedLightsConsumer, NgtArgs, NgtRepeat],

libs/angular-three-soba/staging/src/lib/caustics/caustics.ts

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, OnInit } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, OnInit } from '@angular/core';
 import { extend, injectNgtRef, NgtRxStore, NgtStore } from 'angular-three';
 import { NgtsEdges } from 'angular-three-soba/abstractions';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
@@ -189,7 +189,6 @@ export class NgtsCaustics extends NgtRxStore implements OnInit {
     );
 
     private readonly store = inject(NgtStore);
-    private readonly cdr = inject(ChangeDetectorRef);
 
     override initialize(): void {
         this.set({
@@ -232,43 +231,41 @@ export class NgtsCaustics extends NgtRxStore implements OnInit {
         this.effect(
             combineLatest([
                 this.sceneRef.$,
-                this.sceneRef.children$('both'),
+                this.sceneRef.children$(),
                 this.causticsRef.$,
                 this.cameraRef.$,
-                this.planeRef.$,
-                this.planeRef.children$('both'),
                 this.normalTargetFbo.$,
                 this.normalTargetBFbo.$,
                 this.causticsTargetFbo.$,
                 this.causticsTargetBFbo.$,
+                this.planeRef.$,
+                this.planeRef.children$('both'),
             ]),
             ([
                 scene,
                 children,
                 caustics,
                 camera,
-                plane,
-                ,
                 normalTarget,
                 normalTargetB,
                 causticsTarget,
                 causticsTargetB,
+                plane,
             ]) => {
-                const v = new THREE.Vector3();
-                const lpF = new THREE.Frustum();
-                const lpM = new THREE.Matrix4();
-                const lpP = new THREE.Plane();
-
-                const lightDir = new THREE.Vector3();
-                const lightDirInv = new THREE.Vector3();
-                const bounds = new THREE.Box3();
-                const focusPos = new THREE.Vector3();
-
-                let count = 0;
-
                 caustics.updateWorldMatrix(false, true);
 
                 if (children.length > 1) {
+                    const v = new THREE.Vector3();
+                    const lpF = new THREE.Frustum();
+                    const lpM = new THREE.Matrix4();
+                    const lpP = new THREE.Plane();
+
+                    const lightDir = new THREE.Vector3();
+                    const lightDirInv = new THREE.Vector3();
+                    const bounds = new THREE.Box3();
+                    const focusPos = new THREE.Vector3();
+
+                    let count = 0;
                     return this.store.get('internal').subscribe(({ gl }) => {
                         const {
                             frames,
@@ -399,10 +396,10 @@ export class NgtsCaustics extends NgtRxStore implements OnInit {
 
                             // Render front face caustics
                             causticsMaterial.ior = ior;
-                            // @ts-ignore
-                            plane.material.lightProjMatrix = camera.projectionMatrix;
-                            // @ts-ignore
-                            plane.material.lightViewMatrix = camera.matrixWorldInverse;
+                            (plane.material as CausticsProjectionMaterialType).lightProjMatrix =
+                                camera.projectionMatrix;
+                            (plane.material as CausticsProjectionMaterialType).lightViewMatrix =
+                                camera.matrixWorldInverse;
                             causticsMaterial.normalTexture = normalTarget.texture;
                             causticsMaterial.depthTexture = normalTarget.depthTexture;
                             gl.setRenderTarget(causticsTarget);