feat(angular-3d): migrate bubble-text and cloud-layer to tsl materials

- Task 2.1: Migrate BubbleText to TSL Material
  - Replace ShaderMaterial with MeshStandardNodeMaterial
  - Use tslFresnel and tslIridescence from utilities
  - Remove 45 lines of GLSL shader code
  - Configure colorNode, opacityNode for WebGPU native rendering

- Task 2.2: Migrate CloudLayer to TSL Material
  - Replace ShaderMaterial with MeshBasicNodeMaterial
  - Use applyFog and clampForBloom from utilities
  - Remove GLSL fog shader code
  - Works natively on both WebGPU and WebGL backends

Author: Abdallah-khalil

libs/angular-3d/src/lib/primitives/cloud-layer.component.ts

@@ -3,6 +3,7 @@
  *
  * Creates realistic cloud layers matching the MrDoob reference.
  * Uses merged geometries for optimal GPU performance.
+ * Now uses TSL (Three.js Shading Language) for WebGPU/WebGL native materials.
  *
  * @example
  * ```html
@@ -24,42 +25,17 @@ import {
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import * as THREE from 'three/webgpu';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { NG_3D_PARENT } from '../types/tokens';
 import { RenderLoopService } from '../render-loop/render-loop.service';
 import { SceneService } from '../canvas/scene.service';
 import { injectTextureLoader } from '../loaders/inject-texture-loader';
+import { applyFog, clampForBloom } from './shaders/tsl-utilities';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import * as TSL from 'three/tsl';
 
-// Cloud shader - exact match to reference
-const cloudShader = {
-  vertexShader: `
-    varying vec2 vUv;
-    void main() {
-      vUv = uv;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    }
-  `,
-  fragmentShader: `
-    uniform sampler2D map;
-    uniform vec3 fogColor;
-    uniform float fogNear;
-    uniform float fogFar;
-    varying vec2 vUv;
-
-    void main() {
-      float depth = gl_FragCoord.z / gl_FragCoord.w;
-      float fogFactor = smoothstep(fogNear, fogFar, depth);
-
-      gl_FragColor = texture2D(map, vUv);
-      gl_FragColor.w *= pow(gl_FragCoord.z, 20.0);
-      gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w), fogFactor);
-
-      // CRITICAL: Clamp RGB to stay below bloom threshold (0.9)
-      // This prevents clouds from triggering the bloom effect
-      gl_FragColor.rgb = min(gl_FragColor.rgb, vec3(0.85));
-    }
-  `,
-};
+const { texture, uv, positionView, float, vec3, pow, color } = TSL;
 
 @Component({
   selector: 'a3d-cloud-layer',
@@ -96,7 +72,7 @@ export class CloudLayerComponent {
   // Three.js objects
   private cloudMesh: THREE.Mesh | null = null;
   private cloudMeshBack: THREE.Mesh | null = null;
-  private material: THREE.ShaderMaterial | null = null;
+  private material: MeshBasicNodeMaterial | null = null;
   private startTime = 0;
   private mouseX = 0;
   private mouseY = 0;
@@ -118,10 +94,10 @@ export class CloudLayerComponent {
 
     // Create clouds when texture is loaded
     effect(() => {
-      const texture = this.textureResource.data();
-      if (!texture) return;
+      const loadedTexture = this.textureResource.data();
+      if (!loadedTexture) return;
 
-      this.createClouds(texture);
+      this.createClouds(loadedTexture);
     });
 
     // Cleanup
@@ -130,7 +106,7 @@ export class CloudLayerComponent {
     });
   }
 
-  private createClouds(texture: THREE.Texture): void {
+  private createClouds(loadedTexture: THREE.Texture): void {
     const parent = this.parentFn?.();
     if (!parent) {
       console.warn('[CloudLayerComponent] No parent found');
@@ -141,28 +117,12 @@ export class CloudLayerComponent {
     this.cleanup();
 
     // Configure texture - exact match to reference
-    texture.colorSpace = THREE.SRGBColorSpace;
-    texture.magFilter = THREE.LinearFilter;
-    texture.minFilter = THREE.LinearMipMapLinearFilter;
-
-    // Get fog color
-    const fogColorValue = this.fogColor();
-    const fogColorThree = new THREE.Color(fogColorValue);
+    loadedTexture.colorSpace = THREE.SRGBColorSpace;
+    loadedTexture.magFilter = THREE.LinearFilter;
+    loadedTexture.minFilter = THREE.LinearMipMapLinearFilter;
 
-    // Create shader material - exact match to reference
-    this.material = new THREE.ShaderMaterial({
-      uniforms: {
-        map: { value: texture },
-        fogColor: { value: fogColorThree },
-        fogNear: { value: this.fogNear() },
-        fogFar: { value: this.fogFar() },
-      },
-      vertexShader: cloudShader.vertexShader,
-      fragmentShader: cloudShader.fragmentShader,
-      depthWrite: false,
-      depthTest: false,
-      transparent: true,
-    });
+    // Create TSL-based material
+    this.material = this.createCloudMaterial(loadedTexture);
 
     // Create merged geometry - EXACT match to reference positioning
     const geometry = this.createMergedCloudGeometry();
@@ -189,6 +149,51 @@ export class CloudLayerComponent {
     this.startAnimation();
   }
 
+  /**
+   * Create TSL-based cloud material
+   * Replaces GLSL ShaderMaterial with native TSL nodes
+   */
+  private createCloudMaterial(
+    cloudTexture: THREE.Texture
+  ): MeshBasicNodeMaterial {
+    const fogColorValue = this.fogColor();
+    const fogColorThree = new THREE.Color(fogColorValue);
+
+    // Create TSL nodes for the material
+    // Sample the cloud texture
+    const texColor = texture(cloudTexture, uv());
+
+    // Calculate view depth for fog (use view-space z position)
+    const depth = positionView.z.negate();
+
+    // Apply depth-based alpha modification (matches original: pow(gl_FragCoord.z, 20.0))
+    // Use a power curve to fade clouds based on depth
+    const depthFade = pow(depth.div(3000).clamp(0, 1), float(0.5));
+    const alphaWithDepth = texColor.a.mul(depthFade);
+
+    // Apply fog to the color
+    const foggedColor = applyFog(
+      texColor,
+      color(fogColorThree),
+      float(this.fogNear()),
+      float(this.fogFar()),
+      depth
+    );
+
+    // Clamp RGB to stay below bloom threshold (0.85)
+    const clampedColor = clampForBloom(foggedColor, 0.85);
+
+    // Create MeshBasicNodeMaterial with TSL nodes
+    const material = new MeshBasicNodeMaterial();
+    material.colorNode = clampedColor;
+    material.opacityNode = alphaWithDepth;
+    material.transparent = true;
+    material.depthWrite = false;
+    material.depthTest = false;
+
+    return material;
+  }
+
   private createMergedCloudGeometry(): THREE.BufferGeometry {
     // EXACT match to reference: 64x64 plane
     const planeGeo = new THREE.PlaneGeometry(

libs/angular-3d/src/lib/primitives/text/bubble-text.component.ts

@@ -8,22 +8,28 @@ import {
   signal,
 } from '@angular/core';
 import * as THREE from 'three/webgpu';
+import { MeshStandardNodeMaterial } from 'three/webgpu';
 import { SceneService } from '../../canvas/scene.service';
 import { RenderLoopService } from '../../render-loop/render-loop.service';
 import { TextSamplingService } from '../../services/text-sampling.service';
 import { OBJECT_ID } from '../../tokens/object-id.token';
 import { NG_3D_PARENT } from '../../types/tokens';
+import { tslFresnel, tslIridescence } from '../shaders/tsl-utilities';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import * as TSL from 'three/tsl';
+
+const { float, vec3, color, mix } = TSL;
 
 /**
  * BubbleTextComponent - 3D Bubble Text using Instanced Meshes
  *
  * Creates transparent bubble spheres that form text shape, inspired by
- * Codrops bubble typer effect. Uses IcosahedronGeometry with custom
+ * Codrops bubble typer effect. Uses IcosahedronGeometry with TSL-based
  * rim-lighting shader for realistic soap bubble appearance.
  *
  * Features:
  * - IcosahedronGeometry spheres (not flat planes)
- * - Custom bubble shader (transparent center, opaque rim)
+ * - TSL bubble material (transparent center, opaque rim) - WebGPU native
  * - Grow → Burst → Regrow lifecycle animation
  * - Optional flying bubbles that float upward
  * - Billboard-free (true 3D spheres)
@@ -89,7 +95,7 @@ export class BubbleTextComponent {
 
   // Internal state
   private bubbleGeometry?: THREE.IcosahedronGeometry;
-  private bubbleMaterial?: THREE.ShaderMaterial;
+  private bubbleMaterial?: MeshStandardNodeMaterial;
   private instancedMesh?: THREE.InstancedMesh;
   private dummy = new THREE.Object3D();
 
@@ -132,7 +138,7 @@ export class BubbleTextComponent {
       if (this.instancedMesh && parent) {
         parent.remove(this.instancedMesh);
         this.instancedMesh.geometry.dispose();
-        (this.instancedMesh.material as THREE.ShaderMaterial).dispose();
+        (this.instancedMesh.material as MeshStandardNodeMaterial).dispose();
       }
       if (this.bubbleGeometry) {
         this.bubbleGeometry.dispose();
@@ -152,7 +158,7 @@ export class BubbleTextComponent {
       if (this.instancedMesh && parent) {
         parent.remove(this.instancedMesh);
         this.instancedMesh.geometry.dispose();
-        (this.instancedMesh.material as THREE.ShaderMaterial).dispose();
+        (this.instancedMesh.material as MeshStandardNodeMaterial).dispose();
         this.instancedMesh = undefined;
       }
       this.bubbles = [];
@@ -243,18 +249,16 @@ export class BubbleTextComponent {
     if (this.instancedMesh && parent) {
       parent.remove(this.instancedMesh);
       this.instancedMesh.geometry.dispose();
-      (this.instancedMesh.material as THREE.ShaderMaterial).dispose();
+      (this.instancedMesh.material as MeshStandardNodeMaterial).dispose();
     }
 
     // Create geometry (Icosahedron for spherical bubbles)
     if (!this.bubbleGeometry) {
       this.bubbleGeometry = new THREE.IcosahedronGeometry(1, 2); // Detail level 2
     }
 
-    // Create bubble shader material
-    if (!this.bubbleMaterial) {
-      this.bubbleMaterial = this.createBubbleShaderMaterial();
-    }
+    // Create TSL bubble material
+    this.bubbleMaterial = this.createBubbleMaterial();
 
     // Create instanced mesh
     this.instancedMesh = new THREE.InstancedMesh(
@@ -273,59 +277,39 @@ export class BubbleTextComponent {
   }
 
   /**
-   * Create bubble shader material with rim transparency effect
+   * Create TSL-based bubble material with rim transparency effect
+   * Uses native TSL nodes for WebGPU/WebGL compatibility
    */
-  private createBubbleShaderMaterial(): THREE.ShaderMaterial {
-    const bubbleColor = new THREE.Color(this.bubbleColor());
-
-    return new THREE.ShaderMaterial({
-      uniforms: {
-        uColor: { value: bubbleColor },
-        uOpacity: { value: this.opacity() },
-      },
-      vertexShader: `
-        varying vec3 vNormal;
-        varying vec3 vViewPosition;
-
-        void main() {
-          vNormal = normalize(normalMatrix * normal);
-          vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
-          vViewPosition = -mvPosition.xyz;
-          gl_Position = projectionMatrix * mvPosition;
-        }
-      `,
-      fragmentShader: `
-        uniform vec3 uColor;
-        uniform float uOpacity;
-        
-        varying vec3 vNormal;
-        varying vec3 vViewPosition;
-
-        void main() {
-          // Fresnel-like rim effect
-          vec3 viewDir = normalize(vViewPosition);
-          float rim = 1.0 - abs(dot(vNormal, viewDir));
-          rim = pow(rim, 2.0);
-          
-          // Mix white center with colored rim (bubble refraction look)
-          vec3 centerColor = vec3(1.0, 1.0, 1.0);
-          vec3 rimColor = uColor;
-          vec3 finalColor = mix(centerColor, rimColor, rim * 0.7);
-          
-          // Add rainbow iridescence
-          float rainbow = sin(rim * 6.28) * 0.5 + 0.5;
-          finalColor += vec3(rainbow * 0.1, rainbow * 0.05, rainbow * 0.15);
-          
-          // Alpha: more transparent at center, more opaque at rim
-          float alpha = (0.2 + rim * 0.6) * uOpacity;
-          
-          gl_FragColor = vec4(finalColor, alpha);
-        }
-      `,
-      transparent: true,
-      side: THREE.DoubleSide,
-      depthWrite: false,
-    });
+  private createBubbleMaterial(): MeshStandardNodeMaterial {
+    const bubbleColorValue = new THREE.Color(this.bubbleColor());
+    const opacityValue = this.opacity();
+
+    // Create TSL color node
+    const baseColor = color(bubbleColorValue);
+
+    // Calculate fresnel rim effect using TSL utilities
+    const fresnelValue = tslFresnel(float(2.0), float(0.6), float(0.2));
+
+    // Mix white center with colored rim (bubble refraction look)
+    const centerColor = vec3(1, 1, 1);
+    const finalColor = mix(centerColor, baseColor, fresnelValue.mul(0.7));
+
+    // Add rainbow iridescence using TSL utilities
+    const iridescent = tslIridescence(fresnelValue, float(0.1));
+    const colorWithIridescence = finalColor.add(iridescent);
+
+    // Alpha: more transparent at center, more opaque at rim
+    const alpha = float(0.2).add(fresnelValue.mul(0.6)).mul(opacityValue);
+
+    // Create MeshStandardNodeMaterial with TSL nodes
+    const material = new MeshStandardNodeMaterial();
+    material.colorNode = colorWithIridescence;
+    material.opacityNode = alpha;
+    material.transparent = true;
+    material.side = THREE.DoubleSide;
+    material.depthWrite = false;
+
+    return material;
   }
 
   /**