angular-three-soba 1.10.0 → 1.11.0

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

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, TemplateRef, ContentChild, ChangeDetectorRef } from '@angular/core';
+import { InjectionToken, inject, Directive, Component, CUSTOM_ELEMENTS_SCHEMA, Input, EventEmitter, Output, ChangeDetectorRef, TemplateRef, ContentChild } from '@angular/core';
 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 { DiscardMaterial, shaderMaterial, CausticsProjectionMaterial, CausticsMaterial, SpotLightMaterial } from 'angular-three-soba/shaders';
+import { Subject, combineLatest, switchMap, map, isObservable, of, debounceTime, 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, 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 { Group, Mesh, PlaneGeometry, DirectionalLight, OrthographicCamera, Vector2, Scene, LineBasicMaterial, 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, FullScreenQuad, HorizontalBlurShader, VerticalBlurShader, RGBELoader, GroundProjectedEnv, Sky } from 'three-stdlib';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgtsEdges, NgtsBillboard } from 'angular-three-soba/abstractions';
+import { injectNgtsFBO } from 'angular-three-soba/misc';
 import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
 
 function isLight(object) {
@@ -16,7 +17,6 @@ function isLight(object) {
 function isGeometry(object) {
     return !!object.geometry;
 }
-const DiscardMaterial = shaderMaterial({}, 'void main() { gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }', 'void main() { discard; }');
 class ProgressiveLightMap {
     constructor(renderer, scene, res = 1024) {
         this.renderer = renderer;
@@ -972,6 +972,359 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Input
             }] } });
 
