stats gl

Author: nartc

libs/soba/misc/src/index.ts

@@ -7,3 +7,4 @@ export * from './fbo/fbo';
 export * from './html/html';
 export * from './sampler/sampler';
 export * from './shadow/shadow';
+export * from './stats-gl/stats-gl';

libs/soba/misc/src/stats-gl/stats-gl.ts

@@ -0,0 +1,59 @@
+import { DOCUMENT } from '@angular/common';
+import { Directive, Input, computed, effect, inject } from '@angular/core';
+import { NgtRef, addAfterEffect, addEffect, injectNgtStore, is, signalStore } from 'angular-three';
+import Stats from 'stats-gl';
+
+export type NgtsStatsGLState = {
+	parent?: NgtRef<HTMLElement>;
+	containerClass?: string;
+	config?: ConstructorParameters<typeof Stats>[0];
+};
+
+@Directive({ selector: 'ngts-stats-gl', standalone: true })
+export class NgtsStatsGL {
+	private inputs = signalStore<NgtsStatsGLState>();
+
+	@Input({ alias: 'parent' }) set _parent(parent: NgtRef<HTMLElement>) {
+		this.inputs.set({ parent });
+	}
+
+	@Input({ alias: 'containerClass' }) set _containerClass(containerClass: string) {
+		this.inputs.set({ containerClass });
+	}
+
+	@Input({ alias: 'config' }) set _config(config: NgtsStatsGLState['config']) {
+		this.inputs.set({ config });
+	}
+
+	private document = inject(DOCUMENT);
+	private store = injectNgtStore();
+	private gl = this.store.select('gl');
+
+	private config = this.inputs.select('config');
+	private parent = this.inputs.select('parent');
+	private containerClass = this.inputs.select('containerClass');
+
+	private stats = computed(() => {
+		const [config, gl] = [this.config() || {}, this.gl()];
+		const stats = new Stats(config);
+		stats.init(gl.domElement);
+		return stats;
+	});
+
+	constructor() {
+		effect((onCleanup) => {
+			const [parent, stats, containerClass] = [this.parent(), this.stats(), this.containerClass()];
+			const node = parent ? (is.ref(parent) ? parent.nativeElement : parent) : this.document.body;
+			node.appendChild(stats.container);
+			if (containerClass) stats.container.classList.add(...containerClass.split(' ').filter(Boolean));
+
+			const begin = addEffect(() => stats.begin());
+			const end = addAfterEffect(() => stats.end());
+			onCleanup(() => {
+				node.removeChild(stats.container);
+				begin();
+				end();
+			});
+		});
+	}
+}

libs/soba/package.json

@@ -31,6 +31,7 @@
 		"angular-three": "^2.0.0",
 		"three": ">=0.148.0",
 		"stats.js": "^0.17.0",
+		"stats-gl": "^1.0.0",
 		"three-mesh-bvh": "^0.5.0 || ^0.6.0",
 		"three-stdlib": "^2.0.0",
 		"troika-three-text": "^0.47.0"

libs/soba/src/misc/stats-gl.stories.ts

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtsStatsGL } from 'angular-three-soba/misc';
+import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-axes-helper />
+		<ngts-stats-gl />
+	`,
+	imports: [NgtsStatsGL],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultStatsGLStory {}
+
+export default {
+	title: 'Misc/StatsGL',
+	decorators: makeDecorators(),
+};
+
+export const Default = makeStoryFunction(DefaultStatsGLStory);

package.json

@@ -103,6 +103,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"rxjs": "~7.8.1",
+		"stats-gl": "^1.0.4",
 		"three-mesh-bvh": "^0.6.3",
 		"three-stdlib": "^2.24.1",
 		"troika-three-text": "^0.47.2",