@pretty-chitty/core 1.1.1

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

@@ -0,0 +1,117 @@
+import { ShaderMaterial, UniformsUtils, WebGLRenderer, WebGLRenderTarget, IUniform } from "three";
+import { Pass } from "./types";
+import { FullScreenQuad } from "./FullScreenQuad";
+
+const DepthVisualizationShader = {
+  uniforms: {
+    tDepth: { value: null as any },
+    cameraNear: { value: 0.1 },
+    cameraFar: { value: 1000 },
+  } as Record<string, IUniform>,
+
+  vertexShader: [
+    "varying vec2 vUv;",
+    "void main() {",
+    "  vUv = uv;",
+    "  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+    "}",
+  ].join("\n"),
+
+  fragmentShader: [
+    "uniform sampler2D tDepth;",
+    "uniform float cameraNear;",
+    "uniform float cameraFar;",
+    "varying vec2 vUv;",
+    "",
+    "void main() {",
+    "  // Read raw depth value",
+    "  float rawDepth = texture2D( tDepth, vUv ).r;",
+    "  ",
+    "  // If no depth data (far plane)",
+    "  if ( rawDepth >= 0.9999 ) {",
+    "    gl_FragColor = vec4( 0.1, 0.1, 0.1, 1.0 ); // Dark gray for background",
+    "    return;",
+    "  }",
+    "  ",
+    "  // Convert from non-linear depth buffer to linear depth",
+    "  float z = rawDepth * 2.0 - 1.0; // Convert to NDC",
+    "  float linearDepth = ( 2.0 * cameraNear * cameraFar ) / ( cameraFar + cameraNear - z * ( cameraFar - cameraNear ) );",
+    "  ",
+    "  // Normalize linear depth to [0,1] range",
+    "  float normalizedDepth = ( linearDepth - cameraNear ) / ( cameraFar - cameraNear );",
+    "  normalizedDepth = clamp( normalizedDepth, 0.0, 1.0 );",
+    "  ",
+    "  // Create a nice grayscale visualization",
+    "  // Apply gamma curve to enhance contrast in mid-range",
+    "  float visualDepth = pow( normalizedDepth, 0.5 );",
+    "  ",
+    "  // Invert so near = bright, far = dark",
+    "  visualDepth = 1.0 - visualDepth;",
+    "  ",
+    "  gl_FragColor = vec4( vec3( visualDepth ), 1.0 );",
+    "}",
+  ].join("\n"),
+} as const;
+
+export class DepthVisualizationPass extends Pass {
+  material: ShaderMaterial;
+  fsQuad: FullScreenQuad;
+  uniforms: Record<string, IUniform>;
+
+  constructor() {
+    super();
+
+    this.uniforms = UniformsUtils.clone(DepthVisualizationShader.uniforms);
+    this.material = new ShaderMaterial({
+      uniforms: this.uniforms,
+      vertexShader: DepthVisualizationShader.vertexShader,
+      fragmentShader: DepthVisualizationShader.fragmentShader,
+      depthTest: false,
+      depthWrite: false,
+    });
+
+    this.fsQuad = new FullScreenQuad(this.material);
+    this.needsSwap = true;
+  }
+
+  render(
+    renderer: WebGLRenderer,
+    writeBuffer: WebGLRenderTarget,
+    readBuffer: WebGLRenderTarget,
+    _maskActive: boolean,
+  ): void {
+    // Set the depth texture from the read buffer
+    this.uniforms["tDepth"].value = readBuffer.depthTexture;
+
+    // Debug: Check if depth texture exists
+    if (!readBuffer.depthTexture) {
+      console.warn("DepthVisualizationPass: No depth texture found in readBuffer");
+    } else {
+      console.log(
+        "DepthVisualizationPass: Depth texture format:",
+        readBuffer.depthTexture.format,
+        "type:",
+        readBuffer.depthTexture.type,
+      );
+    }
+
+    // Set camera near/far from the camera used in rendering
+    this.uniforms["cameraNear"].value = this.camera.near;
+    this.uniforms["cameraFar"].value = this.camera.far;
+
+    console.log("DepthVisualizationPass: Camera near/far:", this.camera.near, this.camera.far);
+
+    if (this.renderToScreen) {
+      renderer.setRenderTarget(null);
+    } else {
+      renderer.setRenderTarget(writeBuffer);
+    }
+
+    this.fsQuad.render(renderer);
+  }
+
+  dispose(): void {
+    this.material.dispose();
+    this.fsQuad.dispose();
+  }
+}

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

