lod/detailed/statsgl

nartc · nartc · commit 4c61180c6b76 · 2024-07-27T22:24:41.000-05:00
diff --git a/apps/kitchen-sink/project.json b/apps/kitchen-sink/project.json
@@ -21,8 +21,7 @@
 					}
 				],
 				"styles": ["apps/kitchen-sink/src/styles.css"],
-				"scripts": [],
-        "externalDependencies": ["three/examples/jsm/utils/BufferGeometryUtils", "three/examples/jsm/postprocessing/Pass"]
+				"scripts": []
 			},
 			"configurations": {
 				"production": {
@@ -38,6 +37,7 @@
 							"maximumError": "4kb"
 						}
 					],
+          "externalDependencies": ["three/examples/jsm/utils/BufferGeometryUtils", "three/examples/jsm/postprocessing/Pass"],
 					"outputHashing": "all"
 				},
 				"development": {
diff --git a/apps/kitchen-sink/public/bust-1-d.glb b/apps/kitchen-sink/public/bust-1-d.glb
diff --git a/apps/kitchen-sink/public/bust-2-d.glb b/apps/kitchen-sink/public/bust-2-d.glb
diff --git a/apps/kitchen-sink/public/bust-3-d.glb b/apps/kitchen-sink/public/bust-3-d.glb
diff --git a/apps/kitchen-sink/public/bust-4-d.glb b/apps/kitchen-sink/public/bust-4-d.glb
diff --git a/apps/kitchen-sink/public/bust-5-d.glb b/apps/kitchen-sink/public/bust-5-d.glb
diff --git a/apps/kitchen-sink/src/app/soba/lod/experience.ts b/apps/kitchen-sink/src/app/soba/lod/experience.ts
@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
+import { NgtEuler, NgtVector3 } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectGLTF } from 'angular-three-soba/loaders';
+import { NgtsBakeShadows } from 'angular-three-soba/misc';
+import { NgtsDetailed } from 'angular-three-soba/performances';
+import { NgtsEnvironment } from 'angular-three-soba/staging';
+import { Mesh, MeshStandardMaterial } from 'three';
+import { GLTF } from 'three-stdlib';
+
+const positions = [...Array(800)].map(() => ({
+	position: [40 - Math.random() * 80, 40 - Math.random() * 80, 40 - Math.random() * 80],
+	rotation: [Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2],
+})) as Array<{ position: [number, number, number]; rotation: [number, number, number] }>;
+
+interface BustGLTF extends GLTF {
+	nodes: { Mesh_0001: Mesh };
+	materials: { default: MeshStandardMaterial };
+}
+
+@Component({
+	selector: 'app-bust',
+	standalone: true,
+	template: `
+		<ngts-detailed [distances]="[0, 15, 25, 35, 100]" [options]="{ position: position(), rotation: rotation() }">
+			@for (level of gltfs() || []; track $index) {
+				<ngt-mesh
+					[receiveShadow]="true"
+					[castShadow]="true"
+					[geometry]="level.nodes.Mesh_0001.geometry"
+					[material]="level.materials.default"
+				>
+					<ngt-value [rawValue]="0.25" attach="material.envMapIntensity" />
+				</ngt-mesh>
+			}
+		</ngts-detailed>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsDetailed],
+})
+export class LODBust {
+	position = input<NgtVector3>([0, 0, 0]);
+	rotation = input<NgtEuler>([0, 0, 0]);
+
+	gltfs = injectGLTF(() => [
+		'./bust-1-d.glb',
+		'./bust-2-d.glb',
+		'./bust-3-d.glb',
+		'./bust-4-d.glb',
+		'./bust-5-d.glb',
+	]) as Signal<BustGLTF[] | null>;
+}
+
+@Component({
+	standalone: true,
+	template: `
+		@for (p of positions; track $index) {
+			<app-bust [position]="p.position" [rotation]="p.rotation" />
+		}
+		<ngts-orbit-controls [options]="{ autoRotate: true, autoRotateSpeed: 0.5, zoomSpeed: 0.075 }" />
+		<ngt-point-light [intensity]="0.5 * Math.PI" [decay]="0" />
+		<ngt-spot-light [position]="50" [intensity]="1.5 * Math.PI" [castShadow]="true" [decay]="0" />
+		<ngts-environment [options]="{ preset: 'city' }" />
+		<ngts-bake-shadows />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsBakeShadows, NgtsEnvironment, NgtsOrbitControls, LODBust],
+})
+export class Experience {
+	protected readonly Math = Math;
+	protected readonly positions = positions;
+}
diff --git a/apps/kitchen-sink/src/app/soba/lod/lod.ts b/apps/kitchen-sink/src/app/soba/lod/lod.ts
@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas } from 'angular-three';
+import { NgtsLoader } from 'angular-three-soba/loaders';
+import { NgtsStats } from 'angular-three-soba/stats';
+import { Experience } from './experience';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-canvas stats [sceneGraph]="scene" frameloop="demand" [camera]="{ position: [0, 0, 40] }" />
+		<ngts-loader />
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtCanvas, NgtsLoader, NgtsStats],
+})
+export default class LOD {
+	scene = Experience;
+}
diff --git a/apps/kitchen-sink/src/app/soba/shaky/shaky.ts b/apps/kitchen-sink/src/app/soba/shaky/shaky.ts
@@ -1,13 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
+import { NgtsStats } from 'angular-three-soba/stats';
 import { Experience } from './experience';
 
 @Component({
 	standalone: true,
 	template: `
-		<ngt-canvas [sceneGraph]="scene" [shadows]="true" [camera]="{ position: [0, 160, 160], fov: 20 }" [dpr]="[1, 2]" />
+		<ngt-canvas
+			[stats]="{ minimal: true }"
+			[sceneGraph]="scene"
+			[shadows]="true"
+			[camera]="{ position: [0, 160, 160], fov: 20 }"
+			[dpr]="[1, 2]"
+		/>
 	`,
-	imports: [NgtCanvas],
+	imports: [NgtCanvas, NgtsStats],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'shaky-soba' },
 	styles: `
diff --git a/apps/kitchen-sink/src/app/soba/soba.routes.ts b/apps/kitchen-sink/src/app/soba/soba.routes.ts
@@ -17,6 +17,10 @@ const routes: Routes = [
 		path: 'shaky',
 		loadComponent: () => import('./shaky/shaky'),
 	},
+	{
+		path: 'lod',
+		loadComponent: () => import('./lod/lod'),
+	},
 	{
 		path: '',
 		redirectTo: 'basic',
diff --git a/apps/kitchen-sink/src/app/soba/soba.ts b/apps/kitchen-sink/src/app/soba/soba.ts
@@ -29,5 +29,5 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 	host: { class: 'soba' },
 })
 export default class Soba {
-	examples = ['basic', 'hud', 'render-texture', 'shaky'];
+	examples = ['basic', 'hud', 'render-texture', 'shaky', 'lod'];
 }
diff --git a/libs/soba/package.json b/libs/soba/package.json
@@ -33,8 +33,7 @@
 		"camera-controls": "^2.8.0",
 		"hls.js": "^1.5.0",
 		"meshline": "^3.1.0",
-		"stats-gl": "^1.0.0",
-		"stats.js": "^0.17.0",
+		"stats-gl": "^2.0.0",
 		"three": ">=0.148.0",
 		"three-custom-shader-material": "^5.4.0",
 		"three-mesh-bvh": "^0.5.0 || ^0.6.0",
diff --git a/libs/soba/performances/src/index.ts b/libs/soba/performances/src/index.ts
@@ -1,5 +1,6 @@
 export * from './lib/adaptive-dpr';
 export * from './lib/adaptive-events';
+export * from './lib/detailed';
 export * from './lib/instances/instances';
 export * from './lib/points/points';
 export * from './lib/segments/segments';
diff --git a/libs/soba/performances/src/lib/detailed.ts b/libs/soba/performances/src/lib/detailed.ts
@@ -0,0 +1,64 @@
+import {
+	afterNextRender,
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
+	input,
+	viewChild,
+} from '@angular/core';
+import { extend, getLocalState, injectBeforeRender, NgtLOD, omit, pick } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { LOD } from 'three';
+
+export interface NgtsDetailedOptions extends Partial<NgtLOD> {
+	hysteresis: number;
+}
+
+const defaultOptions: NgtsDetailedOptions = {
+	hysteresis: 0,
+};
+
+@Component({
+	selector: 'ngts-detailed',
+	standalone: true,
+	template: `
+		<ngt-lOD #lod [parameters]="parameters()">
+			<ng-content />
+		</ngt-lOD>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgtsDetailed {
+	distances = input.required<number[]>();
+	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+	parameters = omit(this.options, ['hysteresis']);
+
+	lodRef = viewChild.required<ElementRef<LOD>>('lod');
+	private hysteresis = pick(this.options, 'hysteresis');
+
+	constructor() {
+		extend({ LOD });
+
+		const autoEffect = injectAutoEffect();
+
+		afterNextRender(() => {
+			autoEffect(() => {
+				const lod = this.lodRef().nativeElement;
+				const localState = getLocalState(lod);
+				if (!localState) return;
+				const [, distances, hysteresis] = [localState.objects(), this.distances(), this.hysteresis()];
+				lod.levels.length = 0;
+				lod.children.forEach((object, index) => {
+					lod.levels.push({ object, distance: distances[index], hysteresis });
+				});
+			});
+		});
+
+		injectBeforeRender(({ camera }) => {
+			this.lodRef().nativeElement.update(camera);
+		});
+	}
+}
diff --git a/libs/soba/src/performances/detailed.stories.ts b/libs/soba/src/performances/detailed.stories.ts
@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Meta } from '@storybook/angular';
+import { NgtArgs } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsDetailed } from 'angular-three-soba/performances';
+import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-detailed [distances]="[0, 50, 150]">
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 3]" />
+				<ngt-mesh-basic-material color="hotpink" [wireframe]="true" />
+			</ngt-mesh>
+
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 2]" />
+				<ngt-mesh-basic-material color="lightgreen" [wireframe]="true" />
+			</ngt-mesh>
+
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 1]" />
+				<ngt-mesh-basic-material color="lightblue" [wireframe]="true" />
+			</ngt-mesh>
+		</ngts-detailed>
+
+		<ngts-orbit-controls [options]="{ enablePan: false, enableRotate: false, zoomSpeed: 0.5 }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsDetailed, NgtArgs, NgtsOrbitControls],
+})
+class DefaultDetailedStory {}
+
+export default {
+	title: 'Performances/Detailed',
+	decorators: makeDecorators(),
+} as Meta;
+
+export const Default = makeStoryFunction(DefaultDetailedStory, {
+	camera: { position: [0, 0, 100] },
+	controls: false,
+});
diff --git a/libs/soba/stats/README.md b/libs/soba/stats/README.md
@@ -0,0 +1,3 @@
+# angular-three-soba/stats
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/stats`.
diff --git a/libs/soba/stats/ng-package.json b/libs/soba/stats/ng-package.json
@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}
diff --git a/libs/soba/stats/src/index.ts b/libs/soba/stats/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/stats';
diff --git a/libs/soba/stats/src/lib/stats.ts b/libs/soba/stats/src/lib/stats.ts
@@ -0,0 +1,67 @@
+import { DOCUMENT } from '@angular/common';
+import { afterNextRender, computed, Directive, ElementRef, inject, input, untracked } from '@angular/core';
+import { addAfterEffect, injectStore, omit, pick, resolveRef } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import Stats from 'stats-gl';
+
+export type NgtsStatsOptions = Partial<Stats> & {
+	showPanel?: number;
+	domClass: string;
+	parent: ElementRef<HTMLElement> | HTMLElement | null | undefined;
+};
+
+const defaultOptions: NgtsStatsOptions = {
+	domClass: '',
+	parent: null,
+};
+
+@Directive({
+	selector: 'ngt-canvas[stats]',
+	standalone: true,
+})
+export class NgtsStats {
+	options = input(defaultOptions, { transform: mergeInputs(defaultOptions), alias: 'stats' });
+
+	constructor() {
+		const statsOptions = omit(this.options, ['parent', 'domClass']);
+		const parent = pick(this.options, 'parent');
+		const domClass = pick(this.options, 'domClass');
+
+		const document = inject(DOCUMENT);
+		const autoEffect = injectAutoEffect();
+		const store = injectStore();
+		const gl = store.select('gl');
+
+		const stats = computed(() => {
+			const _gl = gl();
+			if (!_gl) return null;
+
+			const stats = new Stats({
+				...untracked(statsOptions),
+			});
+			void stats.init(_gl);
+			return stats;
+		});
+
+		afterNextRender(() => {
+			autoEffect(() => {
+				const _stats = stats();
+				if (!_stats) return;
+
+				const [_parent, _domClass] = [resolveRef(parent()), domClass()];
+				const target = _parent ?? document.body;
+				target.appendChild(_stats.dom);
+				const classList = _domClass.split(' ').filter(Boolean);
+				if (classList.length) _stats.dom.classList.add(...classList);
+				const end = addAfterEffect(() => _stats.update());
+
+				return () => {
+					if (classList.length) _stats.dom.classList.remove(...classList);
+					target.removeChild(_stats.dom);
+					end();
+				};
+			});
+		});
+	}
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -31,6 +31,7 @@
 			"angular-three-soba/performances": ["libs/soba/performances/src/index.ts"],
 			"angular-three-soba/shaders": ["libs/soba/shaders/src/index.ts"],
 			"angular-three-soba/staging": ["libs/soba/staging/src/index.ts"],
+			"angular-three-soba/stats": ["libs/soba/stats/src/index.ts"],
 			"angular-three-soba/vanilla-exports": ["libs/soba/vanilla-exports/src/index.ts"],
 			"plugin": ["libs/plugin/src/index.ts"]
 		}
