docs(soba): add mesh transmission material story

Author: nartc

libs/soba/.storybook/public/soba/gelatinous_cube.glb

@@ -0,0 +1,129 @@
+import { NgIf } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
+import { NgtsMeshTranmissionMaterial } from 'angular-three-soba/materials';
+import { NgtsAccumulativeShadows, NgtsCenter, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+// https://sketchfab.com/3d-models/gelatinous-cube-e08385238f4d4b59b012233a9fbdca21
+@Component({
+	selector: 'transmission-gelatinous-cube',
+	standalone: true,
+	template: `
+		<ngt-group *ngIf="cubeGLTF() as cubeGLTF" [dispose]="null">
+			<ngt-mesh [geometry]="cubeGLTF.nodes.cube1.geometry" [position]="[-0.56, 0.38, -0.11]">
+				<ngts-mesh-transmission-material
+					[background]="background"
+					[backside]="false"
+					[samples]="10"
+					[resolution]="2048"
+					[transmission]="1"
+					[roughness]="0"
+					[thickness]="3.5"
+					[ior]="1.5"
+					[chromaticAberration]="0.06"
+					[anisotropy]="0.1"
+					[distortion]="0.0"
+					[distortionScale]="0.3"
+					[temporalDistortion]="0.5"
+					[clearcoat]="1"
+					[attenuationDistance]="0.5"
+					attenuationColor="#ffffff"
+					color="#c9ffa1"
+				/>
+			</ngt-mesh>
+			<ngt-mesh
+				[castShadow]="true"
+				[renderOrder]="-100"
+				[geometry]="cubeGLTF.nodes.cube2.geometry"
+				[material]="cubeGLTF.materials.cube_mat"
+				[position]="[-0.56, 0.38, -0.11]"
+			>
+				<ngt-value [rawValue]="FrontSide" attach="material.side" />
+			</ngt-mesh>
+			<ngt-mesh
+				[geometry]="cubeGLTF.nodes.bubbles.geometry"
+				[material]="cubeGLTF.materials.cube_bubbles_mat"
+				[position]="[-0.56, 0.38, -0.11]"
+			/>
+			<ngt-group [position]="[-0.56, 0.38, -0.41]">
+				<ngt-mesh [geometry]="cubeGLTF.nodes.arrows.geometry" [material]="cubeGLTF.materials.weapons_mat" />
+				<ngt-mesh [geometry]="cubeGLTF.nodes.skeleton_1.geometry" [material]="cubeGLTF.materials.skele_mat" />
+				<ngt-mesh [geometry]="cubeGLTF.nodes.skeleton_2.geometry" [material]="cubeGLTF.materials.weapons_mat">
+					<ngt-value [rawValue]="FrontSide" attach="material.side" />
+				</ngt-mesh>
+			</ngt-group>
+		</ngt-group>
+	`,
+	imports: [NgIf, NgtsMeshTranmissionMaterial],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class GelatinousCube {
+	FrontSide = THREE.FrontSide;
+	background = new THREE.Color('#839681');
+	cubeGLTF = injectNgtsGLTFLoader(() => 'soba/gelatinous_cube.glb');
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-ambient-light />
+		<ngt-group [position]="[0, -2.5, 0]">
+			<ngts-center [top]="true">
+				<transmission-gelatinous-cube />
+			</ngts-center>
+			<ngts-accumulative-shadows
+				[temporal]="true"
+				[frames]="100"
+				[alphaTest]="0.9"
+				[colorBlend]="1"
+				[opacity]="0.8"
+				[scale]="20"
+				color="#3ead5d"
+			>
+				<ngts-randomized-lights
+					[radius]="10"
+					[ambient]="0.5"
+					[intensity]="Math.PI"
+					[position]="[2.5, 8, -2.5]"
+					[bias]="0.001"
+				/>
+			</ngts-accumulative-shadows>
+		</ngt-group>
+		<ngts-orbit-controls
+			[minPolarAngle]="0"
+			[maxPolarAngle]="Math.PI / 2"
+			[autoRotate]="true"
+			[autoRotateSpeed]="0.05"
+			[makeDefault]="true"
+		/>
+		<ngts-environment
+			files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/dancing_hall_1k.hdr"
+			[background]="true"
+			[blur]="1"
+		/>
+	`,
+	imports: [
+		GelatinousCube,
+		NgtsCenter,
+		NgtsAccumulativeShadows,
+		NgtsRandomizedLights,
+		NgtsOrbitControls,
+		NgtsEnvironment,
+	],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultMeshTransmissionMaterialStory {
+	Math = Math;
+}
+
+export default {
+	title: 'Shaders/MeshTransmissionMaterial',
+	decorators: makeDecorators(),
+};
+
+const canvasOptions = makeCanvasOptions({ camera: { fov: 25, position: [15, 0, 15] } });
+
+export const Default = makeStoryFunction(DefaultMeshTransmissionMaterialStory, canvasOptions);

libs/soba/src/shaders/mesh-transmission-material.stories.ts

@@ -13,8 +13,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@analogjs/platform": "^0.2.1",
-    "@analogjs/vite-plugin-angular": "^0.2.1",
+    "@analogjs/platform": "^0.2.2",
+    "@analogjs/vite-plugin-angular": "^0.2.2",
     "@angular-devkit/build-angular": "16.2.1",
     "@angular-devkit/core": "16.2.1",
     "@angular-devkit/schematics": "16.2.1",
@@ -24,20 +24,20 @@
     "@angular/cli": "~16.2.1",
     "@angular/compiler-cli": "16.2.3",
     "@angular/language-service": "16.2.3",
-    "@nx/angular": "16.8.0",
-    "@nx/devkit": "16.8.0",
-    "@nx/eslint-plugin": "16.8.0",
-    "@nx/jest": "16.8.0",
-    "@nx/js": "16.8.0",
-    "@nx/linter": "16.8.0",
-    "@nx/plugin": "16.8.0",
-    "@nx/storybook": "16.8.0",
-    "@nx/vite": "16.8.0",
-    "@nx/web": "16.8.0",
-    "@nx/workspace": "16.8.0",
+    "@nx/angular": "16.8.1",
+    "@nx/devkit": "16.8.1",
+    "@nx/eslint-plugin": "16.8.1",
+    "@nx/jest": "16.8.1",
+    "@nx/js": "16.8.1",
+    "@nx/linter": "16.8.1",
+    "@nx/plugin": "16.8.1",
+    "@nx/storybook": "16.8.1",
+    "@nx/vite": "16.8.1",
+    "@nx/web": "16.8.1",
+    "@nx/workspace": "16.8.1",
     "@phenomnomnominal/tsquery": "^6.1.3",
     "@release-it/bumper": "^5.1.0",
-    "@release-it/conventional-changelog": "^7.0.0",
+    "@release-it/conventional-changelog": "^7.0.1",
     "@schematics/angular": "16.2.1",
     "@storybook/addon-essentials": "7.4.0",
     "@storybook/addon-interactions": "7.4.0",
@@ -50,12 +50,12 @@
     "@storybook/theming": "^7.4.0",
     "@swc-node/register": "~1.6.7",
     "@swc/cli": "~0.1.62",
-    "@swc/core": "~1.3.82",
+    "@swc/core": "~1.3.83",
     "@types/jest": "^29.5.4",
     "@types/node": "20.5.9",
     "@types/three": "^0.155.1",
-    "@typescript-eslint/eslint-plugin": "6.5.0",
-    "@typescript-eslint/parser": "6.5.0",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
     "autoprefixer": "^10.4.15",
     "dotenv-cli": "^7.3.0",
     "enquirer": "^2.4.1",
@@ -67,9 +67,9 @@
     "jest-environment-jsdom": "^29.6.4",
     "jest-preset-angular": "~13.1.1",
     "jsdom": "^22.1.0",
-    "ng-packagr": "16.2.2",
+    "ng-packagr": "16.2.3",
     "ngx-resize": "^2.0.0",
-    "nx": "16.8.0",
+    "nx": "16.8.1",
     "postcss": "^8.4.29",
     "postcss-import": "~15.1.0",
     "postcss-preset-env": "~9.1.3",
@@ -90,8 +90,8 @@
     "vitest": "^0.34.3"
   },
   "dependencies": {
-    "@analogjs/content": "^0.2.1",
-    "@analogjs/router": "^0.2.1",
+    "@analogjs/content": "^0.2.2",
+    "@analogjs/router": "^0.2.2",
     "@angular/animations": "16.2.3",
     "@angular/common": "16.2.3",
     "@angular/compiler": "16.2.3",
@@ -102,15 +102,15 @@
     "@angular/platform-server": "16.2.3",
     "@angular/router": "16.2.3",
     "@pmndrs/cannon-worker-api": "^2.4.0",
-    "@swc/helpers": "~0.5.1",
+    "@swc/helpers": "~0.5.2",
     "cannon-es": "^0.20.0",
     "cannon-es-debugger": "^1.0.0",
     "front-matter": "^4.0.2",
     "gsap": "^3.12.2",
     "maath": "^0.7.0",
     "marked": "^7.0.5",
-    "marked-gfm-heading-id": "^3.0.6",
-    "marked-highlight": "^2.0.4",
+    "marked-gfm-heading-id": "^3.0.7",
+    "marked-highlight": "^2.0.5",
     "mermaid": "^10.4.0",
     "meshline": "^3.1.6",
     "nice-color-palettes": "^3.0.0",
@@ -119,8 +119,8 @@
     "react-dom": "^18.2.0",
     "rxjs": "~7.8.1",
     "stats-gl": "^1.0.5",
-    "three-mesh-bvh": "^0.6.6",
-    "three-stdlib": "^2.25.0",
+    "three-mesh-bvh": "^0.6.7",
+    "three-stdlib": "^2.25.1",
     "troika-three-text": "^0.47.2",
     "tslib": "^2.6.2",
     "zone.js": "~0.13.1"