accumulative shadows (only works with useLegacyLights)

Author: nartc

libs/core/src/index.ts

@@ -18,6 +18,7 @@ export * from './lib/types';
 export * from './lib/utils/apply-props';
 export * from './lib/utils/assert-injection-context';
 export { createAttachFunction } from './lib/utils/attach';
+export * from './lib/utils/create-injection-token';
 export * from './lib/utils/is';
 export * from './lib/utils/make';
 export * from './lib/utils/safe-detect-changes';

libs/soba/shaders/src/discard-material/discard-material.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/soba/shaders/src/index.ts

@@ -1,5 +1,7 @@
+export * from './discard-material/discard-material';
 export * from './grid-material/grid-material';
 export * from './shader-material/shader-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/soft-shadow-material/soft-shadow-material.ts

@@ -0,0 +1,46 @@
+import type { NgtShaderMaterial } from 'angular-three';
+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,
+	},
+	`varying vec2 vUv;
+   void main() {
+     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+     vUv = uv;
+   }`,
+	`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 <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+   }`,
+);
+
+export type NgtSoftShadowMaterialState = {
+	map: THREE.Texture;
+	color?: THREE.ColorRepresentation;
+	alphaTest?: number;
+	blend?: number;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 *  @extends ngt-shader-material
+		 */
+		'ngt-soft-shadow-material': NgtSoftShadowMaterialState & NgtShaderMaterial;
+	}
+}

libs/soba/src/staging/accumulative-shadows.stories.ts

@@ -0,0 +1,93 @@
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, Signal } from '@angular/core';
+import { Meta } from '@storybook/angular';
+import { applyProps, NgtArgs } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsGLTFLoader, NgtsGLTF } from 'angular-three-soba/loaders';
+import { NgtsAccumulativeShadows, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture';
+import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+injectNgtsGLTFLoader.preload(
+	() => 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf',
+);
+
+type SuziGLTF = NgtsGLTF<{ materials: { default: THREE.MeshStandardMaterial } }>;
+
+@Component({
+	selector: 'accumulative-shadows-suzi',
+	standalone: true,
+	template: ` <ngt-primitive ngtCompound *args="[model()]" /> `,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class Suzi {
+	private suziGLTF = injectNgtsGLTFLoader(
+		() => 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf',
+	) as Signal<SuziGLTF>;
+	model = computed(() => {
+		const suzi = this.suziGLTF();
+		if (!suzi) return null;
+		return suzi.scene;
+	});
+
+	constructor() {
+		effect(() => {
+			const suzi = this.suziGLTF();
+			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="['goldenrod']" attach="background" />
+
+		<accumulative-shadows-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: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultAccumulativeShadowsStory {}
+
+export default {
+	title: 'Staging/Accumulative Shadows',
+	decorators: makeDecorators(),
+} as Meta;
+
+export const Default = makeStoryFunction(DefaultAccumulativeShadowsStory, {
+	compoundPrefixes: ['accumulative-shadows-suzi'],
+	// NOTE: only works with this
+	useLegacyLights: true,
+});