feat(soba): migrate stars

Author: Chau Tran

libs/soba/project.json

@@ -56,7 +56,9 @@
                     "libs/soba/performance/**/*.ts",
                     "libs/soba/performance/**/*.html",
                     "libs/soba/loaders/**/*.ts",
-                    "libs/soba/loaders/**/*.html"
+                    "libs/soba/loaders/**/*.html",
+                    "libs/soba/shaders/**/*.ts",
+                    "libs/soba/shaders/**/*.html"
                 ]
             }
         },

libs/soba/shaders/README.md

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

libs/soba/shaders/ng-package.json

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

libs/soba/shaders/src/index.ts

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

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

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+
+export function shaderMaterial(
+    uniforms: {
+        [name: string]:
+            | THREE.CubeTexture
+            | THREE.Texture
+            | Int32Array
+            | Float32Array
+            | THREE.Matrix4
+            | THREE.Matrix3
+            | THREE.Quaternion
+            | THREE.Vector4
+            | THREE.Vector3
+            | THREE.Vector2
+            | THREE.Color
+            | number
+            | boolean
+            | Array<any>
+            | null;
+    },
+    vertexShader: string,
+    fragmentShader: string,
+    onInit?: (material?: THREE.ShaderMaterial) => void
+) {
+    const material = class extends THREE.ShaderMaterial {
+        public key: string = '';
+        constructor(parameters = {}) {
+            const entries = Object.entries(uniforms);
+            // Create unforms and shaders
+            super({
+                uniforms: entries.reduce((acc, [name, value]) => {
+                    const uniform = THREE.UniformsUtils.clone({ [name]: { value } });
+                    return {
+                        ...acc,
+                        ...uniform,
+                    };
+                }, {}),
+                vertexShader,
+                fragmentShader,
+            });
+            // Create getter/setters
+            entries.forEach(([name]) =>
+                Object.defineProperty(this, name, {
+                    get: () => this.uniforms[name].value,
+                    set: (v) => (this.uniforms[name].value = v),
+                })
+            );
+
+            // Assign parameters, this might include uniforms
+            Object.assign(this, parameters);
+            // Call onInit
+            if (onInit) onInit(this);
+        }
+    } as unknown as typeof THREE.ShaderMaterial & { key: string };
+    material.key = THREE.MathUtils.generateUUID();
+    return material;
+}

libs/soba/shaders/src/star-field-material/star-field-material.ts

@@ -0,0 +1,34 @@
+import { shaderMaterial } from '../shader-material/shader-material';
+
+export const StarFieldMaterial = shaderMaterial(
+    { time: 0.0, fade: 0.0 },
+    // language=GLSL
+    `
+uniform float time;
+attribute float size;
+varying vec3 vColor;
+void main() {
+  vColor = color;
+  vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+  gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+  gl_Position = projectionMatrix * mvPosition;
+}
+  `,
+    // language=GLSL
+    `
+uniform sampler2D pointTexture;
+uniform float fade;
+varying vec3 vColor;
+void main() {
+  float opacity = 1.0;
+  if (fade == 1.0) {
+    float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+    opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+  }
+  gl_FragColor = vec4(vColor, opacity);
+
+  #include <tonemapping_fragment>
+  #include <encodings_fragment>
+}
+  `
+);

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

