backdrop

nartc · nartc · commit 52cf03141b15 · 2023-08-10T22:07:06.000-05:00
diff --git a/libs/soba/abstractions/src/edges/edges.ts b/libs/soba/abstractions/src/edges/edges.ts
@@ -1,7 +1,7 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Input, TemplateRef, effect } from '@angular/core';
 import { extend, injectNgtRef, signalStore, type NgtAnyRecord, type NgtLineSegments } from 'angular-three';
-import { NgtsSobaContent } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import * as THREE from 'three';
 import { LineBasicMaterial, LineSegments } from 'three';
 
diff --git a/libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts b/libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts
@@ -41,7 +41,7 @@ declare global {
 			/>
 		</ngt-orthographic-camera>
 		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef(), group }" />
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
 		</ngt-group>
 	`,
 	imports: [NgIf, NgTemplateOutlet],
diff --git a/libs/soba/misc/src/animations/animations.ts b/libs/soba/misc/src/animations/animations.ts
@@ -25,6 +25,7 @@ export function injectNgtsAnimations(
 		const mixer = new THREE.AnimationMixer(null!);
 		const actions = {} as Record<string, THREE.AnimationAction>;
 		let cached = {} as Record<string, THREE.AnimationAction>;
+		let object: THREE.Object3D | null = null;
 
 		const clips = [] as THREE.AnimationClip[];
 		const names = [] as string[];
@@ -34,10 +35,12 @@ export function injectNgtsAnimations(
 			cached = {};
 			// uncache actions
 			Object.values(actions).forEach((action) => {
-				mixer.uncacheAction(action as unknown as THREE.AnimationClip, actualRef.untracked);
+				mixer.uncacheAction(action as unknown as THREE.AnimationClip, object!);
 			});
 			// stop all actions
 			mixer.stopAllAction();
+
+			object = null;
 		});
 
 		injectBeforeRender(({ delta }) => mixer.update(delta));
@@ -47,6 +50,7 @@ export function injectNgtsAnimations(
 		effect(() => {
 			const actual = actualRef.nativeElement;
 			if (!actual) return;
+			object = actual;
 			const animations = animationsFactory();
 
 			for (let i = 0; i < animations.length; i++) {
diff --git a/libs/soba/misc/src/caustics/caustics.ts b/libs/soba/misc/src/caustics/caustics.ts
@@ -2,11 +2,12 @@ import { NgIf } from '@angular/common';
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, Input } from '@angular/core';
 import { extend, injectNgtRef, injectNgtStore, NgtGroup, signalStore } from 'angular-three';
 import { NgtsEdges } from 'angular-three-soba/abstractions';
-import { injectNgtsFBO, NgtsSobaContent } from 'angular-three-soba/misc';
 import { CausticsMaterial, CausticsProjectionMaterial } from 'angular-three-soba/shaders';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import * as THREE from 'three';
 import { Group, LineBasicMaterial, Mesh, OrthographicCamera, PlaneGeometry, Scene } from 'three';
 import { FullScreenQuad } from 'three-stdlib';
+import { injectNgtsFBO } from '../fbo/fbo';
 
 extend({ Group, Scene, Mesh, PlaneGeometry, OrthographicCamera, CausticsProjectionMaterial, LineBasicMaterial });
 
diff --git a/libs/soba/misc/src/html/html.ts b/libs/soba/misc/src/html/html.ts
@@ -20,9 +20,9 @@ import {
 	type NgtRef,
 	type NgtVector3,
 } from 'angular-three';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import * as THREE from 'three';
 import { Group, Mesh, PlaneGeometry, ShaderMaterial } from 'three';
-import { NgtsSobaContent } from '../content/content';
 import { NgtsHtmlWrapper, defaultCalculatePosition } from './html-wrapper';
 
 extend({ Group, PlaneGeometry, Mesh, ShaderMaterial });
diff --git a/libs/soba/misc/src/index.ts b/libs/soba/misc/src/index.ts
@@ -1,7 +1,6 @@
 export * from './animations/animations';
 export * from './bake-shadows/bake-shadows';
 export * from './caustics/caustics';
-export * from './content/content';
 export * from './decal/decal';
 export * from './depth-buffer/depth-buffer';
 export * from './example/example';
diff --git a/libs/soba/performances/src/points/points-input.ts b/libs/soba/performances/src/points/points-input.ts
@@ -1,4 +1,4 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, computed } from '@angular/core';
 import { injectNgtRef, signalStore } from 'angular-three';
 import type { Points } from 'three';
 
@@ -53,6 +53,8 @@ export abstract class NgtsPointsInput {
 	range = this.inputs.select('range');
 	positions = this.inputs.select('positions');
 	colors = this.inputs.select('colors');
+	colorsLength = computed(() => this.colors()?.length || 0);
 	sizes = this.inputs.select('sizes');
+	sizesLength = computed(() => this.sizes()?.length || 0);
 	stride = this.inputs.select('stride');
 }
diff --git a/libs/soba/performances/src/points/points.ts b/libs/soba/performances/src/points/points.ts
@@ -27,7 +27,7 @@ import {
 	type NgtPoints,
 	type NgtRef,
 } from 'angular-three';
-import { NgtsSobaContent } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import * as THREE from 'three';
 import { BufferAttribute, BufferGeometry, Points } from 'three';
 import { NgtsPointsInput, type NgtsPointsBuffersState, type NgtsPointsInstancesState } from './points-input';
@@ -240,14 +240,14 @@ export class NgtsPoint implements OnInit {
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.color"
-					[count]="pointsInput.colors().length / pointsInput.stride()"
+					[count]="pointsInput.colorsLength() / pointsInput.stride()"
 					[array]="pointsInput.colors()"
 					[itemSize]="pointsInput.stride()"
 					[usage]="DynamicDrawUsage"
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.size"
-					[count]="pointsInput.sizes().length / pointsInput.stride()"
+					[count]="pointsInput.sizesLength() / pointsInput.stride()"
 					[array]="pointsInput.sizes()"
 					[itemSize]="1"
 					[usage]="DynamicDrawUsage"
diff --git a/libs/soba/project.json b/libs/soba/project.json
@@ -70,7 +70,9 @@
 					"libs/soba/materials/**/*.ts",
 					"libs/soba/materials/**/*.html",
 					"libs/soba/modifiers/**/*.ts",
-					"libs/soba/modifiers/**/*.html"
+					"libs/soba/modifiers/**/*.html",
+					"libs/soba/utils/**/*.ts",
+					"libs/soba/utils/**/*.html"
 				]
 			}
 		},
diff --git a/libs/soba/src/misc/html.stories.ts b/libs/soba/src/misc/html.stories.ts
@@ -1,6 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
 import { NgtArgs, injectNgtRef } from 'angular-three';
-import { NgtsHtml, NgtsSobaContent } from 'angular-three-soba/misc';
+import { NgtsHtml } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import { Mesh } from 'three';
 import { makeDecorators, makeStoryFunction, makeStoryObject, turn } from '../setup-canvas';
 
diff --git a/libs/soba/src/performances/points.stories.ts b/libs/soba/src/performances/points.stories.ts
@@ -7,7 +7,7 @@ import * as THREE from 'three';
 import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
 
 import { NgFor } from '@angular/common';
-import { NgtsSobaContent } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import * as buffer from 'maath/buffer';
 import * as misc from 'maath/misc';
 
diff --git a/libs/soba/src/setup-canvas.ts b/libs/soba/src/setup-canvas.ts
@@ -80,7 +80,11 @@ const STORY_INPUTS = new InjectionToken<Signal<Record<string, unknown>>>('story
 
 		<ng-container *ngIf="canvasOptions.lights">
 			<ngt-ambient-light [intensity]="canvasOptions.useLegacyLights ? 0.8 : 0.8 * Math.PI" />
-			<ngt-point-light [intensity]="canvasOptions.useLegacyLights ? 1 : Math.PI" [position]="[0, 6, 0]" />
+			<ngt-point-light
+				[intensity]="canvasOptions.useLegacyLights ? 1 : Math.PI"
+				[position]="[0, 6, 0]"
+				[castShadow]="true"
+			/>
 		</ng-container>
 
 		<ng-container *ngIf="canvasOptions.controls">
diff --git a/libs/soba/src/staging/backdrop.stories.ts b/libs/soba/src/staging/backdrop.stories.ts
@@ -0,0 +1,63 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, computed } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
+import { injectNgtsAnimations } from 'angular-three-soba/misc';
+import { NgtsBackdrop, NgtsEnvironment } from 'angular-three-soba/staging';
+import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+@Component({
+	selector: 'backdrop-robot',
+	standalone: true,
+	template: `<ngt-primitive ngtCompound *args="[robot()]" [ref]="animations.ref" />`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class Robot {
+	private robotGltf = injectNgtsGLTFLoader(() => 'soba/assets/RobotExpressive.glb');
+	robot = computed(() => {
+		const robotGltf = this.robotGltf();
+		if (!robotGltf) return null;
+
+		robotGltf.scene.traverse((child) => {
+			if (child.type === 'Mesh') {
+				child.receiveShadow = child.castShadow = true;
+			}
+		});
+
+		return robotGltf.scene;
+	});
+
+	animations = injectNgtsAnimations(() => this.robotGltf()?.animations || []);
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-group [position]="[0, -0.25, 0]">
+			<backdrop-robot [scale]="0.2" [position]="[0, -0.5, 0]" />
+			<ngts-backdrop [receiveShadow]="true" [scale]="[20, 5, 5]" [floor]="1.5" [position]="[0, -0.5, -2]">
+				<ngt-mesh-physical-material [roughness]="1" color="#efefef" />
+			</ngts-backdrop>
+		</ngt-group>
+		<ngts-orbit-controls [makeDefault]="true" [dampingFactor]="0.2" />
+		<ngts-environment preset="warehouse" [background]="true" />
+	`,
+	imports: [NgtsBackdrop, Robot, NgtsOrbitControls, NgtsEnvironment, NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultBackdropStory {}
+
+export default {
+	title: 'Staging/Backdrop',
+	decorators: makeDecorators(),
+};
+
+const canvasOptions = makeCanvasOptions({
+	camera: { position: [-1, 2, 4], fov: 35 },
+	controls: false,
+	compoundPrefixes: ['backdrop-robot'],
+	useLegacyLights: true,
+});
+
+export const Default = makeStoryFunction(DefaultBackdropStory, canvasOptions);
diff --git a/libs/soba/staging/src/backdrop/backdrop.ts b/libs/soba/staging/src/backdrop/backdrop.ts
@@ -0,0 +1,84 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, effect } from '@angular/core';
+import { NgtArgs, checkUpdate, extend, injectNgtRef, signalStore, type NgtGroup } from 'angular-three';
+import { Group, Mesh, PlaneGeometry, type BufferAttribute } from 'three';
+
+const easeInExpo = (x: number) => (x === 0 ? 0 : Math.pow(2, 10 * x - 10));
+
+export type NgtsBackdropState = {
+	floor: number;
+	segments: number;
+	receiveShadow: boolean;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-group
+		 */
+		'ngts-backdrop': NgtsBackdropState & NgtGroup;
+	}
+}
+
+extend({ Group, Mesh, PlaneGeometry });
+
+@Component({
+	selector: 'ngts-backdrop',
+	standalone: true,
+	template: `
+		<ngt-group ngtCompound>
+			<ngt-mesh [receiveShadow]="receiveShadow()" [rotation]="[-Math.PI / 2, 0, Math.PI / 2]">
+				<ngt-plane-geometry [ref]="planeRef" *args="[1, 1, segments(), segments()]" />
+				<ng-content />
+			</ngt-mesh>
+		</ngt-group>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsBackdrop {
+	Math = Math;
+
+	private inputs = signalStore<NgtsBackdropState>({ floor: 0.25, segments: 20, receiveShadow: false });
+
+	@Input({ alias: 'floor' }) set _floor(floor: number) {
+		this.inputs.set({ floor });
+	}
+
+	@Input({ alias: 'segments' }) set _segments(segments: number) {
+		this.inputs.set({ segments });
+	}
+
+	@Input({ alias: 'receiveShadow' }) set _receiveShadow(receiveShadow: boolean) {
+		this.inputs.set({ receiveShadow });
+	}
+
+	private floor = this.inputs.select('floor');
+
+	planeRef = injectNgtRef<PlaneGeometry>();
+	segments = this.inputs.select('segments');
+	receiveShadow = this.inputs.select('receiveShadow');
+
+	constructor() {
+		effect(() => {
+			const plane = this.planeRef.nativeElement;
+			if (!plane) return;
+			const [segments, floor] = [this.segments(), this.floor()];
+			const offset = segments / segments / 2;
+			const position = plane.attributes['position'] as BufferAttribute;
+			let i = 0;
+			for (let x = 0; x < segments + 1; x++) {
+				for (let y = 0; y < segments + 1; y++) {
+					position.setXYZ(
+						i++,
+						x / segments - offset + (x === 0 ? -floor : 0),
+						y / segments - offset,
+						easeInExpo(x / segments),
+					);
+				}
+			}
+
+			checkUpdate(position);
+			plane.computeVertexNormals();
+		});
+	}
+}
diff --git a/libs/soba/staging/src/environment/environment.ts b/libs/soba/staging/src/environment/environment.ts
@@ -1,6 +1,6 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, TemplateRef } from '@angular/core';
-import { NgtsSobaContent } from 'angular-three-soba/misc';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
 import { NgtsEnvironmentCube } from './environment-cube';
 import { NgtsEnvironmentGround } from './environment-ground';
 import { NgtsEnvironmentInput } from './environment-input';
diff --git a/libs/soba/staging/src/index.ts b/libs/soba/staging/src/index.ts
@@ -1,5 +1,6 @@
 export * from './accumulative-shadows/accumulative-shadows';
 export * from './accumulative-shadows/randomized-lights';
+export * from './backdrop/backdrop';
 export * from './bounds/bounds';
 export * from './camera-shake/camera-shake';
 export * from './center/center';
diff --git a/libs/soba/staging/src/stage/stage.ts b/libs/soba/staging/src/stage/stage.ts
@@ -89,7 +89,7 @@ export class NgtsStageRefit implements OnChanges {
 	boundsApi = injectNgtsBoundsApi();
 
 	@Input() radius = 0;
-	@Input() adjustCamera = true;
+	@Input() adjustCamera: boolean | number = true;
 
 	ngOnChanges() {
 		if (this.adjustCamera) {
@@ -157,16 +157,16 @@ export class NgtsStageRefit implements OnChanges {
 				[scale]="boundingState.get('radius') * 4"
 				[far]="boundingState.get('radius')"
 				[blur]="2"
-				[opacity]="shadowsState().opacity"
-				[width]="shadowsState().width"
-				[height]="shadowsState().height"
-				[smooth]="shadowsState().smooth"
-				[resolution]="shadowsState().resolution"
-				[frames]="shadowsState().frames"
-				[scale]="shadowsState().scale"
-				[color]="shadowsState().color"
-				[depthWrite]="shadowsState().depthWrite"
-				[renderOrder]="shadowsState().renderOrder"
+				[opacity]="shadowsState().opacity!"
+				[width]="shadowsState().width!"
+				[height]="shadowsState().height!"
+				[smooth]="shadowsState().smooth!"
+				[resolution]="shadowsState().resolution!"
+				[frames]="shadowsState().frames!"
+				[scale]="shadowsState().scale!"
+				[color]="shadowsState().color!"
+				[depthWrite]="shadowsState().depthWrite!"
+				[renderOrder]="shadowsState().renderOrder!"
 			/>
 			<ngts-accumulative-shadows
 				*ngIf="shadowsState().accumulativeShadow"
@@ -175,11 +175,11 @@ export class NgtsStageRefit implements OnChanges {
 				[alphaTest]="0.9"
 				[toneMapped]="true"
 				[scale]="boundingState.get('radius') * 4"
-				[opacity]="shadowsState().opacity"
-				[alphaTest]="shadowsState().alphaTest"
-				[color]="shadowsState().color"
-				[colorBlend]="shadowsState().colorBlend"
-				[resolution]="shadowsState().resolution"
+				[opacity]="shadowsState().opacity!"
+				[alphaTest]="shadowsState().alphaTest!"
+				[color]="shadowsState().color!"
+				[colorBlend]="shadowsState().colorBlend!"
+				[resolution]="shadowsState().resolution!"
 			>
 				<ngts-randomized-lights
 					[amount]="shadowsState().amount ?? 8"
diff --git a/libs/soba/staging/src/stars/stars.ts b/libs/soba/staging/src/stars/stars.ts
@@ -31,7 +31,7 @@ const genStar = (r: number) =>
 	selector: 'ngts-stars',
 	standalone: true,
 	template: `
-		<ngt-points [ref]="pointsRef">
+		<ngt-points [ref]="starsRef">
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute attach="attributes.position" *args="[attributes().positions, 3]" />
 				<ngt-buffer-attribute attach="attributes.color" *args="[attributes().colors, 3]" />
diff --git a/libs/soba/utils/README.md b/libs/soba/utils/README.md
@@ -0,0 +1,3 @@
+# angular-three-soba/utils
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/utils`.
diff --git a/libs/soba/utils/ng-package.json b/libs/soba/utils/ng-package.json
@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}
diff --git a/libs/soba/utils/src/content/content.ts b/libs/soba/utils/src/content/content.ts
diff --git a/libs/soba/utils/src/index.ts b/libs/soba/utils/src/index.ts
diff --git a/nx.json b/nx.json
diff --git a/tools/scripts/generate-soba-json.mjs b/tools/scripts/generate-soba-json.mjs
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,9 @@`
`70`	`70`	`"libs/soba/materials/*/.ts",`
`71`	`71`	`"libs/soba/materials/*/.html",`
`72`	`72`	`"libs/soba/modifiers/*/.ts",`
`73`		`- "libs/soba/modifiers/*/.html"`
	`73`	`+ "libs/soba/modifiers/*/.html",`
	`74`	`+ "libs/soba/utils/*/.ts",`
	`75`	`+ "libs/soba/utils/*/.html"`
`74`	`76`	`]`
`75`	`77`	`}`
`76`	`78`	`},`