sparkles

Author: nartc

libs/core/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/before-render';
 export * from './lib/canvas';
 export * from './lib/directives/args';
+export * from './lib/directives/key';
 export * from './lib/directives/parent';
 export * from './lib/directives/repeat';
 export { type NgtCamera } from './lib/events';

libs/core/src/lib/directives/args.ts

@@ -1,7 +1,7 @@
 import { Directive, Input } from '@angular/core';
 import { NgtCommonDirective } from './common';
 
-@Directive({ selector: '[args]', standalone: true })
+@Directive({ selector: 'ng-template[args]', standalone: true })
 export class NgtArgs<TArgs extends any[] = any[]> extends NgtCommonDirective {
 	private injectedArgs: TArgs = [] as unknown as TArgs;
 

libs/core/src/lib/directives/common.ts

@@ -1,4 +1,12 @@
-import { Directive, NgZone, TemplateRef, ViewContainerRef, inject, type EmbeddedViewRef } from '@angular/core';
+import {
+	DestroyRef,
+	Directive,
+	NgZone,
+	TemplateRef,
+	ViewContainerRef,
+	inject,
+	type EmbeddedViewRef,
+} from '@angular/core';
 import { SPECIAL_INTERNAL_ADD_COMMENT } from '../renderer/constants';
 import { safeDetectChanges } from '../utils/safe-detect-changes';
 
@@ -18,6 +26,10 @@ export abstract class NgtCommonDirective {
 			commentNode[SPECIAL_INTERNAL_ADD_COMMENT]();
 			delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
 		}
+
+		inject(DestroyRef).onDestroy(() => {
+			this.view?.destroy();
+		});
 	}
 
 	abstract validate(): boolean;

libs/core/src/lib/directives/key.ts

@@ -0,0 +1,45 @@
+import {
+	DestroyRef,
+	Directive,
+	Input,
+	NgZone,
+	TemplateRef,
+	ViewContainerRef,
+	inject,
+	type EmbeddedViewRef,
+} from '@angular/core';
+import { safeDetectChanges } from '../utils/safe-detect-changes';
+
+@Directive({ selector: 'ng-template[key]', standalone: true })
+export class NgtKey {
+	private vcr = inject(ViewContainerRef);
+	private templateRef = inject(TemplateRef);
+	private zone = inject(NgZone);
+
+	private lastKey = '';
+	private viewRef?: EmbeddedViewRef<unknown>;
+
+	@Input() set key(key: string) {
+		if (this.lastKey !== key) {
+			this.createView();
+			this.lastKey = key;
+		}
+	}
+
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			this.viewRef?.destroy();
+		});
+	}
+
+	private createView() {
+		if (!this.viewRef?.destroyed) {
+			this.viewRef?.destroy();
+		}
+
+		this.zone.runOutsideAngular(() => {
+			this.viewRef = this.vcr.createEmbeddedView(this.templateRef);
+			safeDetectChanges(this.viewRef);
+		});
+	}
+}

libs/core/src/lib/directives/parent.ts

@@ -2,7 +2,7 @@ import { Directive, Input } from '@angular/core';
 import type { NgtInjectedRef } from '../ref';
 import { NgtCommonDirective } from './common';
 