+extend({ Group, Scene, Mesh, PlaneGeometry, OrthographicCamera, CausticsProjectionMaterial, LineBasicMaterial });
+const NORMALPROPS = {
+    depth: true,
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    encoding: THREE.LinearEncoding,
+    type: THREE.UnsignedByteType,
+};
+const CAUSTICPROPS = {
+    minFilter: THREE.LinearMipmapLinearFilter,
+    magFilter: THREE.LinearFilter,
+    encoding: THREE.LinearEncoding,
+    format: THREE.RGBAFormat,
+    type: THREE.FloatType,
+    generateMipmaps: true,
+};
+function createNormalMaterial(side = THREE.FrontSide) {
+    const viewMatrix = { value: new THREE.Matrix4() };
+    return Object.assign(new THREE.MeshNormalMaterial({ side }), {
+        viewMatrix,
+        onBeforeCompile: (shader) => {
+            shader.uniforms.viewMatrix = viewMatrix;
+            shader.fragmentShader =
+                `vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {
+           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );
+         }\n` +
+                    shader.fragmentShader.replace('#include <normal_fragment_maps>', `#include <normal_fragment_maps>
+           normal = inverseTransformDirection( normal, viewMatrix );\n`);
+        },
+    });
+}
+class NgtsCaustics extends NgtRxStore {
+    constructor() {
+        super(...arguments);
+        this.CustomBlending = THREE.CustomBlending;
+        this.OneFactor = THREE.OneFactor;
+        this.SrcAlphaFactor = THREE.SrcAlphaFactor;
+        this.Math = Math;
+        this.planeRef = injectNgtRef();
+        this.sceneRef = injectNgtRef();
+        this.cameraRef = injectNgtRef();
+        this.causticsRef = injectNgtRef();
+        this.normalTargetFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: NORMALPROPS }))));
+        this.normalTargetBFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: NORMALPROPS }))));
+        this.causticsTargetFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: CAUSTICPROPS }))));
+        this.causticsTargetBFbo = injectNgtsFBO(() => this.select('resolution').pipe(map((resolution) => ({ width: resolution, height: resolution, settings: CAUSTICPROPS }))));
+        this.store = inject(NgtStore);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    /** How many frames it will render, set it to Infinity for runtime, default: 1 */
+    set frames(frames) {
+        this.set({ frames });
+    }
+    /** Enables visual cues to help you stage your scene, default: false */
+    set debug(debug) {
+        this.set({ debug });
+    }
+    /** Will display caustics only and skip the models, default: false */
+    set causticsOnly(causticsOnly) {
+        this.set({ causticsOnly });
+    }
+    /** Will include back faces and enable the backsideIOR prop, default: false */
+    set backside(backside) {
+        this.set({ backside });
+    }
+    /** The IOR refraction index, default: 1.1 */
+    set ior(ior) {
+        this.set({ ior });
+    }
+    /** The IOR refraction index for back faces (only available when backside is enabled), default: 1.1 */
+    set backsideIOR(backsideIOR) {
+        this.set({ backsideIOR });
+    }
+    /** The texel size, default: 0.3125 */
+    set worldRadius(worldRadius) {
+        this.set({ worldRadius });
+    }
+    /** Intensity of the prjected caustics, default: 0.05 */
+    set intensity(intensity) {
+        this.set({ intensity });
+    }
+    /** Caustics color, default: white */
+    set color(color) {
+        this.set({ color });
+    }
+    /** Buffer resolution, default: 2048 */
+    set resolution(resolution) {
+        this.set({ resolution });
+    }
+    /** Camera position, it will point towards the contents bounds center, default: [5, 5, 5] */
+    set lightSource(lightSource) {
+        this.set({ lightSource });
+    }
+    initialize() {
+        this.set({
+            frames: 1,
+            ior: 1.1,
+            color: 'white',
+            causticsOnly: false,
+            backside: false,
+            backsideIOR: 1.1,
+            worldRadius: 0.3125,
+            intensity: 0.05,
+            resolution: 2024,
+            lightSource: [5, 5, 5],
+        });
+    }
+    ngOnInit() {
+        this.updateWorldMatrix();
+        this.setBeforeRender();
+    }
+    updateWorldMatrix() {
+        this.hold(combineLatest([this.sceneRef.children$(), this.causticsRef.$, this.causticsRef.children$(), this.select()]), () => {
+            if (this.causticsRef.nativeElement) {
+                this.causticsRef.nativeElement.updateWorldMatrix(false, true);
+            }
+        });
+    }
+    setBeforeRender() {
+        const causticsMaterial = new CausticsMaterial();
+        const causticsQuad = new FullScreenQuad(causticsMaterial);
+        const normalMaterial = createNormalMaterial();
+        const normalMaterialB = createNormalMaterial(THREE.BackSide);
+        this.effect(combineLatest([
+            this.sceneRef.$,
+            this.sceneRef.children$('both'),
+            this.causticsRef.$,
+            this.cameraRef.$,
+            this.planeRef.$,
+            this.planeRef.children$('both'),
+            this.normalTargetFbo.$,
+            this.normalTargetBFbo.$,
+            this.causticsTargetFbo.$,
+            this.causticsTargetBFbo.$,
+        ]), ([scene, children, caustics, camera, plane, , normalTarget, normalTargetB, causticsTarget, causticsTargetB,]) => {
+            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) {
+                return this.store.get('internal').subscribe(({ gl }) => {
+                    const { frames, lightSource, resolution, worldRadius, intensity, backside, backsideIOR, ior, causticsOnly, debug, } = this.get();
+                    if (frames === Infinity || count++ < frames) {
+                        if (Array.isArray(lightSource))
+                            lightDir.fromArray(lightSource).normalize();
+                        else
+                            lightDir.copy(caustics.worldToLocal(lightSource.nativeElement.getWorldPosition(v)).normalize());
+                        lightDirInv.copy(lightDir).multiplyScalar(-1);
+                        let boundsVertices = [];
+                        scene.parent?.matrixWorld.identity();
+                        bounds.setFromObject(scene, true);
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.max.z));
+                        const worldVerts = boundsVertices.map((v) => v.clone());
+                        bounds.getCenter(focusPos);
+                        boundsVertices = boundsVertices.map((v) => v.clone().sub(focusPos));
+                        const lightPlane = lpP.set(lightDirInv, 0);
+                        const projectedVerts = boundsVertices.map((v) => lightPlane.projectPoint(v, new THREE.Vector3()));
+                        const centralVert = projectedVerts
+                            .reduce((a, b) => a.add(b), v.set(0, 0, 0))
+                            .divideScalar(projectedVerts.length);
+                        const radius = projectedVerts
+                            .map((v) => v.distanceTo(centralVert))
+                            .reduce((a, b) => Math.max(a, b));
+                        const dirLength = boundsVertices
+                            .map((x) => x.dot(lightDir))
+                            .reduce((a, b) => Math.max(a, b));
+                        // Shadows
+                        camera.position.copy(lightDir.clone().multiplyScalar(dirLength).add(focusPos));
+                        camera.lookAt(scene.localToWorld(focusPos.clone()));
+                        const dirMatrix = lpM.lookAt(camera.position, focusPos, v.set(0, 1, 0));
+                        camera.left = -radius;
+                        camera.right = radius;
+                        camera.top = radius;
+                        camera.bottom = -radius;
+                        const yOffset = v.set(0, radius, 0).applyMatrix4(dirMatrix);
+                        const yTime = (camera.position.y + yOffset.y) / lightDir.y;
+                        camera.near = 0.1;
+                        camera.far = yTime;
+                        camera.updateProjectionMatrix();
+                        camera.updateMatrixWorld();
+                        // Now find size of ground plane
+                        const groundProjectedCoords = worldVerts.map((v) => v.add(lightDir.clone().multiplyScalar(-v.y / lightDir.y)));
+                        const centerPos = groundProjectedCoords
+                            .reduce((a, b) => a.add(b), v.set(0, 0, 0))
+                            .divideScalar(groundProjectedCoords.length);
+                        const maxSize = 2 *
+                            groundProjectedCoords
+                                .map((v) => Math.hypot(v.x - centerPos.x, v.z - centerPos.z))
+                                .reduce((a, b) => Math.max(a, b));
+                        plane.scale.setScalar(maxSize);
+                        plane.position.copy(centerPos);
+                        // if (debug) helper.current?.update();
+                        // Inject uniforms
+                        normalMaterialB.viewMatrix.value = normalMaterial.viewMatrix.value =
+                            camera.matrixWorldInverse;
+                        const dirLightNearPlane = lpF.setFromProjectionMatrix(lpM.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)).planes[4];
+                        causticsMaterial.cameraMatrixWorld = camera.matrixWorld;
+                        causticsMaterial.cameraProjectionMatrixInv = camera.projectionMatrixInverse;
+                        causticsMaterial.lightDir = lightDirInv;
+                        causticsMaterial.lightPlaneNormal = dirLightNearPlane.normal;
+                        causticsMaterial.lightPlaneConstant = dirLightNearPlane.constant;
+                        causticsMaterial.near = camera.near;
+                        causticsMaterial.far = camera.far;
+                        causticsMaterial.resolution = resolution;
+                        causticsMaterial.size = radius;
+                        causticsMaterial.intensity = intensity;
+                        causticsMaterial.worldRadius = worldRadius;
+                        // Switch the scene on
+                        scene.visible = true;
+                        // Render front face normals
+                        gl.setRenderTarget(normalTarget);
+                        gl.clear();
+                        scene.overrideMaterial = normalMaterial;
+                        gl.render(scene, camera);
+                        // Render back face normals, if enabled
+                        gl.setRenderTarget(normalTargetB);
+                        gl.clear();
+                        if (backside) {
+                            scene.overrideMaterial = normalMaterialB;
+                            gl.render(scene, camera);
+                        }
+                        // Remove the override material
+                        scene.overrideMaterial = null;
+                        // Render front face caustics
+                        causticsMaterial.ior = ior;
+                        // @ts-ignore
+                        plane.material.lightProjMatrix = camera.projectionMatrix;
+                        // @ts-ignore
+                        plane.material.lightViewMatrix = camera.matrixWorldInverse;
+                        causticsMaterial.normalTexture = normalTarget.texture;
+                        causticsMaterial.depthTexture = normalTarget.depthTexture;
+                        gl.setRenderTarget(causticsTarget);
+                        gl.clear();
+                        causticsQuad.render(gl);
+                        // Render back face caustics, if enabled
+                        causticsMaterial.ior = backsideIOR;
+                        causticsMaterial.normalTexture = normalTargetB.texture;
+                        causticsMaterial.depthTexture = normalTargetB.depthTexture;
+                        gl.setRenderTarget(causticsTargetB);
+                        gl.clear();
+                        if (backside)
+                            causticsQuad.render(gl);
+                        // Reset render target
+                        gl.setRenderTarget(null);
+                        // Switch the scene off if caustics is all that's wanted
+                        if (causticsOnly)
+                            scene.visible = false;
+                    }
+                });
+            }
+        });
+    }
+}
+NgtsCaustics.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtsCaustics, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsCaustics.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtsCaustics, isStandalone: true, selector: "ngts-caustics", inputs: { causticsRef: "causticsRef", frames: "frames", debug: "debug", causticsOnly: "causticsOnly", backside: "backside", ior: "ior", backsideIOR: "backsideIOR", worldRadius: "worldRadius", intensity: "intensity", color: "color", resolution: "resolution", lightSource: "lightSource" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-group [ref]="causticsRef" ngtCompound>
+            <ngt-scene [ref]="sceneRef">
+                <ngt-orthographic-camera [ref]="cameraRef" [up]="[0, 1, 0]" />
+                <ng-content />
+            </ngt-scene>
+            <ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
+                <ngt-plane-geometry />
+                <ngt-caustics-projection-material
+                    *ngIf="causticsTargetFbo.nativeElement && causticsTargetBFbo.nativeElement"
+                    [transparent]="true"
+                    [color]="get('color')"
+                    [causticsTexture]="causticsTargetFbo.nativeElement.texture"
+                    [causticsTextureB]="causticsTargetBFbo.nativeElement.texture"
+                    [blending]="CustomBlending"
+                    [blendSrc]="OneFactor"
+                    [blendDst]="SrcAlphaFactor"
+                    [depthWrite]="false"
+                />
+
+                <ngts-edges *ngIf="get('debug')" [withChildren]="true">
+                    <ngt-line-basic-material color="#ffff00" [toneMapped]="false" />
+                </ngts-edges>
+            </ngt-mesh>
+        </ngt-group>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsEdges, selector: "ngts-edges", inputs: ["edgesRef", "threshold", "color", "geometry", "userData", "withChildren"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtsCaustics, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-caustics',
+                    standalone: true,
+                    template: `
+        <ngt-group [ref]="causticsRef" ngtCompound>
+            <ngt-scene [ref]="sceneRef">
+                <ngt-orthographic-camera [ref]="cameraRef" [up]="[0, 1, 0]" />
+                <ng-content />
+            </ngt-scene>
+            <ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
+                <ngt-plane-geometry />
+                <ngt-caustics-projection-material
+                    *ngIf="causticsTargetFbo.nativeElement && causticsTargetBFbo.nativeElement"
+                    [transparent]="true"
+                    [color]="get('color')"
+                    [causticsTexture]="causticsTargetFbo.nativeElement.texture"
+                    [causticsTextureB]="causticsTargetBFbo.nativeElement.texture"
+                    [blending]="CustomBlending"
+                    [blendSrc]="OneFactor"
+                    [blendDst]="SrcAlphaFactor"
+                    [depthWrite]="false"
+                />
+
+                <ngts-edges *ngIf="get('debug')" [withChildren]="true">
+                    <ngt-line-basic-material color="#ffff00" [toneMapped]="false" />
+                </ngts-edges>
+            </ngt-mesh>
+        </ngt-group>
+    `,
+                    imports: [NgIf, NgtsEdges],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { causticsRef: [{
+                type: Input
+            }], frames: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], causticsOnly: [{
+                type: Input
+            }], backside: [{
+                type: Input
+            }], ior: [{
+                type: Input
+            }], backsideIOR: [{
+                type: Input
+            }], worldRadius: [{
+                type: Input
+            }], intensity: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], resolution: [{
+                type: Input
+            }], lightSource: [{
+                type: Input
+            }] } });
+
 extend({ Group });
 class NgtsCenter extends NgtRxStore {
     constructor() {
@@ -3485,5 +3838,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { NGTS_BOUNDS_API, NGTS_SPOT_LIGHT_API, NgtsAccumulativeShadows, NgtsBounds, NgtsCameraShake, NgtsCaustics, NgtsCenter, NgtsCloud, NgtsContactShadows, NgtsEnvironment, NgtsEnvironmentContent, NgtsFloat, NgtsRandomizedLights, NgtsSky, NgtsSparkles, NgtsSpotLight, NgtsSpotLightShadow, NgtsStage, NgtsStageRefit, NgtsStars, calcPosFromAngles, ngtsEnvironmentPresetsObj };
 //# sourceMappingURL=angular-three-soba-staging.mjs.map