@pretty-chitty/core 1.1.1

package/src/library/rendering/outline/passes/DebugIDMappingPass.ts

@@ -0,0 +1,154 @@
+import {
+  ShaderMaterial,
+  WebGLRenderer,
+  WebGLRenderTarget,
+  Vector2,
+  Color,
+} from "three";
+import { Pass } from "../types";
+import { FullScreenQuad } from "../FullScreenQuad";
+
+export class DebugIDMappingPass extends Pass {
+  debugMaterial: ShaderMaterial;
+  private fsQuad: FullScreenQuad;
+
+  private selectedIDs = new Set<number>();
+
+  clear = true;
+  needsSwap = false;
+
+  constructor() {
+    super();
+    this.debugMaterial = this.createDebugMaterial();
+    this.fsQuad = new FullScreenQuad(this.debugMaterial);
+  }
+
+  setIDTexture(texture: any): void {
+    this.debugMaterial.uniforms["idTexture"].value = texture;
+  }
+
+  setTextureSize(width: number, height: number): void {
+    (this.debugMaterial.uniforms["texSize"].value as Vector2).set(width, height);
+  }
+
+  setOutliningMeshes(outliningMeshes: Array<{id: number, color: Color}>): void {
+    this.selectedIDs.clear();
+
+    // Store ID to color mapping
+    const maxMeshes = 64;
+    const idColors = new Float32Array(maxMeshes * 3); // RGB for each mesh
+    const idList = new Float32Array(maxMeshes * 3); // ID encoded as RGB for each mesh
+
+    let index = 0;
+    for (const mesh of outliningMeshes) {
+      if (index >= maxMeshes) break;
+
+      this.selectedIDs.add(mesh.id);
+
+      // Store the outline color for this mesh
+      idColors[index * 3] = mesh.color.r;
+      idColors[index * 3 + 1] = mesh.color.g;
+      idColors[index * 3 + 2] = mesh.color.b;
+
+      // Store the ID encoded as RGB
+      const r = ((mesh.id >> 16) & 0xff) / 255.0;
+      const g = ((mesh.id >> 8) & 0xff) / 255.0;
+      const b = (mesh.id & 0xff) / 255.0;
+
+      idList[index * 3] = r;
+      idList[index * 3 + 1] = g;
+      idList[index * 3 + 2] = b;
+
+      index++;
+    }
+
+    this.debugMaterial.uniforms["meshOutlineColors"].value = idColors;
+    this.debugMaterial.uniforms["meshIDColors"].value = idList;
+    this.debugMaterial.uniforms["numOutlineMeshes"].value = Math.min(outliningMeshes.length, maxMeshes);
+  }
+
+  render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget): void {
+    renderer.setRenderTarget(writeBuffer);
+    if (this.clear) renderer.clear();
+    this.fsQuad.render(renderer);
+  }
+
+  private createDebugMaterial(): ShaderMaterial {
+    return new ShaderMaterial({
+      uniforms: {
+        idTexture: { value: null },
+        texSize: { value: new Vector2(0.5, 0.5) },
+        meshOutlineColors: { value: new Float32Array(64 * 3) }, // RGB color for each outlined mesh
+        meshIDColors: { value: new Float32Array(64 * 3) }, // ID encoded as RGB for each outlined mesh
+        numOutlineMeshes: { value: 0 },
+      },
+      vertexShader: `varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+      fragmentShader: `
+        uniform sampler2D idTexture;
+        uniform vec2 texSize;
+        uniform float[192] meshOutlineColors; // 64 * 3 (RGB outline colors)
+        uniform float[192] meshIDColors; // 64 * 3 (RGB encoded IDs)
+        uniform int numOutlineMeshes;
+        varying vec2 vUv;
+
+        // Compare two RGB colors (object IDs) by rounding to nearest byte value
+        // This handles precision loss from reduced color depth devices (e.g., 6-bit displays)
+        bool colorsMatch(vec3 color1, vec3 color2) {
+          // Round both colors to nearest byte values
+          vec3 c1 = floor(color1 * 255.0 + 0.5);
+          vec3 c2 = floor(color2 * 255.0 + 0.5);
+          return c1.r == c2.r && c1.g == c2.g && c1.b == c2.b;
+        }
+
+        // Check if a color represents background (black/near-black)
+        bool isBackground(vec3 color) {
+          return color.r < 0.01 && color.g < 0.01 && color.b < 0.01;
+        }
+
+        // Find the outline color for a given mesh ID color, returns vec4(outlineColor, 1.0) or vec4(0,0,0,0) if not outlined
+        vec4 getOutlineColor(vec3 idColor) {
+          if (isBackground(idColor)) return vec4(0.0, 0.0, 0.0, 0.0);
+
+          for (int i = 0; i < numOutlineMeshes && i < 64; i++) {
+            vec3 meshIDColor = vec3(
+              meshIDColors[i * 3],
+              meshIDColors[i * 3 + 1],
+              meshIDColors[i * 3 + 2]
+            );
+
+            if (colorsMatch(idColor, meshIDColor)) {
+              vec3 outlineColor = vec3(
+                meshOutlineColors[i * 3],
+                meshOutlineColors[i * 3 + 1],
+                meshOutlineColors[i * 3 + 2]
+              );
+              return vec4(outlineColor, 1.0);
+            }
+          }
+          return vec4(0.0, 0.0, 0.0, 0.0);
+        }
+
+        void main() {
+          // Sample the ID texture - this now contains outline colors directly
+          vec4 outlineColor = texture2D(idTexture, vUv);
+
+          if (isBackground(outlineColor.rgb)) {
+            // Show black for background
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+          } else {
+            // Show the outline color directly
+            gl_FragColor = vec4(outlineColor.rgb, 1.0);
+          }
+        }`,
+    });
+  }
+
+  dispose(): void {
+    this.debugMaterial.dispose();
+    this.fsQuad.dispose();
+  }
+}

package/src/library/rendering/outline/passes/DepthOcclusionPass.ts

@@ -0,0 +1,106 @@
+import { ShaderMaterial, WebGLRenderer, WebGLRenderTarget } from "three";
+import { Pass } from "../types";
+import { FullScreenQuad } from "../FullScreenQuad";
+
+/**
+ * DepthOcclusionPass - Filters input buffer based on depth comparison
+ *
+ * Takes an input buffer (e.g., from IDBasedOutlinePass edge detection) and
+ * compares its depth values against the original scene's depth buffer.
+ * Clears pixels where the original scene is in front (occluding the input).
+ */
+export class DepthOcclusionPass extends Pass {
+  private material: ShaderMaterial;
+  private fsQuad: FullScreenQuad;
+
+  clear = true;
+  needsSwap = false;
+
+  constructor() {
+    super();
+
+    this.material = this.createMaterial();
+    this.fsQuad = new FullScreenQuad(this.material);
+  }
+
+  setInputTexture(texture: any): void {
+    this.material.uniforms["inputTexture"].value = texture;
+  }
+
+  setIDDepthTexture(depthTexture: any): void {
+    this.material.uniforms["idDepthTexture"].value = depthTexture;
+  }
+
+  setSceneDepthTexture(depthTexture: any): void {
+    this.material.uniforms["sceneDepthTexture"].value = depthTexture;
+  }
+
+  setDepthTolerance(tolerance: number): void {
+    this.material.uniforms["depthTolerance"].value = tolerance;
+  }
+
+  render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget): void {
+    renderer.setRenderTarget(writeBuffer);
+    if (this.clear) renderer.clear();
+    this.fsQuad.render(renderer);
+  }
+
+  private createMaterial(): ShaderMaterial {
+    return new ShaderMaterial({
+      uniforms: {
+        inputTexture: { value: null },
+        idDepthTexture: { value: null },
+        sceneDepthTexture: { value: null },
+        depthTolerance: { value: 0.0001 },
+      },
+      vertexShader: `
+        varying vec2 vUv;
+
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+      fragmentShader: `
+        uniform sampler2D inputTexture;
+        uniform sampler2D idDepthTexture;
+        uniform sampler2D sceneDepthTexture;
+        uniform float depthTolerance;
+        varying vec2 vUv;
+
+        void main() {
+          // Sample the input texture (edge detection results)
+          vec4 inputColor = texture2D(inputTexture, vUv);
+
+          // If input is transparent, output transparent
+          if (inputColor.a < 0.01) {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+            return;
+          }
+
+          // Sample depth values
+          float idDepth = texture2D(idDepthTexture, vUv).r;
+          float sceneDepth = texture2D(sceneDepthTexture, vUv).r;
+
+          // If scene depth is in front (less than) ID depth, the outline is occluded
+          // Clear the pixel by outputting transparent
+          if (sceneDepth < idDepth - depthTolerance) {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+            return;
+          }
+
+          // Otherwise, pass through the input color
+          gl_FragColor = inputColor;
+        }
+      `,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+    });
+  }
+
+  dispose(): void {
+    this.material.dispose();
+    this.fsQuad.dispose();
+  }
+}