@@ -0,0 +1,29 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { NgtArgs } from 'angular-three';
+import { NgtsStars } from 'angular-three-soba/staging';
+import { makeStoryFunction, StorybookSetup } from '../setup-canvas';
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-mesh [rotation]="[Math.PI / 2, 0, 0]">
+            <ngt-plane-geometry *args="[100, 100, 4, 4]" />
+            <ngt-mesh-basic-material color="white" [wireframe]="true" />
+        </ngt-mesh>
+        <ngt-axes-helper />
+        <ngts-stars />
+    `,
+    imports: [NgtsStars, NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultStarsStory {
+    readonly Math = Math;
+}
+
+export default {
+    title: 'Staging/Stars',
+    decorators: [moduleMetadata({ imports: [StorybookSetup] })],
+} as Meta;
+
+export const Default = makeStoryFunction(DefaultStarsStory);

libs/soba/staging/src/index.ts

@@ -3,3 +3,4 @@ export * from './cloud/cloud';
 export * from './contact-shadows/contact-shadows';
 export * from './float/float';
 export * from './sky/sky';
+export * from './stars/stars';

libs/soba/staging/src/stars/stars.ts

@@ -0,0 +1,127 @@
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { extend, injectBeforeRender, injectNgtRef, NgtArgs, NgtSignalStore, type NgtRenderState } from 'angular-three';
+import { StarFieldMaterial } from 'angular-three-soba/shaders';
+import * as THREE from 'three';
+import { BufferAttribute, BufferGeometry, Points } from 'three';
+
+extend({ Points, BufferGeometry, BufferAttribute });
+
+const genStar = (r: number) => {
+    return new THREE.Vector3().setFromSpherical(
+        new THREE.Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI)
+    );
+};
+
+export interface NgtsStarsState {
+    radius: number;
+    depth: number;
+    count: number;
+    factor: number;
+    saturation: number;
+    fade: boolean;
+    speed: number;
+}
+
+@Component({
+    selector: 'ngts-stars',
+    standalone: true,
+    template: `
+        <ngt-points [ref]="starsRef">
+            <ngt-buffer-geometry>
+                <ngt-buffer-attribute attach="attributes.position" *args="[bufferAttributes().positions, 3]" />
+                <ngt-buffer-attribute attach="attributes.color" *args="[bufferAttributes().colors, 3]" />
+                <ngt-buffer-attribute attach="attributes.size" *args="[bufferAttributes().sizes, 1]" />
+            </ngt-buffer-geometry>
+            <ngt-primitive
+                *args="[material]"
+                attach="material"
+                [blending]="AdditiveBlending"
+                [depthWrite]="false"
+                [transparent]="true"
+                [vertexColors]="true"
+            >
+                <ngt-value attach="uniforms.fade.value" [rawValue]="fade()" />
+            </ngt-primitive>
+        </ngt-points>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsStars extends NgtSignalStore<NgtsStarsState> {
+    readonly AdditiveBlending = THREE.AdditiveBlending;
+    readonly material = new StarFieldMaterial();
+
+    @Input() starsRef = injectNgtRef<Points>();
+
+    @Input() set radius(radius: number) {
+        this.set({ radius });
+    }
+
+    @Input() set depth(depth: number) {
+        this.set({ depth });
+    }
+
+    @Input() set count(count: number) {
+        this.set({ count });
+    }
+
+    @Input() set factor(factor: number) {
+        this.set({ factor });
+    }
+
+    @Input() set saturation(saturation: number) {
+        this.set({ saturation });
+    }
+
+    @Input('fade') set starsFade(fade: boolean) {
+        this.set({ fade });
+    }
+
+    @Input() set speed(speed: number) {
+        this.set({ speed });
+    }
+
+    readonly #count = this.select('count');
+    readonly #depth = this.select('depth');
+    readonly #factor = this.select('factor');
+    readonly #radius = this.select('radius');
+    readonly #saturation = this.select('saturation');
+
+    readonly fade = this.select('fade');
+    readonly bufferAttributes = computed(() => {
+        const positions: number[] = [];
+        const colors: number[] = [];
+        const sizes = Array.from({ length: this.#count() }, () => (0.5 + 0.5 * Math.random()) * this.#factor());
+        const color = new THREE.Color();
+        let r = this.#radius() + this.#depth();
+        const increment = this.#depth() / this.#count();
+        for (let i = 0; i < this.#count(); i++) {
+            r -= increment * Math.random();
+            positions.push(...genStar(r).toArray());
+            color.setHSL(i / this.#count(), this.#saturation(), 0.9);
+            colors.push(color.r, color.g, color.b);
+        }
+        return {
+            positions: new Float32Array(positions),
+            colors: new Float32Array(colors),
+            sizes: new Float32Array(sizes),
+        };
+    });
+
+    constructor() {
+        super({
+            radius: 100,
+            depth: 50,
+            count: 5000,
+            saturation: 0,
+            factor: 4,
+            fade: false,
+            speed: 1,
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this));
+    }
+
+    #onBeforeRender({ clock }: NgtRenderState) {
+        this.material.uniforms['time'].value = clock.getElapsedTime() * this.get('speed');
+    }
+}

tsconfig.base.json

@@ -27,6 +27,7 @@
             "angular-three-soba/loaders": ["libs/soba/loaders/src/index.ts"],
             "angular-three-soba/misc": ["libs/soba/misc/src/index.ts"],
             "angular-three-soba/performance": ["libs/soba/performance/src/index.ts"],
+            "angular-three-soba/shaders": ["libs/soba/shaders/src/index.ts"],
             "angular-three-soba/staging": ["libs/soba/staging/src/index.ts"],
             "angular-three-suspense": ["libs/suspense/src/index.ts"]
         }