angular-three-soba 1.8.1 → 1.9.1

package/fesm2015/angular-three-soba-staging.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Directive, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, TemplateRef, ContentChild, ChangeDetectorRef } from '@angular/core';
-import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtArgs, NgtRepeat, is, injectBeforeRender, NgtPush, injectNgtDestroy, injectNgtLoader, startWithUndefined, prepare, NgtPortal, NgtPortalContent } from 'angular-three';
-import { shaderMaterial } from 'angular-three-soba/shaders';
+import { extend, NgtStore, getLocalState, NgtRxStore, injectNgtRef, NgtArgs, NgtRepeat, is, injectBeforeRender, NgtPush, injectNgtDestroy, injectNgtLoader, startWithUndefined, prepare, NgtPortal, NgtPortalContent, createRunInContext, checkUpdate } from 'angular-three';
+import { shaderMaterial, SpotLightMaterial } from 'angular-three-soba/shaders';
 import { Subject, combineLatest, switchMap, isObservable, of, debounceTime, map, takeUntil, startWith, withLatestFrom } from 'rxjs';
 import * as THREE from 'three';
-import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Box3, Vector3, Sphere, MeshStandardMaterial, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, HalfFloatType, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, AmbientLight, SpotLight, PointLight, Spherical, AdditiveBlending } from 'three';
-import { SimplexNoise, HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky } from 'three-stdlib';
+import { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Box3, Vector3, Sphere, MeshStandardMaterial, MeshBasicMaterial, CubeTextureLoader, CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, CubeCamera, HalfFloatType, Points, BufferGeometry, BufferAttribute, Vector4, Color, MathUtils, SpotLight, SpotLightHelper, AmbientLight, PointLight, Spherical, AdditiveBlending } from 'three';
+import { SimplexNoise, HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky, FullScreenQuad } from 'three-stdlib';
 import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { NgtsBillboard } from 'angular-three-soba/abstractions';
 import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
@@ -2395,6 +2395,565 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }] } });
 
