feat(soba): point material

Author: nartc

Diff for: libs/soba/materials/src/index.ts

@@ -4,3 +4,4 @@ export * from './lib/mesh-reflector-material';
 export * from './lib/mesh-refraction-material';
 export * from './lib/mesh-transmission-material';
 export * from './lib/mesh-wobble-material';
+export * from './lib/point-material';

Diff for: libs/soba/materials/src/lib/point-material.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import { NgtArgs, NgtAttachable } from 'angular-three';
+import { PointMaterial } from 'angular-three-soba/shaders';
+import { PointsMaterialParameters } from 'three';
+
+@Component({
+	selector: 'ngts-point-material',
+	standalone: true,
+	template: `
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="options()">
+			<ng-content />
+		</ngt-primitive>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs],
+})
+export class NgtsPointMaterial {
+	attach = input<NgtAttachable>('material');
+	options = input({} as PointsMaterialParameters);
+
+	material = new PointMaterial(this.options());
+}

Diff for: libs/soba/shaders/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/grid-material';
 export * from './lib/mesh-refraction-material';
+export * from './lib/point-material';

Diff for: libs/soba/shaders/src/lib/point-material.ts

@@ -0,0 +1,42 @@
+import { NgtMaterial } from 'angular-three';
+import { getVersion } from 'angular-three-soba/misc';
+import { PointsMaterial, PointsMaterialParameters } from 'three';
+
+const opaque_fragment = getVersion() >= 154 ? 'opaque_fragment' : 'output_fragment';
+
+export class PointMaterial extends PointsMaterial {
+	constructor(props: PointsMaterialParameters) {
+		super(props);
+		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 <${getVersion() >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      `,
+			);
+		};
+	}
+}
+
+export type NgtPointMaterial = NgtMaterial<PointMaterial, [PointsMaterialParameters]>;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-points-material
+		 */
+		'ngt-point-material': NgtPointMaterial;
+	}
+}