angular-three-soba 2.8.1 → 2.10.0

package/fesm2022/angular-three-soba-materials.mjs

@@ -1,13 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, viewChild, untracked, inject, DestroyRef } from '@angular/core';
-import { omit, is, pick, NgtArgs, injectBeforeRender, injectStore, applyProps, getLocalState } from 'angular-three';
+import { input, computed, effect, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, Injector, afterNextRender, Directive, viewChild, contentChild, TemplateRef, signal, untracked, DestroyRef } from '@angular/core';
+import { omit, is, pick, NgtArgs, injectBeforeRender, injectStore, getLocalState, extend, applyProps } from 'angular-three';
 import CustomShaderMaterial from 'three-custom-shader-material/vanilla';
-import { MeshDistortMaterial, BlurPass, MeshReflectorMaterial, MeshDiscardMaterial, MeshTransmissionMaterial, MeshWobbleMaterial } from 'angular-three-soba/vanilla-exports';
+import { MeshDistortMaterial, MeshPortalMaterial, meshPortalMaterialApplySDF, BlurPass, MeshReflectorMaterial, MeshDiscardMaterial, MeshTransmissionMaterial, MeshWobbleMaterial } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, FrontSide, NoToneMapping, BackSide } from 'three';
+import { NgTemplateOutlet } from '@angular/common';
+import { injectFBO, getVersion, injectIntersect } from 'angular-three-soba/misc';
+import { NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
+import { ShaderMaterial, Mesh, Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, FrontSide, NoToneMapping, BackSide } from 'three';
+import { FullScreenQuad } from 'three-stdlib';
 import { MeshRefractionMaterial, PointMaterial } from 'angular-three-soba/shaders';
 import { MeshBVHUniformStruct, MeshBVH, SAH } from 'three-mesh-bvh';
-import { injectFBO } from 'angular-three-soba/misc';
 
 class NgtsCustomShaderMaterial {
     constructor() {
@@ -72,13 +75,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-const defaultOptions$4 = {
+const defaultOptions$5 = {
     speed: 1,
 };
 class NgtsMeshDistortMaterial {
     constructor() {
         this.attach = input('material');
-        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
+        this.options = input(defaultOptions$5, { transform: mergeInputs(defaultOptions$5) });
         this.parameters = omit(this.options, ['speed']);
         this.material = new MeshDistortMaterial();
         this.speed = pick(this.options, 'speed');
@@ -109,6 +112,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * This directive is used inside of the render texture, hence has access to the render texture store (a portal store)
+ */
+class ManagePortalScene {
+    constructor() {
+        this.events = input();
+        this.rootScene = input.required();
+        this.material = input.required();
+        this.priority = input.required();
+        this.worldUnits = input.required();
+        const injector = inject(Injector);
+        const renderTextureStore = injectStore();
+        const portalScene = renderTextureStore.select('scene');
+        const portalSetEvents = renderTextureStore.select('setEvents');
+        const buffer1 = injectFBO();
+        const buffer2 = injectFBO();
+        const fullScreenQuad = computed(() => {
+            // This fullscreen-quad is used to blend the two textures
+            const blend = { value: 0 };
+            const quad = new FullScreenQuad(new ShaderMaterial({
+                uniforms: {
+                    a: { value: buffer1().texture },
+                    b: { value: buffer2().texture },
+                    blend,
+                },
+                vertexShader: /*glsl*/ `
+		      varying vec2 vUv;
+		      void main() {
+		        vUv = uv;
+		        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+		      }`,
+                fragmentShader: /*glsl*/ `
+		      uniform sampler2D a;
+		      uniform sampler2D b;
+		      uniform float blend;
+		      varying vec2 vUv;
+		      #include <packing>
+		      void main() {
+		        vec4 ta = texture2D(a, vUv);
+		        vec4 tb = texture2D(b, vUv);
+		        gl_FragColor = mix(tb, ta, blend);
+		        #include <tonemapping_fragment>
+		        #include <${getVersion() >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+		      }`,
+            }));
+            return [quad, blend];
+        });
+        effect(() => {
+            const [events, setEvents] = [this.events(), portalSetEvents()];
+            if (!events)
+                return;
+            setEvents({ enabled: events });
+        });
+        afterNextRender(() => {
+            portalScene().matrixAutoUpdate = false;
+            // we start the before render in afterNextRender because we need the priority input to be resolved
+            injectBeforeRender(({ gl, camera }) => {
+                const material = this.material();
+                const localState = getLocalState(material);
+                if (!localState)
+                    return;
+                const parent = localState.parent();
+                if (!parent)
+                    return;
+                const materialBlend = 'blend' in material && typeof material.blend === 'number' ? material.blend : 0;
+                const [worldUnits, priority, rootScene, scene, [quad, blend]] = [
+                    this.worldUnits(),
+                    this.priority(),
+                    this.rootScene(),
+                    portalScene(),
+                    fullScreenQuad(),
+                ];
+                // Move portal contents along with the parent if worldUnits is true
+                if (!worldUnits) {
+                    // If the portal renders exclusively the original scene needs to be updated
+                    if (priority && materialBlend === 1)
+                        parent.updateWorldMatrix(true, false);
+                    scene.matrixWorld.copy(parent.matrixWorld);
+                }
+                else {
+                    scene.matrixWorld.identity();
+                }
+                // This bit is only necessary if the portal is blended, now it has a render-priority
+                // and will take over the render loop
+                if (priority) {
+                    if (materialBlend > 0 && materialBlend < 1) {
+                        // If blend is ongoing (> 0 and < 1) then we need to render both the root scene
+                        // and the portal scene, both will then be mixed in the quad from above
+                        blend.value = materialBlend;
+                        gl.setRenderTarget(buffer1());
+                        gl.render(scene, camera);
+                        gl.setRenderTarget(buffer2());
+                        gl.render(rootScene, camera);
+                        gl.setRenderTarget(null);
+                        quad.render(gl);
+                    }
+                    else if (materialBlend === 1) {
+                        // However if blend is 1 we only need to render the portal scene
+                        gl.render(scene, camera);
+                    }
+                }
+            }, { injector, priority: this.priority() });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ManagePortalScene, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", type: ManagePortalScene, isStandalone: true, selector: "ngts-manage-portal-scene", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, rootScene: { classPropertyName: "rootScene", publicName: "rootScene", isSignal: true, isRequired: true, transformFunction: null }, material: { classPropertyName: "material", publicName: "material", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: true, transformFunction: null }, worldUnits: { classPropertyName: "worldUnits", publicName: "worldUnits", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ManagePortalScene, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngts-manage-portal-scene', standalone: true }]
+        }], ctorParameters: () => [] });
+const defaultOptions$4 = {
+    blend: 0.5,
+    blur: 0,
+    resolution: 512,
+    worldUnits: false,
+    eventPriority: 0,
+    renderPriority: 0,
+    events: false,
+};
+class NgtsMeshPortalMaterial {
+    constructor() {
+        this.attach = input('material');
+        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
+        this.parameters = omit(this.options, ['blur', 'resolution', 'worldUnits', 'eventPriority', 'renderPriority', 'events']);
+        this.blur = pick(this.options, 'blur');
+        this.eventPriority = pick(this.options, 'eventPriority');
+        this.renderPriority = pick(this.options, 'renderPriority');
+        this.events = pick(this.options, 'events');
+        this.worldUnits = pick(this.options, 'worldUnits');
+        this.materialRef = viewChild.required('material');
+        this.content = contentChild.required(TemplateRef);
+        this.store = injectStore();
+        this.size = this.store.select('size');
+        this.viewport = this.store.select('viewport');
+        this.gl = this.store.select('gl');
+        this.setEvents = this.store.select('setEvents');
+        this.rootScene = this.store.select('scene');
+        this.materialResolution = computed(() => [
+            this.size().width * this.viewport().dpr,
+            this.size().height * this.viewport().dpr,
+        ]);
+        this.resolution = pick(this.options, 'resolution');
+        this.parent = signal(null);
+        this.visible = injectIntersect(this.parent, { source: signal(true) });
+        this.renderTextureFrames = computed(() => (this.visible() ? Infinity : 0));
+        this.renderTextureCompute = computed(() => {
+            const [parent, material] = [this.parent(), this.materialRef().nativeElement];
+            const computeFn = (event, state) => {
+                if (!parent)
+                    return false;
+                state.snapshot.pointer.set((event.offsetX / state.snapshot.size.width) * 2 - 1, -(event.offsetY / state.snapshot.size.height) * 2 + 1);
+                state.snapshot.raycaster.setFromCamera(state.snapshot.pointer, state.snapshot.camera);
+                if ('blend' in material && material.blend === 0) {
+                    // We run a quick check against the parent, if it isn't hit there's no need to raycast at all
+                    const [intersection] = state.snapshot.raycaster.intersectObject(parent);
+                    if (!intersection) {
+                        // Cancel out the raycast camera if the parent mesh isn't hit
+                        Object.assign(state.snapshot.raycaster, { camera: undefined });
+                        return false;
+                    }
+                }
+                return;
+            };
+            return computeFn;
+        });
+        this.priority = signal(0);
+        extend({ MeshPortalMaterial });
+        afterNextRender(() => {
+            const material = this.materialRef().nativeElement;
+            const localState = getLocalState(material);
+            if (!localState)
+                return;
+            const materialParent = localState.parent();
+            if (!materialParent || !(materialParent instanceof Mesh))
+                return;
+            // Since the ref above is not tied to a mesh directly (we're inside a material),
+            // it has to be tied to the parent mesh here
+            this.parent.set(materialParent);
+        });
+        effect(() => {
+            const events = this.events();
+            if (!events)
+                return;
+            const setEvents = this.setEvents();
+            setEvents({ enabled: !events });
+        });
+        // React.useEffect(() => {
+        //   if (events !== undefined) setEvents({ enabled: !events })
+        // }, [events])
+        effect(() => {
+            const [material, parent] = [this.materialRef().nativeElement, this.parent()];
+            if (!parent)
+                return;
+            const [resolution, blur, gl] = [this.resolution(), this.blur(), this.gl()];
+            // apply the SDF mask once
+            if (blur && material.sdf == null) {
+                meshPortalMaterialApplySDF(parent, resolution, gl);
+            }
+        });
+        injectBeforeRender(() => {
+            const material = this.materialRef().nativeElement;
+            const priority = 'blend' in material && typeof material.blend === 'number' && material.blend > 0
+                ? Math.max(1, this.renderPriority())
+                : 0;
+            // If blend is > 0 then the portal is being entered, the render-priority must change
+            if (this.priority() !== priority) {
+                this.priority.set(priority);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgtsMeshPortalMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: NgtsMeshPortalMaterial, isStandalone: true, selector: "ngts-mesh-portal-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "materialRef", first: true, predicate: ["material"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh-portal-material
+			#material
+			[attach]="attach()"
+			[blur]="blur()"
+			[blend]="0"
+			[resolution]="materialResolution()"
+			[parameters]="parameters()"
+		>
+			<ngts-render-texture
+				[options]="{
+					frames: renderTextureFrames(),
+					eventPriority: eventPriority(),
+					renderPriority: renderPriority(),
+					compute: renderTextureCompute(),
+				}"
+			>
+				<ng-template renderTextureContent let-injector="injector">
+					<ng-container *ngTemplateOutlet="content(); injector: injector" />
+					<ngts-manage-portal-scene
+						[events]="events()"
+						[rootScene]="rootScene()"
+						[priority]="priority()"
+						[material]="material"
+						[worldUnits]="worldUnits()"
+					/>
+				</ng-template>
+			</ngts-render-texture>
+		</ngt-mesh-portal-material>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsRenderTexture, selector: "ngts-render-texture", inputs: ["attach", "options"] }, { kind: "directive", type: NgtsRenderTextureContent, selector: "ng-template[renderTextureContent]" }, { kind: "directive", type: ManagePortalScene, selector: "ngts-manage-portal-scene", inputs: ["events", "rootScene", "material", "priority", "worldUnits"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NgtsMeshPortalMaterial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-mesh-portal-material',
+                    standalone: true,
+                    template: `
+		<ngt-mesh-portal-material
+			#material
+			[attach]="attach()"
+			[blur]="blur()"
+			[blend]="0"
+			[resolution]="materialResolution()"
+			[parameters]="parameters()"
+		>
+			<ngts-render-texture
+				[options]="{
+					frames: renderTextureFrames(),
+					eventPriority: eventPriority(),
+					renderPriority: renderPriority(),
+					compute: renderTextureCompute(),
+				}"
+			>
+				<ng-template renderTextureContent let-injector="injector">
+					<ng-container *ngTemplateOutlet="content(); injector: injector" />
+					<ngts-manage-portal-scene
+						[events]="events()"
+						[rootScene]="rootScene()"
+						[priority]="priority()"
+						[material]="material"
+						[worldUnits]="worldUnits()"
+					/>
+				</ng-template>
+			</ngts-render-texture>
+		</ngt-mesh-portal-material>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtsRenderTexture, NgtsRenderTextureContent, ManagePortalScene, NgTemplateOutlet],
+                }]
+        }], ctorParameters: () => [] });
+
 const defaultOptions$3 = {
     mixBlur: 0,
     mixStrength: 1,
@@ -762,5 +1049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsCustomShaderMaterial, NgtsMeshDistortMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTransmissionMaterial, NgtsMeshWobbleMaterial, NgtsPointMaterial };
+export { ManagePortalScene, NgtsCustomShaderMaterial, NgtsMeshDistortMaterial, NgtsMeshPortalMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTransmissionMaterial, NgtsMeshWobbleMaterial, NgtsPointMaterial };
 //# sourceMappingURL=angular-three-soba-materials.mjs.map