NgtsPointMaterial

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-point-material',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 3], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false" [lights]="false" background="#111">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'point-material-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class PointMaterial {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
import { beforeRender, NgtArgs } from 'angular-three';
import { NgtsPointMaterial } from 'angular-three-soba/materials';
import { NgtsPointsBuffer } from 'angular-three-soba/performances';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-group #group>
            <ngts-points-buffer [positions]="sphere" [stride]="3" [options]="{ frustumCulled: false }">
                <ngts-point-material
                    [options]="{
                        transparent: true,
                        color: '#ffa0e0',
                        size: 0.015,
                        sizeAttenuation: true,
                        depthWrite: false,
                    }"
                />
            </ngts-points-buffer>
        </ngt-group>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsPointsBuffer, NgtsPointMaterial],
})
export class SceneGraph {
    private groupRef = viewChild<ElementRef<THREE.Group>>('group');

    protected sphere = new Float32Array(
        Array.from({ length: 5000 }, () => {
            const point = new THREE.Vector3();
            point.randomDirection().multiplyScalar(1.5);
            return [point.x, point.y, point.z];
        }).flat(),
    );

    constructor() {
        beforeRender(({ delta }) => {
            const group = this.groupRef()?.nativeElement;
            if (group) {
                group.rotation.x += delta * 0.1;
                group.rotation.y += delta * 0.15;
            }
        });
    }
}

NgtsPointMaterial is a port of Drei’s PointMaterial that renders point clouds with consistent size regardless of distance. It extends THREE.PointsMaterial with additional shader modifications for improved point rendering with size attenuation control.

Usage

import { NgtsPointMaterial } from 'angular-three-soba/materials';

<ngt-points>
    <ngt-buffer-geometry>
        <ngt-buffer-attribute attach="attributes.position" [args]="[positions, 3]" />
    </ngt-buffer-geometry>
    <ngts-point-material [options]="{ size: 0.1, color: 'orange', sizeAttenuation: true }" />
</ngt-points>

Starfield Example

@Component({
    template: `
        <ngt-points>
            <ngt-buffer-geometry>
                <ngt-buffer-attribute attach="attributes.position" [args]="[positions, 3]" />
            </ngt-buffer-geometry>
            <ngts-point-material
                [options]="{
                    size: 0.02,
                    color: 'white',
                    sizeAttenuation: true,
                    transparent: true,
                    opacity: 0.8
                }"
            />
        </ngt-points>
    `
})
export class Starfield {
    positions = new Float32Array(
        Array.from({ length: 5000 }, () => (Math.random() - 0.5) * 50).flat()
    );
}

With Texture

@Component({
    template: `
        @if (texture(); as map) {
            <ngt-points>
                <ngt-buffer-geometry>
                    <ngt-buffer-attribute attach="attributes.position" [args]="[positions, 3]" />
                </ngt-buffer-geometry>
                <ngts-point-material
                    [options]="{
                        size: 0.5,
                        map: map,
                        transparent: true,
                        alphaTest: 0.5
                    }"
                />
            </ngt-points>
        }
    `
})
export class TexturedPoints {
    texture = textureResource(() => 'particle.png');
    positions = new Float32Array([/* ... */]);
}

The NgtsPointMaterial is particularly useful for particle systems, star fields, and other point-based visualizations where you need fine control over point appearance.

Options

options input accepts any properties from THREE.PointsMaterial in addition to the following:

Properties

name	type	description
size	number	The size of the points.
color	THREE.ColorRepresentation	The color of the points.
sizeAttenuation	boolean	Whether points should get smaller as they get further from the camera.
map	THREE.Texture	A texture to apply to the points.
transparent	boolean	Whether the material is transparent.
opacity	number	The opacity of the material (0-1).