feat(soba): migrate spotlight

Author: Chau Tran

libs/soba/misc/src/depth-buffer/depth-buffer.ts

@@ -9,7 +9,7 @@ export interface NgtsDepthBufferParams {
 }
 
 export function injectNgtsDepthBuffer(
-    paramsFactory: () => NgtsDepthBufferParams = () => ({ size: 256, frames: Infinity }),
+    paramsFactory: () => Partial<NgtsDepthBufferParams> = () => ({}),
     { injector }: { injector?: Injector } = {}
 ) {
     injector = assertInjectionContext(injectNgtsDepthBuffer, injector);
@@ -22,8 +22,7 @@ export function injectNgtsDepthBuffer(
         const dpr = store.select('viewport', 'dpr');
 
         const fboParams = computed(() => {
-            const params = paramsFactory();
-
+            const params = { size: 256, frames: Infinity, ...paramsFactory() };
             const width = params.size || size().width * dpr();
             const height = params.size || size().height * dpr();
             const depthTexture = new THREE.DepthTexture(width, height);
@@ -36,7 +35,7 @@ export function injectNgtsDepthBuffer(
 
         let count = 0;
         injectBeforeRender(({ gl, scene, camera }) => {
-            const params = paramsFactory();
+            const params = { size: 256, frames: Infinity, ...paramsFactory() };
             if ((params.frames === Infinity || count < params.frames) && fboRef.untracked) {
                 gl.setRenderTarget(fboRef.untracked);
                 gl.render(scene, camera);

libs/soba/shaders/src/index.ts

@@ -1,2 +1,3 @@
 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/spot-light-material/spot-light-material.ts

@@ -0,0 +1,86 @@
+import { Color, ShaderMaterial, Vector2, Vector3 } from 'three';
+
+export class SpotLightMaterial extends ShaderMaterial {
+    constructor() {
+        super({
+            uniforms: {
+                depth: { value: null },
+                opacity: { value: 1 },
+                attenuation: { value: 2.5 },
+                anglePower: { value: 12 },
+                spotPosition: { value: new Vector3(0, 0, 0) },
+                lightColor: { value: new Color('white') },
+                cameraNear: { value: 0 },
+                cameraFar: { value: 1 },
+                resolution: { value: new Vector2(0, 0) },
+            },
+            transparent: true,
+            depthWrite: false,
+            vertexShader: /* glsl */ `
+      varying vec3 vNormal;
+      varying vec3 vWorldPosition;
+      varying float vViewZ;
+      varying float vIntensity;
+      uniform vec3 spotPosition;
+      uniform float attenuation;
+
+      void main() {
+        // compute intensity
+        vNormal = normalize( normalMatrix * normal );
+        vec4 worldPosition	= modelMatrix * vec4( position, 1.0 );
+        vWorldPosition = worldPosition.xyz;
+        vec4 viewPosition = viewMatrix * worldPosition;
+        vViewZ = viewPosition.z;
+        float intensity	= distance(worldPosition.xyz, spotPosition) / attenuation;
+        intensity	= 1.0 - clamp(intensity, 0.0, 1.0);
+        vIntensity = intensity;
+        // set gl_Position
+        gl_Position	= projectionMatrix * viewPosition;
+
+      }`,
+            fragmentShader: /* glsl */ `
+      #include <packing>
+
+      varying vec3 vNormal;
+      varying vec3 vWorldPosition;
+      uniform vec3 lightColor;
+      uniform vec3 spotPosition;
+      uniform float attenuation;
+      uniform float anglePower;
+      uniform sampler2D depth;
+      uniform vec2 resolution;
+      uniform float cameraNear;
+      uniform float cameraFar;
+      varying float vViewZ;
+      varying float vIntensity;
+      uniform float opacity;
+
+      float readDepth( sampler2D depthSampler, vec2 coord ) {
+        float fragCoordZ = texture2D( depthSampler, coord ).x;
+        float viewZ = perspectiveDepthToViewZ(fragCoordZ, cameraNear, cameraFar);
+        return viewZ;
+      }
+
+      void main() {
+        float d = 1.0;
+        bool isSoft = resolution[0] > 0.0 && resolution[1] > 0.0;
+        if (isSoft) {
+          vec2 sUv = gl_FragCoord.xy / resolution;
+          d = readDepth(depth, sUv);
+        }
+        float intensity = vIntensity;
+        vec3 normal	= vec3(vNormal.x, vNormal.y, abs(vNormal.z));
+        float angleIntensity	= pow( dot(normal, vec3(0.0, 0.0, 1.0)), anglePower );
+        intensity	*= angleIntensity;
+        // fades when z is close to sampled depth, meaning the cone is intersecting existing geometry
+        if (isSoft) {
+          intensity	*= smoothstep(0., 1., vViewZ - d);
+        }
+        gl_FragColor = vec4(lightColor, intensity * opacity);
+
+        #include <tonemapping_fragment>
+	      #include <encodings_fragment>
+      }`,
+        });
+    }
+}

libs/soba/src/setup-canvas.ts

@@ -172,11 +172,11 @@ export class StorybookSetup implements OnInit {
             this.#envInjector
         );
         this.#ref = this.anchor.createComponent(NgtCanvas, { environmentInjector: this.#refEnvInjector });
-        this.#ref.setInput('sceneGraph', StorybookScene);
         this.#ref.setInput('shadows', true);
         this.#ref.setInput('performance', this.options.performance);
         this.#ref.setInput('camera', this.options.camera);
         this.#ref.setInput('compoundPrefixes', this.options.compoundPrefixes);
+        this.#ref.setInput('sceneGraph', StorybookScene);
         safeDetectChanges(this.#ref.changeDetectorRef);
     }
 }

libs/soba/src/staging/spot-light.stories.ts

@@ -0,0 +1,186 @@
+import { NgIf } from '@angular/common';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, effect, Input, signal } from '@angular/core';
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { checkUpdate, NgtArgs } from 'angular-three';
+import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import { injectNgtsDepthBuffer } from 'angular-three-soba/misc';
+import { NgtsSpotLight, NgtsSpotLightShadow } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { makeStoryObject, number, StorybookSetup } from '../setup-canvas';
+
+injectNgtsTextureLoader.preload(() => '/soba/textures/other/leaves.jpg');
+
+@Component({
+    standalone: true,
+    template: `
+        <ngts-orbit-controls
+            [makeDefault]="true"
+            [autoRotate]="true"
+            [autoRotateSpeed]="0.5"
+            [minDistance]="2"
+            [maxDistance]="10"
+        />
+        <ngts-perspective-camera [near]="0.01" [far]="50" [position]="[1, 3, 1]" [makeDefault]="true" [fov]="60" />
+        <!-- <ngts-environment preset="sunset" /> -->
+
+        <ngt-hemisphere-light *args="['#ffffbb', '#080820', 1]" />
+
+        <ngt-mesh *ngIf="textures() as textures" [rotation]="[-Math.PI / 2, 0, 0]" [receiveShadow]="true">
+            <ngt-circle-geometry *args="[5, 64, 64]" />
+            <ngt-mesh-standard-material
+                [map]="textures.diffuse"
+                [normalMap]="textures.normal"
+                [roughnessMap]="textures.roughness"
+                [aoMap]="textures.ao"
+                [envMapIntensity]="0.2"
+            />
+        </ngt-mesh>
+
+        <ngts-spot-light
+            [distance]="20"
+            [intensity]="5"
+            [angle]="MathUtils.degToRad(45)"
+            [color]="'#fadcb9'"
+            [position]="[5, 7, -2]"
+            [volumetric]="false"
+            [debug]="debug"
+        >
+            <ngts-spot-light-shadow
+                [scale]="4"
+                [distance]="0.4"
+                [width]="2048"
+                [height]="2048"
+                [map]="leaf()"
+                [shader]="wind ? shader : null"
+            />
+        </ngts-spot-light>
+    `,
+    imports: [
+        NgtsSpotLight,
+        NgtsSpotLightShadow,
+        NgIf,
+        NgtArgs,
+        NgtsOrbitControls,
+        NgtsPerspectiveCamera,
+        // NgtsEnvironment,
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class ShadowsSpotLightStory {
+    @Input() debug = false;
+    @Input() wind = false;
+
+    readonly Math = Math;
+    readonly MathUtils = THREE.MathUtils;
+
+    readonly shader = /* glsl */ `
+            varying vec2 vUv;
+            uniform sampler2D uShadowMap;
+            uniform float uTime;
+            void main() {
+              // material.repeat.set(2.5) - Since repeat is a shader feature not texture
+              // we need to implement it manually
+              vec2 uv = mod(vUv, 0.4) * 2.5;
+              // Fake wind distortion
+              uv.x += sin(uv.y * 10.0 + uTime * 0.5) * 0.02;
+              uv.y += sin(uv.x * 10.0 + uTime * 0.5) * 0.02;
+              vec3 color = texture2D(uShadowMap, uv).xyz;
+              gl_FragColor = vec4(color, 1.);
+            }
+          `;
+
+    readonly textures = injectNgtsTextureLoader(() => ({
+        diffuse: '/soba/textures/grassy_cobble/grassy_cobblestone_diff_2k.jpg',
+        normal: '/soba/textures/grassy_cobble/grassy_cobblestone_nor_gl_2k.jpg',
+        roughness: '/soba/textures/grassy_cobble/grassy_cobblestone_rough_2k.jpg',
+        ao: '/soba/textures/grassy_cobble/grassy_cobblestone_ao_2k.jpg',
+    }));
+
+    readonly leaf = injectNgtsTextureLoader(() => '/soba/textures/other/leaves.jpg');
+
+    constructor() {
+        effect(() => {
+            const textures = this.textures();
+            if (!textures) return;
+            for (const texture of Object.values(textures)) {
+                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+                texture.repeat.set(2, 2);
+                checkUpdate(texture);
+            }
+        });
+    }
+}
+
+@Component({
+    standalone: true,
+    template: `
+        <ng-container *ngIf="depthBuffer.nativeElement">
+            <ngts-spot-light
+                [penumbra]="0.5"
+                [depthBuffer]="depthBuffer.nativeElement"
+                [position]="[3, 2, 0]"
+                [intensity]="0.5"
+                [angle]="0.5"
+                [color]="'#ff005b'"
+                [castShadow]="true"
+                [debug]="debug"
+                [volumetric]="volumetric"
+            />
+
+            <ngts-spot-light
+                [penumbra]="0.5"
+                [depthBuffer]="depthBuffer.nativeElement"
+                [position]="[-3, 2, 0]"
+                [intensity]="0.5"
+                [angle]="0.5"
+                [color]="'#0eec82'"
+                [castShadow]="true"
+                [debug]="debug"
+                [volumetric]="volumetric"
+            />
+        </ng-container>
+
+        <ngt-mesh [position]="[0, 0.5, 0]" [castShadow]="true">
+            <ngt-box-geometry />
+            <ngt-mesh-phong-material />
+        </ngt-mesh>
+
+        <ngt-mesh [receiveShadow]="true" [rotation]="[-Math.PI / 2, 0, 0]">
+            <ngt-plane-geometry *args="[100, 100]" />
+            <ngt-mesh-phong-material />
+        </ngt-mesh>
+    `,
+    imports: [NgtsSpotLight, NgIf, NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultSpotLightStory {
+    readonly Math = Math;
+
+    readonly #size = signal(256);
+    @Input() set size(size: number) {
+        this.#size.set(size);
+    }
+
+    @Input() debug = false;
+    @Input() volumetric = true;
+
+    depthBuffer = injectNgtsDepthBuffer(() => ({ size: this.#size() }));
+}
+
+export default {
+    title: 'Staging/SpotLight',
+    decorators: [moduleMetadata({ imports: [StorybookSetup] })],
+} as Meta;
+
+export const Default = makeStoryObject(DefaultSpotLightStory, {
+    canvasOptions: { lights: false },
+    argsOptions: { size: number(256), debug: false, volumetric: true },
+});
+
+// TODO: shadows doesn't seem to work due to some racing condition with map
+export const Shadows = makeStoryObject(ShadowsSpotLightStory, {
+    canvasOptions: { lights: false },
+    argsOptions: { wind: true, debug: false },
+});

libs/soba/staging/src/index.ts

@@ -4,4 +4,6 @@ export * from './contact-shadows/contact-shadows';
 export * from './float/float';
 export * from './sky/sky';
 export * from './sparkles/sparkles';
+export * from './spot-light/spot-light';
+export { NgtsSpotLightShadow } from './spot-light/spot-light-shadow-mesh';
 export * from './stars/stars';

libs/soba/staging/src/spot-light/spot-light-input.ts

@@ -0,0 +1,69 @@
+import { Directive, Input } from '@angular/core';
+import { NgtSignalStore } from 'angular-three';
+
+export interface NgtsSpotLightInputState {
+    depthBuffer?: THREE.DepthTexture;
+    angle: number;
+    distance: number;
+    attenuation: number;
+    anglePower: number;
+    radiusTop: number;
+    radiusBottom: number;
+    opacity: number;
+    color: string | number;
+    debug: boolean;
+}
+
+@Directive()
+export abstract class NgtsSpotLightInput extends NgtSignalStore<NgtsSpotLightInputState> {
+    @Input() set depthBuffer(depthBuffer: THREE.DepthTexture) {
+        this.set({ depthBuffer });
+    }
+
+    @Input() set angle(angle: number) {
+        this.set({ angle });
+    }
+
+    @Input() set distance(distance: number) {
+        this.set({ distance });
+    }
+
+    @Input() set attenuation(attenuation: number) {
+        this.set({ attenuation });
+    }
+
+    @Input() set anglePower(anglePower: number) {
+        this.set({ anglePower });
+    }
+
+    @Input() set radiusTop(radiusTop: number) {
+        this.set({ radiusTop });
+    }
+
+    @Input() set radiusBottom(radiusBottom: number) {
+        this.set({ radiusBottom });
+    }
+
+    @Input() set opacity(opacity: number) {
+        this.set({ opacity });
+    }
+
+    @Input() set color(color: string | number) {
+        this.set({ color });
+    }
+
+    @Input() set debug(debug: boolean) {
+        this.set({ debug });
+    }
+
+    readonly lightDebug = this.select('debug');
+    readonly lightColor = this.select('color');
+    readonly lightOpacity = this.select('opacity');
+    readonly lightRadiusBottom = this.select('radiusBottom');
+    readonly lightRadiusTop = this.select('radiusTop');
+    readonly lightAnglePower = this.select('anglePower');
+    readonly lightAttenuation = this.select('attenuation');
+    readonly lightDistance = this.select('distance');
+    readonly lightAngle = this.select('angle');
+    readonly lightDepthBuffer = this.select('depthBuffer');
+}