feat(soba): add mesh distort and mesh wobble material

Author: Chau Tran

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,2 @@
+export * from './mesh-distort-material/mesh-distort-material';
+export * from './mesh-wobble-material/mesh-wobble-material';

libs/soba/materials/src/mesh-distort-material/mesh-distort-material.ts

@@ -0,0 +1,60 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input } from '@angular/core';
+import { injectBeforeRender, injectNgtRef, NgtArgs, NgtSignalStore } from 'angular-three';
+import { MeshDistortMaterial, NGTS_DISTORT_MATERIAL_SHADER } from 'angular-three-soba/shaders';
+
+export interface NgtsMeshDistortMaterialState {
+    time: number;
+    distort: number;
+    radius: number;
+    speed: number;
+}
+
+@Component({
+    selector: 'ngts-mesh-distort-material',
+    standalone: true,
+    template: `
+        <ngt-primitive
+            *args="[material]"
+            [ref]="materialRef"
+            [time]="distortTime()"
+            [distort]="distortDistort()"
+            [radius]="distortRadius()"
+            ngtCompound
+            attach="material"
+        />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsMeshDistortMaterial extends NgtSignalStore<NgtsMeshDistortMaterialState> {
+    readonly material = new (inject(NGTS_DISTORT_MATERIAL_SHADER))();
+
+    @Input() materialRef = injectNgtRef<InstanceType<MeshDistortMaterial>>();
+
+    @Input() set time(time: number) {
+        this.set({ time });
+    }
+
+    @Input() set distort(distort: number) {
+        this.set({ distort });
+    }
+
+    @Input() set radius(radius: number) {
+        this.set({ radius });
+    }
+
+    @Input() set speed(speed: number) {
+        this.set({ speed });
+    }
+
+    readonly distortTime = this.select('time');
+    readonly distortDistort = this.select('distort');
+    readonly distortRadius = this.select('radius');
+
+    constructor() {
+        super({ speed: 1, time: 0, distort: 0.4, radius: 1 });
+        injectBeforeRender(({ clock }) => {
+            this.material.time = clock.getElapsedTime() * this.get('speed');
+        });
+    }
+}

libs/soba/materials/src/mesh-wobble-material/mesh-wobble-material.ts

@@ -0,0 +1,55 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { extend, injectBeforeRender, injectNgtRef, NgtArgs, NgtSignalStore } from 'angular-three';
+import { MeshWobbleMaterial } from 'angular-three-soba/shaders';
+
+extend({ MeshWobbleMaterial });
+
+export interface NgtsMeshWobbleMaterialState {
+    time: number;
+    factor: number;
+    speed: number;
+}
+
+@Component({
+    selector: 'ngts-mesh-wobble-material',
+    standalone: true,
+    template: `
+        <ngt-primitive
+            *args="[material]"
+            [ref]="materialRef"
+            [time]="wobbleTime()"
+            [factor]="wobbleFactor()"
+            attach="material"
+            ngtCompound
+        />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsMeshWobbleMaterial extends NgtSignalStore<NgtsMeshWobbleMaterialState> {
+    readonly material = new MeshWobbleMaterial();
+
+    @Input() materialRef = injectNgtRef<MeshWobbleMaterial>();
+
+    @Input() set time(time: number) {
+        this.set({ time });
+    }
+
+    @Input() set factor(factor: number) {
+        this.set({ factor });
+    }
+
+    @Input() set speed(speed: number) {
+        this.set({ speed });
+    }
+
+    readonly wobbleTime = this.select('time');
+    readonly wobbleFactor = this.select('factor');
+
+    constructor() {
+        super({ speed: 1, time: 0, factor: 1 });
+        injectBeforeRender(({ clock }) => {
+            this.material.time = clock.getElapsedTime() * this.get('speed');
+        });
+    }
+}

libs/soba/ng-package.json

@@ -6,7 +6,7 @@
     },
     "assets": [
         {
-            "input": "./shaders/src/assets/",
+            "input": "./shaders/assets/",
             "glob": "**/*",
             "output": "assets"
         }

libs/soba/project.json

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

libs/soba/shaders/assets/distort.vert.glsl

@@ -0,0 +1 @@
+#pragma glslify: snoise3 = require(glsl-noise/simplex/3d)

libs/soba/shaders/src/index.ts

@@ -1,6 +1,8 @@
 export * from './caustics-material/caustics-material';
 export * from './caustics-material/caustics-projection-material';
 export * from './discard-material/discard-material';
+export * from './mesh-distort-material/mesh-distort-material';
+export * from './mesh-wobble-material/mesh-wobble-material';
 export * from './soft-shadow-material/soft-shadow-material';
 export * from './sparkles-material/sparkles-material';
 export * from './spot-light-material/spot-light-material';

libs/soba/shaders/src/mesh-distort-material/mesh-distort-material.ts

@@ -0,0 +1,84 @@
+import { InjectionToken, Type } from '@angular/core';
+import * as THREE from 'three';
+
+interface Uniform<T> {
+    value: T;
+}
+
+/**
+ * npm i -D raw-loader glslify-loader glsl-noise
+ * Usage: import distort from 'raw-loader!glslify-loader!angular-three-soba/assets/distort.vert.glsl'
+ *
+ * provideNgtsMeshDistortMaterialShader(distort)
+ */
+
+export type MeshDistortMaterial = Type<{ time: number; distort: number; radius: number } & THREE.MeshPhysicalMaterial>;
+
+export const NGTS_DISTORT_MATERIAL_SHADER = new InjectionToken<MeshDistortMaterial>('DistortMaterialShader');
+
+export function provideNgtsMeshDistortMaterialShader(distortShader: string) {
+    return {
+        provide: NGTS_DISTORT_MATERIAL_SHADER,
+        useFactory: () => {
+            return class extends THREE.MeshPhysicalMaterial {
+                _time: Uniform<number>;
+                _distort: Uniform<number>;
+                _radius: Uniform<number>;
+
+                constructor(parameters: THREE.MeshPhysicalMaterialParameters = {}) {
+                    super(parameters);
+                    this.setValues(parameters);
+                    this._time = { value: 0 };
+                    this._distort = { value: 0.4 };
+                    this._radius = { value: 1 };
+                }
+
+                override onBeforeCompile(shader: THREE.Shader) {
+                    shader.uniforms['time'] = this._time;
+                    shader.uniforms['radius'] = this._radius;
+                    shader.uniforms['distort'] = this._distort;
+
+                    shader.vertexShader = `
+									    uniform float time;
+									    uniform float radius;
+									    uniform float distort;
+									    ${distortShader}
+									    ${shader.vertexShader}
+									  `;
+                    shader.vertexShader = shader.vertexShader.replace(
+                        '#include <begin_vertex>',
+                        `
+									      float updateTime = time / 50.0;
+									      float noise = snoise(vec3(position / 2.0 + updateTime * 5.0));
+									      vec3 transformed = vec3(position * (noise * pow(distort, 2.0) + radius));
+									      `
+                    );
+                }
+
+                get time() {
+                    return this._time.value;
+                }
+
+                set time(v) {
+                    this._time.value = v;
+                }
+
+                get distort() {
+                    return this._distort.value;
+                }
+
+                set distort(v) {
+                    this._distort.value = v;
+                }
+
+                get radius() {
+                    return this._radius.value;
+                }
+
+                set radius(v) {
+                    this._radius.value = v;
+                }
+            };
+        },
+    };
+}