add postprocessing blob

Author: Chau Tran

package-lock.json

@@ -31,7 +31,7 @@
         "angular-three": "^1.9.14",
         "angular-three-cannon": "^1.5.2",
         "angular-three-postprocessing": "^1.5.2",
-        "angular-three-soba": "^1.12.4",
+        "angular-three-soba": "^1.13.0",
         "cannon-es": "^0.20.0",
         "daisyui": "^2.51.5",
         "gsap": "^3.11.5",
@@ -52,13 +52,15 @@
         "@nrwl/vite": "~15.9.2",
         "@types/three": "^0.150.1",
         "autoprefixer": "^10.4.14",
+        "glsl-noise": "^0.0.0",
         "jsdom": "^21.1.1",
         "postcss": "^8.4.21",
         "prettier": "^2.8.7",
         "prettier-plugin-organize-imports": "^3.2.2",
         "tailwindcss": "^3.3.1",
         "typescript": "~4.9.5",
         "vite": "^4.2.1",
+        "vite-plugin-glslify": "^2.0.1",
         "vitest": "^0.29.8"
     }
 }

package.json

@@ -0,0 +1,14 @@
+<ngts-mesh-distort-material
+    [materialRef]="materialRef"
+    [envMap]="envMap$ | ngtPush"
+    [bumpMap]="bumpMap$ | ngtPush"
+    [roughness]="0.1"
+    [metalness]="1"
+    [bumpScale]="0.005"
+    [clearcoat]="1"
+    [clearcoatRoughness]="1"
+    [radius]="1"
+    [distort]="0.4"
+    color="#010101"
+/>
+<SphereInstances *ngIf="materialRef.nativeElement" [material]="materialRef.nativeElement" />

src/app/routes/postprocessing-blob/environment.html

@@ -0,0 +1,95 @@
+import { NgFor, NgIf } from '@angular/common';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { injectNgtRef, NgtArgs, NgtBeforeRenderEvent, NgtCanvas, NgtPush } from 'angular-three';
+import { NgtpEffectComposer } from 'angular-three-postprocessing';
+import { NgtpBloom, NgtpNoise, NgtpVignette } from 'angular-three-postprocessing/effects';
+import { NgtsMeshDistortMaterial } from 'angular-three-soba/materials';
+import * as THREE from 'three';
+
+import { RouteMeta } from '@analogjs/router';
+import distortVert from 'angular-three-soba/assets/distort.vert.glsl';
+import { injectCubeTextureLoader, injectNgtsTextureLoader } from 'angular-three-soba/loaders';
+import { MeshDistortMaterial, provideNgtsMeshDistortMaterialShader } from 'angular-three-soba/shaders';
+
+export const routeMeta: RouteMeta = {
+    title: 'Postprocessing Blob',
+};
+
+@Component({
+    selector: 'MainSphere[material]',
+    standalone: true,
+    templateUrl: 'main-sphere.html',
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class MainSphere {
+    @Input() material!: THREE.Material;
+
+    onBeforeRender({ state: { clock, pointer }, object: mesh }: NgtBeforeRenderEvent<THREE.Mesh>) {
+        mesh.rotation.z = clock.getElapsedTime();
+        mesh.rotation.y = THREE.MathUtils.lerp(mesh.rotation.y, pointer.x * Math.PI, 0.1);
+        mesh.rotation.x = THREE.MathUtils.lerp(mesh.rotation.x, pointer.y * Math.PI, 0.1);
+    }
+}
+
+@Component({
+    selector: 'SphereInstances[material]',
+    standalone: true,
+    templateUrl: 'sphere-instances.html',
+    imports: [MainSphere, NgFor, NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class SphereInstances {
+    @Input() material!: THREE.Material;
+
+    readonly initialPositions = [
+        [-4, 20, -12],
+        [-10, 12, -4],
+        [-11, -12, -23],
+        [-16, -6, -10],
+        [12, -2, -3],
+        [13, 4, -12],
+        [14, -2, -23],
+        [8, 10, -20],
+    ];
+
+    onBeforeRender(mesh: THREE.Mesh) {
+        mesh.position.y += 0.02;
+        if (mesh.position.y > 19) mesh.position.y = -18;
+        mesh.rotation.x += 0.06;
+        mesh.rotation.y += 0.06;
+        mesh.rotation.z += 0.02;
+    }
+}
+
+@Component({
+    selector: 'Environment',
+    standalone: true,
+    templateUrl: 'environment.html',
+    imports: [SphereInstances, NgtsMeshDistortMaterial, NgIf, NgtPush],
+    providers: [provideNgtsMeshDistortMaterialShader(distortVert)],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class Environment {
+    readonly bumpMap$ = injectNgtsTextureLoader('bump.jpg');
+    readonly envMap$ = injectCubeTextureLoader(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], '/cube/');
+
+    readonly materialRef = injectNgtRef<InstanceType<MeshDistortMaterial>>();
+}
+
+@Component({
+    standalone: true,
+    templateUrl: 'scene.html',
+    imports: [NgtArgs, NgtpEffectComposer, NgtpBloom, NgtpNoise, NgtpVignette, Environment],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class Scene {}
+
+@Component({
+    standalone: true,
+    templateUrl: 'postprocessing-blob.html',
+    imports: [NgtCanvas],
+})
+export default class PostprocessingBlob {
+    readonly scene = Scene;
+}

src/app/routes/postprocessing-blob/index.ts

@@ -0,0 +1,3 @@
+<ngt-mesh [material]="material" (beforeRender)="onBeforeRender($any($event))">
+    <ngt-icosahedron-geometry *args="[1, 4]" />
+</ngt-mesh>

src/app/routes/postprocessing-blob/main-sphere.html

@@ -0,0 +1 @@
+<ngt-canvas [camera]="{position: [0, 0, 3]}" [sceneGraph]="scene" />

src/app/routes/postprocessing-blob/postprocessing-blob.html

@@ -0,0 +1,10 @@
+<ngt-color *args="['#050505']" attach="background" />
+<ngt-fog color="#161616" [near]="8" [far]="30" attach="fog" />
+
+<Environment />
+
+<ngtp-effect-composer [multisampling]="0" [disableNormalPass]="true">
+    <ngtp-bloom [luminanceThreshold]="0" [height]="300" [opacity]="5" />
+    <ngtp-noise [opacity]="0.025" />
+    <ngtp-vignette [eskil]="false" [offset]="0.1" [darkness]="0.1" />
+</ngtp-effect-composer>

src/app/routes/postprocessing-blob/scene.html

@@ -0,0 +1,9 @@
+<MainSphere [material]="material" />
+<ngt-mesh
+    *ngFor="let position of initialPositions"
+    [position]="position"
+    [material]="material"
+    (beforeRender)="onBeforeRender($any($event).object)"
+>
+    <ngt-icosahedron-geometry *args="[1, 4]" />
+</ngt-mesh>

src/app/routes/postprocessing-blob/sphere-instances.html

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare module '*.glsl' {
+    const shader: string;
+    export default shader;
+}

src/assets/bump.jpg

@@ -2,6 +2,7 @@
 
 import analog from '@analogjs/platform';
 import { defineConfig } from 'vite';
+import glslify from 'vite-plugin-glslify';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -12,7 +13,7 @@ export default defineConfig(({ mode }) => ({
     resolve: {
         mainFields: ['module'],
     },
-    plugins: [analog({ static: true })],
+    plugins: [glslify(), analog({ static: true })],
     test: {
         globals: true,
         environment: 'jsdom',