package/src/library/rendering/outline/passes/InterMeshEdgeDetectionPass.ts

@@ -0,0 +1,244 @@
+import {
+  ShaderMaterial,
+  WebGLRenderer,
+  WebGLRenderTarget,
+  Vector2,
+  Vector3,
+  Color,
+  DataTexture,
+  RGBAFormat,
+  FloatType,
+  NearestFilter,
+} from "three";
+import { Pass } from "../types";
+import { FullScreenQuad } from "../FullScreenQuad";
+
+export enum EdgeMode {
+  SELECTED_ONLY = "selected_only", // Only edges around selected objects (current behavior)
+  ALL_MESHES = "all_meshes", // Edges between any different mesh IDs
+  MESH_BOUNDARIES = "mesh_boundaries", // Edges between meshes and background
+  SELECTED_AND_BOUNDARIES = "selected_and_boundaries", // Both selected outlines and mesh boundaries
+}
+
+export class InterMeshEdgeDetectionPass extends Pass {
+  edgeDetectionMaterial: ShaderMaterial;
+  private fsQuad: FullScreenQuad;
+
+  // Edge filtering
+  backgroundThreshold = 0.01; // RGB threshold to consider a pixel as background
+
+  private selectedIDs = new Set<number>();
+  private lookupTexture: DataTexture;
+
+  clear = true;
+  needsSwap = false;
+
+  constructor() {
+    super();
+
+    // Create lookup texture (256x256 to handle all possible IDs 0-65535)
+    const textureSize = 256;
+    const textureData = new Float32Array(textureSize * textureSize * 4); // RGBA
+    this.lookupTexture = new DataTexture(textureData, textureSize, textureSize, RGBAFormat, FloatType);
+    this.lookupTexture.minFilter = NearestFilter;
+    this.lookupTexture.magFilter = NearestFilter;
+    this.lookupTexture.needsUpdate = true;
+
+    this.edgeDetectionMaterial = this.createEdgeDetectionMaterial();
+    this.fsQuad = new FullScreenQuad(this.edgeDetectionMaterial);
+  }
+
+  setIDTexture(texture: any): void {
+    this.edgeDetectionMaterial.uniforms["idTexture"].value = texture;
+  }
+
+  setIDDepthTexture(depthTexture: any): void {
+    this.edgeDetectionMaterial.uniforms["idDepthTexture"].value = depthTexture;
+  }
+
+  setTextureSize(width: number, height: number): void {
+    (this.edgeDetectionMaterial.uniforms["texSize"].value as Vector2).set(width, height);
+  }
+
+  setThickness(thickness: number): void {
+    this.edgeDetectionMaterial.uniforms["thickness"].value = thickness;
+  }
+
+  setStrength(strength: number): void {
+    this.edgeDetectionMaterial.uniforms["strength"].value = strength;
+  }
+
+  setStepSize(stepSize: number): void {
+    this.edgeDetectionMaterial.uniforms["stepSize"].value = stepSize;
+  }
+
+
+  setOutliningMeshes(outliningMeshes: Array<{ id: number; color: Color }>): void {
+    this.selectedIDs.clear();
+
+    // Clear lookup texture
+    const textureData = this.lookupTexture.image.data as unknown as Float32Array;
+    textureData.fill(0);
+
+    // Populate lookup texture with ID->Color mappings
+    for (const mesh of outliningMeshes) {
+      this.selectedIDs.add(mesh.id);
+
+      // Convert ID to texture coordinates
+      const id = mesh.id;
+      const x = id % 256;
+      const y = Math.floor(id / 256);
+      const index = (y * 256 + x) * 4;
+
+      // Store outline color at this position
+      textureData[index] = mesh.color.r; // R
+      textureData[index + 1] = mesh.color.g; // G
+      textureData[index + 2] = mesh.color.b; // B
+      textureData[index + 3] = 1.0; // A (indicates valid entry)
+    }
+
+    this.lookupTexture.needsUpdate = true;
+  }
+
+  render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget): void {
+    // Update uniforms that still exist
+    this.edgeDetectionMaterial.uniforms["backgroundThreshold"].value = this.backgroundThreshold;
+
+    renderer.setRenderTarget(writeBuffer);
+    if (this.clear) renderer.clear();
+    this.fsQuad.render(renderer);
+  }
+
+  private createEdgeDetectionMaterial(): ShaderMaterial {
+    return new ShaderMaterial({
+      uniforms: {
+        idTexture: { value: null },
+        idDepthTexture: { value: null },
+        texSize: { value: new Vector2(0.5, 0.5) },
+        backgroundThreshold: { value: 0.01 },
+        lookupTexture: { value: this.lookupTexture },
+        thickness: { value: 4.0 },
+        strength: { value: 1.0 },
+        stepSize: { value: 1.0 },
+      },
+      vertexShader: `varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+      fragmentShader: `
+        uniform sampler2D idTexture;
+        uniform sampler2D idDepthTexture;
+        uniform vec2 texSize;
+        uniform float backgroundThreshold;
+        uniform sampler2D lookupTexture;
+        uniform float thickness;
+        uniform float strength;
+        uniform float stepSize;
+        varying vec2 vUv;
+
+        // Compare two RGB colors (object IDs) with tolerance
+        bool colorsMatch(vec3 color1, vec3 color2) {
+          vec3 diff = abs(color1 - color2);
+          return diff.r < 0.001 && diff.g < 0.001 && diff.b < 0.001;
+        }
+
+        // Check if a color represents background (black/near-black)
+        bool isBackground(vec3 color) {
+          return color.r < backgroundThreshold && color.g < backgroundThreshold && color.b < backgroundThreshold;
+        }
+
+        // Safely sample texture, treating out-of-bounds as background
+        vec4 sampleTextureClampToBackground(sampler2D tex, vec2 uv) {
+          if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+            return vec4(0.0, 0.0, 0.0, 0.0); // Background
+          }
+          return texture2D(tex, uv);
+        }
+
+        // Decode ID from RGB and lookup outline color in texture
+        vec4 getOutlineColor(vec3 encodedIdColor) {
+          if (isBackground(encodedIdColor)) {
+            return vec4(0.0, 0.0, 0.0, 0.0);
+          }
+
+          // Decode ID from RGB with rounding to handle precision loss from reduced color depth devices
+          // Round to nearest integer byte value to handle quantization errors
+          float r = floor(encodedIdColor.r * 255.0 + 0.5);
+          float g = floor(encodedIdColor.g * 255.0 + 0.5);
+          float b = floor(encodedIdColor.b * 255.0 + 0.5);
+          float id = r * 65536.0 + g * 256.0 + b;
+
+          // Convert ID to texture coordinates
+          float x = mod(id, 256.0) / 256.0;
+          float y = floor(id / 256.0) / 256.0;
+
+          // Lookup outline color
+          vec4 outlineColor = texture2D(lookupTexture, vec2(x, y));
+
+          // Return color if valid (alpha > 0), otherwise transparent
+          if (outlineColor.a > 0.5) {
+            return vec4(outlineColor.rgb, 1.0);
+          }
+          return vec4(0.0, 0.0, 0.0, 0.0);
+        }
+
+
+        void main() {
+          vec2 lowResInvSize = 1.0 / texSize;
+
+          // Sample the center pixel - MUST belong to an outlined mesh
+          vec4 center = texture2D(idTexture, vUv);
+          vec4 centerOutlineColor = getOutlineColor(center.rgb);
+
+          // Only draw outlines INSIDE meshes that have outline colors
+          if (centerOutlineColor.a < 0.5) {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+            return;
+          }
+
+          // Check neighbors to see if we're near an edge
+          float edgeDistance = 1000.0; // Very far away initially
+
+          float checkRadius = max(1.0, thickness);
+          float step = max(1.0, stepSize);
+          for (float x = -checkRadius; x <= checkRadius; x += step) {
+            for (float y = -checkRadius; y <= checkRadius; y += step) {
+              vec2 sampleUv = vUv + vec2(x, y) * lowResInvSize;
+              vec4 neighbor = texture2D(idTexture, sampleUv);
+
+              vec2 sampleUv2 = vUv + vec2(x*2.0, y*2.0) * lowResInvSize;
+              vec4 neighbor2 = texture2D(idTexture, sampleUv2);
+
+              // Edge detection: neighbor is different if colors don't match
+              if ((!colorsMatch(center.rgb, neighbor.rgb) &&
+                (!colorsMatch(center.rgb, neighbor2.rgb)))) {
+                float dist = length(vec2(x, y));
+                edgeDistance = min(edgeDistance, dist);
+              }
+            }
+          }
+
+          // Only draw if we're near an edge (inside the mesh)
+          if (edgeDistance < 1000.0) {
+            // Create thick outline with smooth falloff
+            float lineThickness = thickness + 0.5;
+            float alpha = 1.0 - smoothstep(0.5, lineThickness, edgeDistance);
+
+            if (alpha > 0.01) {
+              gl_FragColor = vec4(centerOutlineColor.rgb, alpha * strength);
+            } else {
+              gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+            }
+          } else {
+            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+          }
+        }`,
+    });
+  }
+
+  dispose(): void {
+    this.edgeDetectionMaterial.dispose();
+    this.fsQuad.dispose();
+  }
+}

package/src/library/rendering/outline/shaders.ts

@@ -0,0 +1,110 @@
+import type { IUniform } from "three";
+
+export const CopyShader = {
+  uniforms: {
+    tDiffuse: { value: null as any },
+    opacity: { value: 1.0 },
+  } as Record<string, IUniform>,
+
+  vertexShader: [
+    "varying vec2 vUv;",
+    "void main() {",
+    "vUv = uv;",
+    "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+    "}",
+  ].join("\n"),
+
+  fragmentShader: [
+    "uniform float opacity;",
+    "uniform sampler2D tDiffuse;",
+    "varying vec2 vUv;",
+    "void main() {",
+    "vec4 texel = texture2D( tDiffuse, vUv );",
+    "gl_FragColor = opacity * texel;",
+    "}",
+  ].join("\n"),
+} as const;
+
+export const OutputShader = {
+  name: "OutputShader",
+
+  uniforms: {
+    tDiffuse: { value: null },
+    toneMappingExposure: { value: 1 },
+  },
+
+  vertexShader: /* glsl */ `
+		precision highp float;
+
+		uniform mat4 modelViewMatrix;
+		uniform mat4 projectionMatrix;
+
+		attribute vec3 position;
+		attribute vec2 uv;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+  fragmentShader: /* glsl */ `
+
+		precision highp float;
+
+		uniform sampler2D tDiffuse;
+
+		#include <tonemapping_pars_fragment>
+		#include <colorspace_pars_fragment>
+
+		varying vec2 vUv;
+
+		void main() {
+
+			gl_FragColor = texture2D( tDiffuse, vUv );
+
+			// tone mapping
+
+			#ifdef LINEAR_TONE_MAPPING
+
+				gl_FragColor.rgb = LinearToneMapping( gl_FragColor.rgb );
+
+			#elif defined( REINHARD_TONE_MAPPING )
+
+				gl_FragColor.rgb = ReinhardToneMapping( gl_FragColor.rgb );
+
+			#elif defined( CINEON_TONE_MAPPING )
+
+				gl_FragColor.rgb = CineonToneMapping( gl_FragColor.rgb );
+
+			#elif defined( ACES_FILMIC_TONE_MAPPING )
+
+				gl_FragColor.rgb = ACESFilmicToneMapping( gl_FragColor.rgb );
+
+			#elif defined( AGX_TONE_MAPPING )
+
+				gl_FragColor.rgb = AgXToneMapping( gl_FragColor.rgb );
+
+			#elif defined( NEUTRAL_TONE_MAPPING )
+
+				gl_FragColor.rgb = NeutralToneMapping( gl_FragColor.rgb );
+
+			#elif defined( CUSTOM_TONE_MAPPING )
+
+				gl_FragColor.rgb = CustomToneMapping( gl_FragColor.rgb );
+
+			#endif
+
+			// color space
+
+			#ifdef SRGB_TRANSFER
+
+				gl_FragColor = sRGBTransferOETF( gl_FragColor );
+
+			#endif
+
+		}`,
+};

package/src/library/rendering/outline/types.ts

@@ -0,0 +1,25 @@
+import { PerspectiveCamera, type WebGLRenderer, type WebGLRenderTarget, type OrthographicCamera } from "three";
+import { SceneWrapper } from "./SceneWrapper";
+
+export type Camera = PerspectiveCamera | OrthographicCamera;
+
+export abstract class Pass {
+  enabled = true;
+  needsSwap = true;
+  clear = false;
+  renderToScreen = false;
+
+  sceneWrapper: SceneWrapper = new SceneWrapper();
+  camera: Camera = new PerspectiveCamera();
+
+  setSize(_width: number, _height: number): void {
+    // optional
+  }
+
+  abstract render(
+    renderer: WebGLRenderer,
+    writeBuffer: WebGLRenderTarget,
+    readBuffer: WebGLRenderTarget,
+    maskActive: boolean,
+  ): void;
+}