-@Directive({ selector: '[parent]', standalone: true })
+@Directive({ selector: 'ng-template[parent]', standalone: true })
 export class NgtParent extends NgtCommonDirective {
 	private injectedParent: string | THREE.Object3D | NgtInjectedRef<THREE.Object3D> = null!;
 

libs/soba/abstractions/src/grid/grid.ts

@@ -1,6 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
 import { NgtArgs, extend, injectBeforeRender, injectNgtRef, signalStore, type NgtMesh } from 'angular-three';
-import { GridMaterial, type NgtsGridMaterialState } from 'angular-three-soba/shaders';
+import { GridMaterial, type NgtGridMaterialState } from 'angular-three-soba/shaders';
 import * as THREE from 'three';
 import { Mesh, PlaneGeometry } from 'three';
 
@@ -9,7 +9,7 @@ extend({ GridMaterial, Mesh, PlaneGeometry });
 export type NgtsGridState = {
 	/** Default plane-geometry arguments */
 	args?: ConstructorParameters<typeof THREE.PlaneGeometry>;
-} & NgtsGridMaterialState;
+} & NgtGridMaterialState;
 
 declare global {
 	interface HTMLElementTagNameMap {

libs/soba/shaders/src/grid-material/grid-material.ts

@@ -79,7 +79,7 @@ export const GridMaterial = shaderMaterial(
   `,
 );
 
-export type NgtsGridMaterialState = {
+export type NgtGridMaterialState = {
 	/** Cell size, default: 0.5 */
 	cellSize?: number;
 	/** Cell thickness, default: 0.5 */
@@ -109,6 +109,6 @@ declare global {
 		/**
 		 * @extends ngt-shader-material
 		 */
-		'ngt-grid-material': NgtsGridMaterialState & NgtShaderMaterial;
+		'ngt-grid-material': NgtGridMaterialState & NgtShaderMaterial;
 	}
 }

libs/soba/shaders/src/index.ts

@@ -1,2 +1,3 @@
 export * from './grid-material/grid-material';
 export * from './shader-material/shader-material';
+export * from './sparkles-material/sparkles-material';

libs/soba/shaders/src/sparkles-material/sparkles-material.ts

@@ -0,0 +1,52 @@
+import type { NgtShaderMaterial } from 'angular-three';
+import * as THREE from 'three';
+import { shaderMaterial } from '../shader-material/shader-material';
+
+export const SparklesMaterial = shaderMaterial(
+	{ time: 0, pixelRatio: 1 },
+	` uniform float pixelRatio;
+    uniform float time;
+    attribute float size;
+    attribute float speed;
+    attribute float opacity;
+    attribute vec3 noise;
+    attribute vec3 color;
+    varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+      vec4 viewPosition = viewMatrix * modelPosition;
+      vec4 projectionPostion = projectionMatrix * viewPosition;
+      gl_Position = projectionPostion;
+      gl_PointSize = size * 25. * pixelRatio;
+      gl_PointSize *= (1.0 / - viewPosition.z);
+      vColor = color;
+      vOpacity = opacity;
+    }`,
+	` varying vec3 vColor;
+    varying float vOpacity;
+    void main() {
+      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+      float strength = 0.05 / distanceToCenter - 0.1;
+      gl_FragColor = vec4(vColor, strength * vOpacity);
+      #include <tonemapping_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    }`,
+);
+
+export type NgtSparklesMaterialState = {
+	time?: number;
+	pixelRatio?: number;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-shader-material
+		 */
+		'ngt-sparkles-material': NgtSparklesMaterialState & NgtShaderMaterial;
+	}
+}

libs/soba/src/staging/sparkles.stories.ts

@@ -0,0 +1,66 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, computed, signal } from '@angular/core';
+import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsSparkles } from 'angular-three-soba/staging';
+import { makeDecorators, makeStoryObject, number } from '../setup-canvas';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-sparkles
+			color="orange"
+			[size]="sizes()"
+			[count]="_amount()"
+			[opacity]="opacity"
+			[speed]="speed"
+			[noise]="noise"
+		/>
+		<ngts-orbit-controls />
+		<ngt-axes-helper />
+		<ngts-perspective-camera [position]="[2, 2, 2]" [makeDefault]="true" />
+	`,
+	imports: [NgtsSparkles, NgtsOrbitControls, NgtsPerspectiveCamera],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultSparklesStory {
+	@Input() opacity = 1;
+	@Input() speed = 0.3;
+	@Input() noise = 1;
+
+	private _random = signal(true);
+	@Input() set random(random: boolean) {
+		this._random.set(random);
+	}
+
+	private _size = signal(5);
+	@Input() set size(size: number) {
+		this._size.set(size);
+	}
+
+	_amount = signal(100);
+	@Input() set amount(amount: number) {
+		this._amount.set(amount);
+	}
+
+	sizes = computed(() => {
+		if (this._random())
+			return new Float32Array(Array.from({ length: this._amount() }, () => Math.random() * this._size()));
+		return this._size();
+	});
+}
+
+export default {
+	title: 'Staging/Sparkles',
+	decorators: makeDecorators(),
+};
+export const Default = makeStoryObject(DefaultSparklesStory, {
+	canvasOptions: { camera: { position: [1, 1, 1] }, controls: false },
+	argsOptions: {
+		random: true,
+		amount: number(100, { range: true, max: 500, step: 1 }),
+		size: number(5, { range: true, min: 0, max: 10, step: 1 }),
+		noise: number(1, { range: true, min: 0, max: 1, step: 0.01 }),
+		speed: number(0.3, { range: true, min: 0, max: 20, step: 0.1 }),
+		opacity: number(1, { range: true, min: 0, max: 1, step: 0.01 }),
+	},
+});