points

Author: nartc

libs/core/src/lib/renderer/index.ts

@@ -296,7 +296,10 @@ class NgtRenderer implements Renderer2 {
 				(pRS[NgtRendererClassId.type] === 'compound' && !pRS[NgtRendererClassId.compounded])) &&
 				(cRS[NgtRendererClassId.type] === 'dom' ||
 					(cRS[NgtRendererClassId.type] === 'compound' && !cRS[NgtRendererClassId.compounded]))) ||
-			(pRS[NgtRendererClassId.type] === 'dom' &&
+			// or the parent is a non-compounded compound
+			// and the child is a compounded compound
+			((pRS[NgtRendererClassId.type] === 'dom' ||
+				(pRS[NgtRendererClassId.type] === 'compound' && !pRS[NgtRendererClassId.compounded])) &&
 				cRS[NgtRendererClassId.type] === 'compound' &&
 				!!cRS[NgtRendererClassId.compounded]);
 

libs/soba/materials/README.md

@@ -0,0 +1,3 @@
+# angular-three-soba/materials
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/materials`.

libs/soba/materials/ng-package.json

@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

libs/soba/materials/src/index.ts

@@ -0,0 +1 @@
+export * from './point-material/point-material';

libs/soba/materials/src/point-material/point-material.ts

@@ -0,0 +1,57 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
+import { NgtArgs, injectNgtRef, type NgtPointsMaterial } from 'angular-three';
+import * as THREE from 'three';
+
+const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment';
+
+export class PointMaterial extends THREE.PointsMaterial {
+	constructor(parameters: THREE.PointsMaterialParameters) {
+		super(parameters);
+		this.onBeforeCompile = (shader, renderer) => {
+			const { isWebGL2 } = renderer.capabilities;
+			shader.fragmentShader = shader.fragmentShader.replace(
+				`#include <${opaque_fragment}>`,
+				`
+        ${
+			!isWebGL2
+				? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>`
+				: `#include <${opaque_fragment}>`
+		}
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      `,
+			);
+		};
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-points-material
+		 */
+		'ngt-point-material': NgtPointsMaterial;
+		/**
+		 * @extends ngt-points-material
+		 */
+		'ngts-point-material': NgtPointsMaterial;
+	}
+}
+
+@Component({
+	selector: 'ngts-point-material',
+	standalone: true,
+	template: `<ngt-primitive ngtCompound [ref]="pointMaterialRef" *args="[material]" attach="material" />`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsPointMaterial {
+	@Input() pointMaterialRef = injectNgtRef<PointMaterial>();
+
+	material = new PointMaterial({});
+}

libs/soba/misc/src/html/html-wrapper.ts

@@ -293,6 +293,10 @@ export class NgtsHtmlWrapper {
 
 				let contentRef: EmbeddedViewRef<unknown>;
 				let contentParent: HTMLElement;
+				/**
+				 * NOTE: utilizing rAF here so that renderAnchor (ViewContainerRef) has a chance to be resolved
+				 * TODO: Another approach is to call render() in ngOnInit and pass in an injector to the effect
+				 */
 				const rAF = requestAnimationFrame(() => {
 					if (content && this.renderAnchor) {
 						contentRef = this.renderAnchor.createEmbeddedView(content);

libs/soba/performances/ng-package.json

@@ -1,5 +1,5 @@
 {
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
 }

libs/soba/performances/src/index.ts

@@ -1,2 +1,3 @@
 export * from './adaptive-dpr/adaptive-dpr';
 export * from './adaptive-events/adaptive-events';
+export * from './points/points';

libs/soba/performances/src/points/points-input.ts

@@ -0,0 +1,58 @@
+import { Directive, Input } from '@angular/core';
+import { injectNgtRef, signalStore } from 'angular-three';
+import type { Points } from 'three';
+
+export type NgtsPointsInstancesState = {
+	limit: number;
+	range?: number;
+};
+
+export type NgtsPointsBuffersState = {
+	// a buffer containing all points position
+	positions: Float32Array;
+	colors?: Float32Array;
+	sizes?: Float32Array;
+	// The size of the points in the buffer
+	stride: 2 | 3;
+};
+
+@Directive()
+export abstract class NgtsPointsInput {
+	protected inputs = signalStore<NgtsPointsBuffersState & NgtsPointsInstancesState>({
+		stride: 3,
+		limit: 1000,
+	});
+
+	@Input() pointsRef = injectNgtRef<Points>();
+
+	@Input({ alias: 'range' }) set _range(range: number) {
+		this.inputs.set({ range });
+	}
+
+	@Input({ alias: 'limit' }) set _limit(limit: number) {
+		this.inputs.set({ limit });
+	}
+
+	@Input({ alias: 'positions' }) set _positions(positions: Float32Array) {
+		this.inputs.set({ positions });
+	}
+
+	@Input({ alias: 'colors' }) set _colors(colors: Float32Array) {
+		this.inputs.set({ colors });
+	}
+
+	@Input({ alias: 'sizes' }) set _sizes(sizes: Float32Array) {
+		this.inputs.set({ sizes });
+	}
+
+	@Input({ alias: 'stride' }) set _stride(stride: 2 | 3) {
+		this.inputs.set({ stride });
+	}
+
+	limit = this.inputs.select('limit');
+	range = this.inputs.select('range');
+	positions = this.inputs.select('positions');
+	colors = this.inputs.select('colors');
+	sizes = this.inputs.select('sizes');
+	stride = this.inputs.select('stride');
+}