+class NgtsSpotLightInput extends NgtRxStore {
+    set depthBuffer(depthBuffer) {
+        this.set({ depthBuffer });
+    }
+    set angle(angle) {
+        this.set({ angle });
+    }
+    set distance(distance) {
+        this.set({ distance });
+    }
+    set attenuation(attenuation) {
+        this.set({ attenuation });
+    }
+    set anglePower(anglePower) {
+        this.set({ anglePower });
+    }
+    set radiusTop(radiusTop) {
+        this.set({ radiusTop });
+    }
+    set radiusBottom(radiusBottom) {
+        this.set({ radiusBottom });
+    }
+    set opacity(opacity) {
+        this.set({ opacity });
+    }
+    set color(color) {
+        this.set({ color });
+    }
+    set debug(debug) {
+        this.set({ debug });
+    }
+}
+NgtsSpotLightInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtsSpotLightInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLightInput, inputs: { depthBuffer: "depthBuffer", angle: "angle", distance: "distance", attenuation: "attenuation", anglePower: "anglePower", radiusTop: "radiusTop", radiusBottom: "radiusBottom", opacity: "opacity", color: "color", debug: "debug" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightInput, decorators: [{
+            type: Directive
+        }], propDecorators: { depthBuffer: [{
+                type: Input
+            }], angle: [{
+                type: Input
+            }], distance: [{
+                type: Input
+            }], attenuation: [{
+                type: Input
+            }], anglePower: [{
+                type: Input
+            }], radiusTop: [{
+                type: Input
+            }], radiusBottom: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }] } });
+
+extend({ Mesh });
+class NgtsVolumetricMesh extends NgtsSpotLightInput {
+    initialize() {
+        super.initialize();
+        this.set({ opacity: 1, color: 'white', distance: 5, angle: 0.15, attenuation: 5, anglePower: 5 });
+    }
+    constructor() {
+        super();
+        this.mesh = injectNgtRef();
+        this.material = new SpotLightMaterial();
+        this.nullRaycast = () => null;
+        this.vec = new THREE.Vector3();
+        this.store = inject(NgtStore);
+        this.connect('normalizedRadiusTop', this.select('radiusTop').pipe(startWithUndefined(), map((radiusTop) => (radiusTop === undefined ? 0.1 : radiusTop))));
+        this.connect('normalizedRadiusBottom', combineLatest([this.select('radiusBottom').pipe(startWithUndefined()), this.select('angle')]).pipe(map(([radiusBottom, angle]) => (radiusBottom === undefined ? angle * 7 : radiusBottom))));
+        this.connect('geometry', combineLatest([
+            this.select('normalizedRadiusTop'),
+            this.select('normalizedRadiusBottom'),
+            this.select('distance'),
+        ]).pipe(map(([radiusTop, radiusBottom, distance]) => {
+            const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, distance, 128, 64, true);
+            geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, -distance / 2, 0));
+            geometry.applyMatrix4(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
+            return geometry;
+        })));
+        this.connect('cameraNear', this.store.select('camera').pipe(map((camera) => camera.near)));
+        this.connect('cameraFar', this.store.select('camera').pipe(map((camera) => camera.far)));
+        this.connect('resolution', combineLatest([
+            this.select('depthBuffer').pipe(startWithUndefined()),
+            this.store.select('size'),
+            this.store.select('viewport', 'dpr'),
+        ]).pipe(map(([depthBuffer, size, dpr]) => (depthBuffer ? [size.width * dpr, size.height * dpr] : [0, 0]))));
+        injectBeforeRender(() => {
+            this.material.uniforms['spotPosition'].value.copy(this.mesh.nativeElement.getWorldPosition(this.vec));
+            this.mesh.nativeElement.lookAt(this.mesh.nativeElement.parent.target.getWorldPosition(this.vec));
+        });
+    }
+}
+NgtsVolumetricMesh.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsVolumetricMesh, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtsVolumetricMesh.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgtsVolumetricMesh, isStandalone: true, selector: "ngts-volumetric-mesh", usesInheritance: true, ngImport: i0, template: `
+        <ngt-mesh [ref]="mesh" [geometry]="get('geometry')" [raycast]="nullRaycast">
+            <ngt-primitive *args="[material]" attach="material">
+                <ngt-value [rawValue]="get('opacity')" attach="uniforms.opacity.value" />
+                <ngt-value [rawValue]="get('color')" attach="uniforms.lightColor.value" />
+                <ngt-value [rawValue]="get('attenuation')" attach="uniforms.attenuation.value" />
+                <ngt-value [rawValue]="get('anglePower')" attach="uniforms.anglePower.value" />
+                <ngt-value [rawvalue]="get('depthBuffer')" attach="uniforms.depth.value" />
+                <ngt-value [rawvalue]="get('cameraNear')" attach="uniforms.cameraNear.value" />
+                <ngt-value [rawvalue]="get('cameraFar')" attach="uniforms.cameraFar.value" />
+                <ngt-value [rawvalue]="get('resolution')" attach="uniforms.resolution.value" />
+            </ngt-primitive>
+        </ngt-mesh>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsVolumetricMesh, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-volumetric-mesh',
+                    standalone: true,
+                    template: `
+        <ngt-mesh [ref]="mesh" [geometry]="get('geometry')" [raycast]="nullRaycast">
+            <ngt-primitive *args="[material]" attach="material">
+                <ngt-value [rawValue]="get('opacity')" attach="uniforms.opacity.value" />
+                <ngt-value [rawValue]="get('color')" attach="uniforms.lightColor.value" />
+                <ngt-value [rawValue]="get('attenuation')" attach="uniforms.attenuation.value" />
+                <ngt-value [rawValue]="get('anglePower')" attach="uniforms.anglePower.value" />
+                <ngt-value [rawvalue]="get('depthBuffer')" attach="uniforms.depth.value" />
+                <ngt-value [rawvalue]="get('cameraNear')" attach="uniforms.cameraNear.value" />
+                <ngt-value [rawvalue]="get('cameraFar')" attach="uniforms.cameraFar.value" />
+                <ngt-value [rawvalue]="get('resolution')" attach="uniforms.resolution.value" />
+            </ngt-primitive>
+        </ngt-mesh>
+    `,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+extend({ SpotLight, SpotLightHelper, Group });
+const NGTS_SPOT_LIGHT_API = new InjectionToken('NgtsSpotLight API');
+function spotLightApiFactory(spotLight) {
+    const api = {
+        spotLight: spotLight.spotLightRef,
+    };
+    Object.defineProperty(api, 'debug', {
+        get: () => spotLight.get('debug'),
+    });
+    return api;
+}
+class NgtsSpotLight extends NgtsSpotLightInput {
+    constructor() {
+        super(...arguments);
+        this.spotLightRef = injectNgtRef();
+    }
+    set volumetric(volumetric) {
+        this.set({ volumetric });
+    }
+    initialize() {
+        super.initialize();
+        this.set({
+            opacity: 1,
+            color: 'white',
+            distance: 5,
+            angle: 0.15,
+            attenuation: 5,
+            anglePower: 5,
+            volumetric: true,
+            debug: false,
+        });
+    }
+}
+NgtsSpotLight.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLight, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsSpotLight.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLight, isStandalone: true, selector: "ngts-spot-light", inputs: { spotLightRef: "spotLightRef", volumetric: "volumetric" }, providers: [{ provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] }], usesInheritance: true, ngImport: i0, template: `
+        <ngt-group>
+            <ng-container *ngIf="get('debug') && spotLightRef.nativeElement">
+                <ngt-spot-light-helper *args="[spotLightRef.nativeElement]" />
+            </ng-container>
+            <ngt-spot-light
+                [ref]="spotLightRef"
+                [color]="get('color')"
+                [distance]="get('distance')"
+                [angle]="get('angle')"
+                [castShadow]="true"
+                ngtCompound
+            >
+                <ngts-volumetric-mesh
+                    *ngIf="get('volumetric')"
+                    [debug]="get('debug')"
+                    [opacity]="get('opacity')"
+                    [radiusTop]="get('radiusTop')"
+                    [radiusBottom]="get('radiusBottom')"
+                    [depthBuffer]="get('depthBuffer')"
+                    [color]="get('color')"
+                    [distance]="get('distance')"
+                    [angle]="get('angle')"
+                    [attenuation]="get('attenuation')"
+                    [anglePower]="get('anglePower')"
+                />
+            </ngt-spot-light>
+            <ng-content />
+        </ngt-group>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "component", type: NgtsVolumetricMesh, selector: "ngts-volumetric-mesh" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLight, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-spot-light',
+                    standalone: true,
+                    template: `
+        <ngt-group>
+            <ng-container *ngIf="get('debug') && spotLightRef.nativeElement">
+                <ngt-spot-light-helper *args="[spotLightRef.nativeElement]" />
+            </ng-container>
+            <ngt-spot-light
+                [ref]="spotLightRef"
+                [color]="get('color')"
+                [distance]="get('distance')"
+                [angle]="get('angle')"
+                [castShadow]="true"
+                ngtCompound
+            >
+                <ngts-volumetric-mesh
+                    *ngIf="get('volumetric')"
+                    [debug]="get('debug')"
+                    [opacity]="get('opacity')"
+                    [radiusTop]="get('radiusTop')"
+                    [radiusBottom]="get('radiusBottom')"
+                    [depthBuffer]="get('depthBuffer')"
+                    [color]="get('color')"
+                    [distance]="get('distance')"
+                    [angle]="get('angle')"
+                    [attenuation]="get('attenuation')"
+                    [anglePower]="get('anglePower')"
+                />
+            </ngt-spot-light>
+            <ng-content />
+        </ngt-group>
+    `,
+                    imports: [NgIf, NgtArgs, NgtsVolumetricMesh],
+                    providers: [{ provide: NGTS_SPOT_LIGHT_API, useFactory: spotLightApiFactory, deps: [NgtsSpotLight] }],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { spotLightRef: [{
+                type: Input
+            }], volumetric: [{
+                type: Input
+            }] } });
+
+class NgtsSpotLightShadowMeshInput extends NgtRxStore {
+    set distance(distance) {
+        this.set({ distance });
+    }
+    set alphaTest(alphaTest) {
+        this.set({ alphaTest });
+    }
+    set scale(scale) {
+        this.set({ scale });
+    }
+    set map(map) {
+        this.set({ map });
+    }
+    set shader(shader) {
+        this.set({ shader });
+    }
+    set width(width) {
+        this.set({ width });
+    }
+    set height(height) {
+        this.set({ height });
+    }
+}
+NgtsSpotLightShadowMeshInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowMeshInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+NgtsSpotLightShadowMeshInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLightShadowMeshInput, inputs: { distance: "distance", alphaTest: "alphaTest", scale: "scale", map: "map", shader: "shader", width: "width", height: "height" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowMeshInput, decorators: [{
+            type: Directive
+        }], propDecorators: { distance: [{
+                type: Input
+            }], alphaTest: [{
+                type: Input
+            }], scale: [{
+                type: Input
+            }], map: [{
+                type: Input
+            }], shader: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
+const isSpotLight = (child) => {
+    return child === null || child === void 0 ? void 0 : child.isSpotLight;
+};
+function injectShadowMeshCommon(spotLight, mesh, width, height, distance) {
+    const pos = new THREE.Vector3();
+    const dir = new THREE.Vector3();
+    const commonEffect = (instance) => {
+        instance.hold(combineLatest([
+            spotLight.$,
+            instance.select('width').pipe(startWith(width)),
+            instance.select('height').pipe(startWith(height)),
+        ]), ([light, width, height]) => {
+            if (isSpotLight(light)) {
+                console.log('[NGTS] SpotLight instance -->', light);
+                light.shadow.mapSize.set(width, height);
+                light.shadow.needsUpdate = true;
+            }
+            else {
+                throw new Error('<ngts-spot-light-shadow> must be a child of a <ngts-spot-light>');
+            }
+        });
+    };
+    injectBeforeRender(() => {
+        if (!spotLight.nativeElement)
+            return;
+        const A = spotLight.nativeElement.position;
+        const B = spotLight.nativeElement.target.position;
+        dir.copy(B).sub(A);
+        const len = dir.length();
+        dir.normalize().multiplyScalar(len * distance);
+        pos.copy(A).add(dir);
+        mesh.nativeElement.position.copy(pos);
+        mesh.nativeElement.lookAt(spotLight.nativeElement.target.position);
+    });
+    return commonEffect;
+}
+
+extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
+class NgtsSpotLightShadowNoShader extends NgtsSpotLightShadowMeshInput {
+    constructor() {
+        super(...arguments);
+        this.mesh = injectNgtRef();
+        this.spotLightApi = inject(NGTS_SPOT_LIGHT_API);
+        this.DoubleSide = THREE.DoubleSide;
+        this.runInContext = createRunInContext();
+    }
+    initialize() {
+        super.initialize();
+        this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512 });
+        this.hold(this.select('map'), (map) => {
+            if (map) {
+                map.wrapS = map.wrapT = THREE.RepeatWrapping;
+                checkUpdate(map);
+            }
+        });
+    }
+    ngOnInit() {
+        const commonEffect = this.runInContext(() => {
+            return injectShadowMeshCommon(this.spotLightApi.spotLight, this.mesh, this.get('width'), this.get('height'), this.get('distance'));
+        });
+        commonEffect(this);
+    }
+}
+NgtsSpotLightShadowNoShader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowNoShader, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsSpotLightShadowNoShader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLightShadowNoShader, isStandalone: true, selector: "ngts-spot-light-shadow-no-shader", usesInheritance: true, ngImport: i0, template: `
+        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+            <ngt-plane-geometry />
+            <ngt-mesh-basic-material
+                [transparent]="true"
+                [side]="DoubleSide"
+                [alphaTest]="get('alphaTest')"
+                [alphaMap]="key$('map') | ngtPush"
+                [opacity]="spotLightApi.debug ? 1 : 0"
+            >
+                <ng-content />
+            </ngt-mesh-basic-material>
+        </ngt-mesh>
+    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowNoShader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-spot-light-shadow-no-shader',
+                    standalone: true,
+                    template: `
+        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+            <ngt-plane-geometry />
+            <ngt-mesh-basic-material
+                [transparent]="true"
+                [side]="DoubleSide"
+                [alphaTest]="get('alphaTest')"
+                [alphaMap]="key$('map') | ngtPush"
+                [opacity]="spotLightApi.debug ? 1 : 0"
+            >
+                <ng-content />
+            </ngt-mesh-basic-material>
+        </ngt-mesh>
+    `,
+                    imports: [NgtPush],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
+class NgtsSpotLightShadowShader extends NgtsSpotLightShadowMeshInput {
+    initialize() {
+        super.initialize();
+        this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512, scale: 1 });
+    }
+    constructor() {
+        super();
+        this.mesh = injectNgtRef();
+        this.spotLightApi = inject(NGTS_SPOT_LIGHT_API);
+        this.DoubleSide = THREE.DoubleSide;
+        this.RepeatWrapping = THREE.RepeatWrapping;
+        this.runInContext = createRunInContext();
+        this.texture$ = this.select('renderTarget', 'texture');
+        this.uniforms = {
+            uShadowMap: { value: this.get('map') },
+            uTime: { value: 0 },
+        };
+        this.connect('renderTarget', combineLatest([this.select('width'), this.select('height')]).pipe(map(([width, height]) => {
+            return new THREE.WebGLRenderTarget(width, height, {
+                format: THREE.RGBAFormat,
+                encoding: THREE.LinearEncoding,
+                stencilBuffer: false,
+                // depthTexture: null!
+            });
+        })));
+        this.connect('fsQuad', this.select('shader').pipe(map((shader) => {
+            return new FullScreenQuad(new THREE.ShaderMaterial({
+                uniforms: this.uniforms,
+                vertexShader: /* glsl */ `
+                              varying vec2 vUv;
+
+                              void main() {
+                                vUv = uv;
+                                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                              }
+                            `,
+                fragmentShader: shader,
+            }));
+        })));
+        this.hold(this.select('map'), (map) => {
+            this.uniforms.uShadowMap.value = map;
+        });
+        this.effect(this.select('fsQuad'), (fsQuad) => {
+            return () => {
+                fsQuad.dispose();
+                fsQuad.material.dispose();
+            };
+        });
+        this.effect(this.select('renderTarget'), (renderTarget) => {
+            return () => {
+                renderTarget.dispose();
+            };
+        });
+        injectBeforeRender(({ delta, gl }) => {
+            this.uniforms.uTime.value += delta;
+            const { fsQuad, renderTarget } = this.get();
+            if (fsQuad && renderTarget) {
+                gl.setRenderTarget(renderTarget);
+                fsQuad.render(gl);
+                gl.setRenderTarget(null);
+            }
+        });
+    }
+    ngOnInit() {
+        const commonEffect = this.runInContext(() => {
+            return injectShadowMeshCommon(this.spotLightApi.spotLight, this.mesh, this.get('width'), this.get('height'), this.get('distance'));
+        });
+        commonEffect(this);
+    }
+}
+NgtsSpotLightShadowShader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowShader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NgtsSpotLightShadowShader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLightShadowShader, isStandalone: true, selector: "ngts-spot-light-shadow-shader", usesInheritance: true, ngImport: i0, template: `
+        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+            <ngt-plane-geometry />
+            <ngt-mesh-basic-material
+                [transparent]="true"
+                [side]="DoubleSide"
+                [alphaTest]="get('alphaTest')"
+                [alphaMap]="texture$ | ngtPush"
+                [opacity]="spotLightApi.debug ? 1 : 0"
+            >
+                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
+                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
+                <ng-content />
+            </ngt-mesh-basic-material>
+        </ngt-mesh>
+    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadowShader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-spot-light-shadow-shader',
+                    standalone: true,
+                    template: `
+        <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
+            <ngt-plane-geometry />
+            <ngt-mesh-basic-material
+                [transparent]="true"
+                [side]="DoubleSide"
+                [alphaTest]="get('alphaTest')"
+                [alphaMap]="texture$ | ngtPush"
+                [opacity]="spotLightApi.debug ? 1 : 0"
+            >
+                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
+                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
+                <ng-content />
+            </ngt-mesh-basic-material>
+        </ngt-mesh>
+    `,
+                    imports: [NgtPush],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class NgtsSpotLightShadow extends NgtsSpotLightShadowMeshInput {
+}
+NgtsSpotLightShadow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadow, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsSpotLightShadow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgtsSpotLightShadow, isStandalone: true, selector: "ngts-spot-light-shadow", usesInheritance: true, ngImport: i0, template: `
+        <ngts-spot-light-shadow-shader
+            *ngIf="!!get('shader'); else noShader"
+            [distance]="get('distance')"
+            [shader]="get('shader')"
+            [alphaTest]="get('alphaTest')"
+            [scale]="get('scale')"
+            [map]="get('map')"
+            [width]="get('width')"
+            [height]="get('height')"
+        />
+        <ng-template #noShader>
+            <ngts-spot-light-shadow-no-shader
+                [distance]="get('distance')"
+                [alphaTest]="get('alphaTest')"
+                [scale]="get('scale')"
+                [map]="get('map')"
+                [width]="get('width')"
+                [height]="get('height')"
+            />
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtsSpotLightShadowShader, selector: "ngts-spot-light-shadow-shader" }, { kind: "component", type: NgtsSpotLightShadowNoShader, selector: "ngts-spot-light-shadow-no-shader" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgtsSpotLightShadow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-spot-light-shadow',
+                    standalone: true,
+                    template: `
+        <ngts-spot-light-shadow-shader
+            *ngIf="!!get('shader'); else noShader"
+            [distance]="get('distance')"
+            [shader]="get('shader')"
+            [alphaTest]="get('alphaTest')"
+            [scale]="get('scale')"
+            [map]="get('map')"
+            [width]="get('width')"
+            [height]="get('height')"
+        />
+        <ng-template #noShader>
+            <ngts-spot-light-shadow-no-shader
+                [distance]="get('distance')"
+                [alphaTest]="get('alphaTest')"
+                [scale]="get('scale')"
+                [map]="get('map')"
+                [width]="get('width')"
+                [height]="get('height')"
+            />
+        </ng-template>
+    `,
+                    imports: [NgtsSpotLightShadowShader, NgtsSpotLightShadowNoShader, NgIf, NgtPush],
+                }]
+        }] });
+
 const presets = {
     rembrandt: {
         main: [1, 2, 1],
@@ -2912,5 +3471,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_BOUNDS_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
+export { NGTS_BOUNDS_API, NGTS_SPOT_LIGHT_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsSpotLight, NgtsSpotLightShadow, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
 //# sourceMappingURL=angular-three-soba-staging.mjs.map