@@ -0,0 +1,187 @@
+import {
+  WebGLRenderer,
+  WebGLRenderTarget,
+  LinearFilter,
+  RGBAFormat,
+  Vector2,
+  Clock,
+  Color,
+  DepthTexture,
+  UnsignedShortType,
+  FloatType,
+} from "three";
+import { Camera, Pass } from "./types";
+import { ShaderPass } from "./ShaderPass";
+import { CopyShader } from "./shaders";
+import { SceneWrapper } from "./SceneWrapper";
+
+type RTParams = ConstructorParameters<typeof WebGLRenderTarget>[2];
+
+let COUNTER = 0;
+export class EffectComposer {
+  private renderer: WebGLRenderer;
+
+  private _pixelRatio: number;
+  private _width: number;
+  private _height: number;
+
+  private _rtParams: RTParams;
+
+  renderTarget: WebGLRenderTarget;
+  renderTarget2: WebGLRenderTarget;
+
+  renderToScreen = true;
+  passes: Pass[] = [];
+
+  private copyPass: ShaderPass;
+  private clock = new Clock();
+
+  private textureId: string;
+
+  constructor(renderer: WebGLRenderer, width: number, height: number) {
+    this.renderer = renderer;
+
+    this.textureId = `composer${++COUNTER}`;
+
+    this._rtParams = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBAFormat,
+      stencilBuffer: false,
+      depthBuffer: true,
+      generateMipmaps: false,
+    };
+
+    this._pixelRatio = renderer.getPixelRatio();
+    this._width = width;
+    this._height = height;
+
+    const renderTarget = new WebGLRenderTarget(
+      Math.max(1, Math.floor(this._width * this._pixelRatio)),
+      Math.max(1, Math.floor(this._height * this._pixelRatio)),
+      this._rtParams,
+    );
+    renderTarget.texture.name = `EffectComposer.rt1.${this.textureId}`;
+    renderTarget.texture.generateMipmaps = false;
+
+    // Create and attach depth texture for outline pass access
+    renderTarget.depthTexture = new DepthTexture(
+      Math.max(1, Math.floor(this._width * this._pixelRatio)),
+      Math.max(1, Math.floor(this._height * this._pixelRatio)),
+    );
+    // renderTarget.depthTexture.type = FloatType;
+
+    this.renderTarget = renderTarget;
+
+    // Create second render target for ping-pong rendering
+    this.renderTarget2 = renderTarget.clone();
+    this.renderTarget2.texture.name = `EffectComposer.rt2.${this.textureId}`;
+    this.renderTarget2.texture.generateMipmaps = false;
+
+    // Create depth texture for second render target too
+    this.renderTarget2.depthTexture = new DepthTexture(
+      Math.max(1, Math.floor(this._width * this._pixelRatio)),
+      Math.max(1, Math.floor(this._height * this._pixelRatio)),
+    );
+    // this.renderTarget2.depthTexture.type = FloatType;
+
+    this.copyPass = new ShaderPass(CopyShader, this.textureId);
+  }
+
+  addPass(pass: Pass): void {
+    this.passes.push(pass);
+    pass.setSize(this._width, this._height);
+  }
+
+  private isLastEnabledPass(passIndex: number): boolean {
+    for (let i = passIndex + 1; i < this.passes.length; i++) {
+      if (this.passes[i].enabled) return false;
+    }
+    return true;
+  }
+
+  render(sceneWrapper: SceneWrapper, camera: Camera): void {
+    const composerStart = performance.now();
+
+    const currentRenderTarget = this.renderer.getRenderTarget();
+    const currentClearColor = this.renderer.getClearColor(new Color());
+    const currentClearAlpha = this.renderer.getClearAlpha();
+    const currentAutoClear = this.renderer.autoClear;
+
+    let readBuffer = this.renderTarget;
+    let writeBuffer = this.renderTarget2;
+
+    const passTimes: number[] = [];
+
+    for (let i = 0, il = this.passes.length; i < il; i++) {
+      const pass = this.passes[i];
+      if (!pass.enabled) continue;
+
+      const passStart = performance.now();
+
+      pass.sceneWrapper = sceneWrapper;
+      pass.camera = camera;
+      pass.renderToScreen = this.renderToScreen && this.isLastEnabledPass(i);
+      pass.render(this.renderer, writeBuffer, readBuffer, false);
+
+      const passTime = performance.now() - passStart;
+      passTimes.push(passTime);
+
+      // Swap buffers for next pass (ping-pong)
+      if (pass.needsSwap) {
+        const tmp = readBuffer;
+        readBuffer = writeBuffer;
+        writeBuffer = tmp;
+      }
+    }
+
+    this.renderer.setRenderTarget(currentRenderTarget);
+    this.renderer.setClearColor(currentClearColor, currentClearAlpha);
+    this.renderer.autoClear = currentAutoClear;
+
+    const totalComposerTime = performance.now() - composerStart;
+
+    // Log timing occasionally
+    if (Math.random() < 0.016) {
+      // ~1/60 chance
+      console.log(`EffectComposer Timing (${totalComposerTime.toFixed(2)}ms total):`);
+      passTimes.forEach((time, index) => {
+        const passName = this.passes.filter((p) => p.enabled)[index]?.constructor?.name || `Pass${index}`;
+        console.log(`  Pass ${index} (${passName}): ${time.toFixed(2)}ms`);
+      });
+    }
+  }
+
+  setSize(width: number, height: number): void {
+    this._width = Math.max(1, Math.floor(width));
+    this._height = Math.max(1, Math.floor(height));
+
+    const effectiveWidth = this._width * this._pixelRatio;
+    const effectiveHeight = this._height * this._pixelRatio;
+
+    this.renderTarget.setSize(effectiveWidth, effectiveHeight);
+    this.renderTarget2.setSize(effectiveWidth, effectiveHeight);
+
+    // Update depth texture size for both render targets
+    if (this.renderTarget.depthTexture) {
+      this.renderTarget.depthTexture.dispose();
+      this.renderTarget.depthTexture = new DepthTexture(effectiveWidth, effectiveHeight);
+      // this.renderTarget.depthTexture.type = FloatType;
+    }
+
+    if (this.renderTarget2.depthTexture) {
+      this.renderTarget2.depthTexture.dispose();
+      this.renderTarget2.depthTexture = new DepthTexture(effectiveWidth, effectiveHeight);
+      // this.renderTarget2.depthTexture.type = FloatType;
+    }
+
+    for (let i = 0; i < this.passes.length; i++) {
+      this.passes[i].setSize(effectiveWidth, effectiveHeight);
+    }
+  }
+
+  dispose() {
+    this.renderTarget.dispose();
+    this.renderTarget2.dispose();
+  }
+}

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

@@ -0,0 +1,32 @@
+import {
+  OrthographicCamera,
+  PlaneGeometry,
+  Mesh,
+  ShaderMaterial,
+  WebGLRenderer,
+} from "three";
+
+export class FullScreenQuad {
+  private static camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  private static geometry = new PlaneGeometry(2, 2);
+  private _mesh: Mesh;
+
+  constructor(material: ShaderMaterial | null) {
+    this._mesh = new Mesh(FullScreenQuad.geometry, material as any);
+  }
+
+  get material(): ShaderMaterial | null {
+    return this._mesh.material as ShaderMaterial | null;
+  }
+  set material(value: ShaderMaterial | null) {
+    this._mesh.material = value as any;
+  }
+
+  dispose(): void {
+    this._mesh.geometry.dispose();
+  }
+
+  render(renderer: WebGLRenderer): void {
+    renderer.render(this._mesh, FullScreenQuad.camera);
+  }
+}