feat(soba): migrate accumulative shadows

Author: Chau Tran

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "eslint.validate": ["json"]
+    "eslint.validate": ["json"],
+    "html.customData": ["node_modules/angular-three/metadata.json"]   
 }

libs/angular-three/metadata.json

@@ -90,9 +90,11 @@ export function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): NgtI
                 currentInstance[key].type === THREE.UnsignedByteType
             ) {
                 const texture = currentInstance[key] as THREE.Texture;
-                if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
-                    texture.colorSpace = rootState.gl.outputColorSpace;
-                else texture.encoding = rootState.gl.outputEncoding;
+                if (rootState?.gl) {
+                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                        texture.colorSpace = rootState.gl.outputColorSpace;
+                    else texture.encoding = rootState.gl.outputEncoding;
+                }
             }
         }
 

libs/angular-three/src/lib/utils/apply-props.ts

@@ -0,0 +1,7 @@
+import { shaderMaterial } from '../shader-material/shader-material';
+
+export const DiscardMaterial = shaderMaterial(
+    {},
+    'void main() { }',
+    'void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); discard;  }'
+);

libs/angular-three/web-types.json

@@ -1,3 +1,5 @@
+export * from './discard-material/discard-material';
+export * from './soft-shadow-material/soft-shadow-material';
 export * from './sparkles-material/sparkles-material';
 export * from './spot-light-material/spot-light-material';
 export * from './star-field-material/star-field-material';

libs/soba/shaders/src/discard-material/discard-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 opacity;
+uniform float alphaTest;
+uniform float blend;
+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 interface SoftShadowMaterialInputs {
+    map: THREE.Texture;
+    color?: THREE.ColorRepresentation;
+    alphaTest?: number;
+    blend?: number;
+}

libs/soba/shaders/src/index.ts

@@ -0,0 +1,92 @@
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, NO_ERRORS_SCHEMA, Signal } from '@angular/core';
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { applyProps, NgtArgs } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
+import { NgtsAccumulativeShadows, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { GLTF } from 'three-stdlib';
+import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture';
+import { makeStoryFunction, StorybookSetup } from '../setup-canvas';
+
+injectNgtsGLTFLoader.preload(
+    () => 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/suzanne-high-poly/model.gltf'
+);
+
+interface SuziGLTF extends GLTF {
+    materials: { default: THREE.MeshStandardMaterial };
+}
+
+@Component({
+    selector: 'Suzi',
+    standalone: true,
+    template: ` <ngt-primitive ngtCompound *args="[model()]" /> `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class Suzi {
+    readonly #suzi = injectNgtsGLTFLoader(
+        () => 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/suzanne-high-poly/model.gltf'
+    ) as unknown as Signal<SuziGLTF>;
+    readonly model = computed(() => {
+        const suzi = this.#suzi();
+        if (!suzi) return null;
+        return suzi.scene;
+    });
+
+    constructor() {
+        effect(() => {
+            const suzi = this.#suzi();
+            if (!suzi) return;
+            const { scene, materials } = suzi;
+            scene.traverse((obj: any) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true));
+            applyProps(materials.default, {
+                color: 'orange',
+                roughness: 0,
+                normalMap: new THREE.CanvasTexture(
+                    new FlakesTexture(),
+                    THREE.UVMapping,
+                    THREE.RepeatWrapping,
+                    THREE.RepeatWrapping
+                ),
+                normalScale: [0.05, 0.05],
+            });
+            applyProps(materials.default.normalMap, {
+                flipY: false,
+                repeat: [40, 40],
+            });
+        });
+    }
+}
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-color *args="['chocolate']" attach="background" />
+
+        <Suzi [rotation]="[-0.63, 0, 0]" [scale]="2" [position]="[0, -1.175, 0]" />
+        <ngts-accumulative-shadows
+            color="goldenrod"
+            [temporal]="true"
+            [frames]="100"
+            [alphaTest]="0.65"
+            [opacity]="2"
+            [scale]="14"
+            [position]="[0, -0.5, 0]"
+        >
+            <ngts-randomized-lights [amount]="8" [radius]="4" [ambient]="0.5" [bias]="0.001" [position]="[5, 5, -10]" />
+        </ngts-accumulative-shadows>
+        <ngts-orbit-controls [autoRotate]="true" />
+        <ngts-environment preset="city" />
+    `,
+    imports: [NgtsAccumulativeShadows, NgtsRandomizedLights, NgtsOrbitControls, NgtsEnvironment, NgtArgs, Suzi],
+    schemas: [NO_ERRORS_SCHEMA],
+})
+class DefaultAccumulativeShadowsStory {}
+
+export default {
+    title: 'Staging/Accumulative Shadows',
+    decorators: [moduleMetadata({ imports: [StorybookSetup] })],
+} as Meta;
+
+export const Default = makeStoryFunction(DefaultAccumulativeShadowsStory, { compoundPrefixes: ['Suzi'] });

libs/soba/shaders/src/soft-shadow-material/soft-shadow-material.ts

@@ -58,11 +58,11 @@ class Models {
 
     onClick(event: NgtThreeEvent<MouseEvent>) {
         event.stopPropagation();
-        event.delta <= 2 && this.#boundsApi.refresh(event.object).fit();
+        event.delta <= 2 && this.#boundsApi().refresh(event.object).fit();
     }
 
     onPointerMissed(event: NgtThreeEvent<PointerEvent>) {
-        (event as NgtAnyRecord)['button'] === 0 && this.#boundsApi.refresh().fit();
+        (event as NgtAnyRecord)['button'] === 0 && this.#boundsApi().refresh().fit();
     }
 }