@pretty-chitty/core 1.1.1

package/src/library/hooks/useWebGlRenderer.tsx

@@ -0,0 +1,227 @@
+import React, { useContext, createContext, ReactNode, useEffect, useState } from "react";
+import { WebGLRenderer, Vector2 } from "three";
+import {
+  EffectComposer,
+  IDBasedOutlinePass,
+  OutputPass,
+  RenderPass,
+  Camera,
+  SceneWrapper,
+  DepthVisualizationPass,
+} from "../rendering/outline";
+import { useGameTheme } from "./useGameTheme";
+import { GameTheme } from "../game/GameTheme";
+
+interface ComposerEntry {
+  composer: EffectComposer;
+  renderPass: RenderPass;
+  outlinePass: IDBasedOutlinePass;
+  outputPass: OutputPass;
+  referenceCount: number;
+  lastUsed: number;
+}
+
+class WebGLRendererWrapper {
+  public referenceCount = 0;
+  private renderer: WebGLRenderer;
+  private composerPool = new Map<string, ComposerEntry>();
+  private memoryExtension: any;
+  private currentWidth = 0;
+  private currentHeight = 0;
+  public pixelRatio = Math.max(1.5, typeof window !== "undefined" ? window.devicePixelRatio : 1.5);
+  private maxComposers = 8;
+
+  constructor() {
+    this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
+
+    // Check if WebGL context is available
+    if (!this.renderer.getContext()) {
+      throw new Error("WebGL context is not available");
+    }
+
+    // Get memory extension for GPU memory monitoring
+    const gl = this.renderer.getContext();
+    this.memoryExtension = gl.getExtension("WEBGL_debug_renderer_info");
+
+    this.renderer.setPixelRatio(this.pixelRatio);
+    this.renderer.shadowMap.enabled = true;
+    this.renderer.setClearColor(0xffffff, 1.0);
+
+    // Enable scissor test for partial rendering
+    this.renderer.setScissorTest(true);
+  }
+
+  private evictLeastRecentlyUsedComposer() {
+    let oldestKey: string | null = null;
+    let oldestTime = Date.now();
+
+    for (const [key, entry] of this.composerPool.entries()) {
+      if (entry.referenceCount === 0 && entry.lastUsed < oldestTime) {
+        oldestTime = entry.lastUsed;
+        oldestKey = key;
+      }
+    }
+
+    if (oldestKey) {
+      const entry = this.composerPool.get(oldestKey)!;
+      entry.composer.dispose();
+      entry.outlinePass.dispose();
+      this.composerPool.delete(oldestKey);
+    }
+  }
+
+  private getOrCreateComposer(width: number, height: number, transparent: boolean, theme: GameTheme): ComposerEntry {
+    const key = `${width}_${height}_${transparent}`;
+    let entry = this.composerPool.get(key);
+
+    if (!entry) {
+      // If we're at capacity, evict the least recently used composer
+      if (this.composerPool.size >= this.maxComposers) {
+        this.evictLeastRecentlyUsedComposer();
+      }
+
+      const composer = new EffectComposer(this.renderer, width, height);
+      const renderPass = new RenderPass();
+      const outlinePass = new IDBasedOutlinePass(new Vector2(width, height), this.pixelRatio);
+      const outputPass = new OutputPass();
+
+      // Configure transparency
+      if (transparent) {
+        renderPass.clearColor = 0x000000;
+        renderPass.clearAlpha = 0;
+        renderPass.clearDepth = true;
+      }
+
+      // Configure outline pass
+      outlinePass.edgeStrength = theme.chitOutlineStrength;
+      outlinePass.edgeThickness = theme.chitOutlineWidth * this.pixelRatio;
+      // outlinePass.debugShowIDDepth = true; // Uncomment to show ID depth buffer
+      // outlinePass.debugShowDepthDiff = true; // Uncomment to show depth difference visualization
+
+      const depthPass = new DepthVisualizationPass();
+      depthPass.renderToScreen = false;
+
+      // renderPass.needsSwap = true;
+
+      composer.addPass(renderPass);
+      // composer.addPass(depthPass); // Uncomment to show scene depth buffer
+      composer.addPass(outlinePass);
+      composer.addPass(outputPass);
+
+      entry = {
+        composer,
+        renderPass,
+        outlinePass,
+        outputPass,
+        referenceCount: 0,
+        lastUsed: Date.now(),
+      };
+
+      this.composerPool.set(key, entry);
+    }
+
+    entry.lastUsed = Date.now();
+    return entry;
+  }
+
+  private ensureRendererSize(targetWidth: number, targetHeight: number) {
+    if (targetWidth > this.currentWidth || targetHeight > this.currentHeight) {
+      this.currentWidth = Math.max(this.currentWidth, targetWidth);
+      this.currentHeight = Math.max(this.currentHeight, targetHeight);
+      this.renderer.setSize(this.currentWidth, this.currentHeight);
+    }
+  }
+
+  render(sceneWrapper: SceneWrapper, camera: Camera, context2d: CanvasRenderingContext2D, theme: GameTheme) {
+    const canvas = context2d.canvas;
+    const width = Math.floor(canvas.width / this.pixelRatio);
+    const height = Math.floor(canvas.height / this.pixelRatio);
+    const targetWidth = Math.ceil(width * this.pixelRatio);
+    const targetHeight = Math.ceil(height * this.pixelRatio);
+
+    // Ensure renderer can accommodate this size
+    this.ensureRendererSize(width, height);
+
+    // Get or create appropriate composer
+    const transparent = true; // Always use transparent for composition
+    const entry = this.getOrCreateComposer(width, height, transparent, theme);
+
+    entry.referenceCount++;
+
+    try {
+      // Set scissor to render only to target region
+      this.renderer.setScissor(0, 0, targetWidth, targetHeight);
+      this.renderer.setViewport(0, 0, width, height);
+
+      // Render using the composer
+      entry.composer.render(sceneWrapper, camera);
+
+      // Copy the rendered result to the 2D canvas
+      const webglCanvas = this.renderer.domElement;
+      // context2d.save();
+      // context2d.scale(1 / this.pixelRatio, 1 / this.pixelRatio);
+      context2d.drawImage(
+        webglCanvas,
+        0,
+        webglCanvas.height - targetHeight, // Invert Y axis
+        targetWidth,
+        targetHeight, // Source width, height
+        0,
+        0, // Dest x, y
+        targetWidth,
+        targetHeight, // Dest width, height
+      );
+      // context2d.restore();
+    } finally {
+      entry.referenceCount--;
+    }
+  }
+
+  updateTheme(theme: GameTheme) {
+    // Update all existing composers with new theme settings
+    for (const entry of this.composerPool.values()) {
+      entry.outlinePass.edgeStrength = theme.chitOutlineStrength;
+      entry.outlinePass.edgeThickness = theme.chitOutlineWidth;
+    }
+  }
+
+  getGPUMemoryInfo() {
+    const gl = this.renderer.getContext();
+    const info = this.renderer.info;
+
+    return {
+      geometries: info.memory.geometries,
+      textures: info.memory.textures,
+      programs: info.programs?.length || 0,
+      calls: info.render.calls,
+      triangles: info.render.triangles,
+      points: info.render.points,
+      lines: info.render.lines,
+      frame: info.render.frame,
+      composerPoolSize: this.composerPool.size,
+      rendererSize: `${this.currentWidth}x${this.currentHeight}`,
+    };
+  }
+
+  dispose() {
+    // Dispose all composers
+    for (const entry of this.composerPool.values()) {
+      entry.composer.dispose();
+      entry.outlinePass.dispose();
+    }
+    this.composerPool.clear();
+
+    // Dispose renderer
+    this.renderer.dispose();
+  }
+}
+
+let _wrapper: WebGLRendererWrapper | undefined = undefined;
+export function useWebGlRenderer(): WebGLRendererWrapper {
+  const theme = useGameTheme();
+  if (!_wrapper) {
+    _wrapper = new WebGLRendererWrapper();
+    _wrapper.updateTheme(theme);
+  }
+  return _wrapper;
+}

package/src/library/index.ts

@@ -0,0 +1,116 @@
+/** @group Core Game Elements */
+export type { Game } from "./game/Game";
+
+// NOTE: must be before Turn! or circular dependency!
+/** @group Chits */
+export { Chit } from "./game/Chit";
+
+/** @group Core Game Elements */
+export { Turn } from "./game/Turn";
+/** @group Core Game Elements */
+export { Pick, ButtonPick, ChitPick } from "./game/Pick";
+/** @group Core Game Elements */
+export { GameTheme } from "./game/GameTheme";
+/** @group Chits */
+export { PlayerChit } from "./game/PlayerChit";
+/** @group Chits */
+export { RootChit } from "./game/RootChit";
+/** @group Chits */
+export { SparkChit, BagSparkChit } from "./game/SparkChit";
+/** @group Chits */
+export { DropdownChit } from "./game/DropdownChit";
+/** @group Chits */
+export { GameDeckChit } from "./game/GameDeckChit";
+/** @group Chits */
+export { GameBagChit } from "./game/GameBagChit";
+/** @group Chits */
+export { DiceChit } from "./utilities/Dice";
+
+/** @group Chit Annotations */
+export { OrderedOutlet } from "./game/OrderedOutlet";
+/** @group Chit Annotations */
+export { ChildOutlet, NonEditable, Ordered } from "./utilities/Annotations";
+
+/** @group Buttons */
+export { GameButton, DynamicGameButton, ToggleGalleryButton } from "./game/GameButton";
+
+/** @group 2D Rendering */
+export { ParameterizedCanvas } from "./utilities/ParameterizedCanvas";
+/** @group 2D Rendering */
+export { StaticImage } from "./utilities/StaticImage";
+/** @group 2D Rendering */
+export * as ReactCanvas from "./utilities/CanvasStack/ReactCanvas";
+/** @group 2D Rendering */
+export { IconCanvas } from "./utilities/CanvasStack/IconCanvas";
+
+/** @group 3D Rendering */
+export { CameraSpec } from "./rendering/CameraSpec";
+/** @group 3D Rendering */
+export { ChitRenderSpec, OwnerOriginPosition } from "./rendering/ChitRenderSpec";
+/** @group 3D Rendering */
+export { HighlightSpec } from "./rendering/HighlightSpec";
+/** @group 3D Rendering */
+export { LightSpec, Light } from "./rendering/LightSpec";
+/** @group 3D Rendering */
+export { Splay } from "./rendering/Splay";
+
+/** @group Utilities */
+export { extrudeSVGToGeometry } from "./utilities/SvgExtruder";
+/** @group Utilities */
+export { CardMesh } from "./utilities/CardMesh";
+
+//
+// Supporting types - less prominent but still documented
+//
+/** @group Supporting Types */
+export type { ButtonCallback } from "./game/GameButton";
+/** @group Supporting Types */
+export type { IChitLibrary, IButtonLibrary, ICanvasLibrary } from "./game/Game";
+/** @group Supporting Types */
+export type { HiddenPropertySerializationRule, PanelTab } from "./game/Chit";
+/** @group Supporting Types */
+export type { GameResult } from "./game/Game";
+/** @group Supporting Types */
+export type { Stage } from "./game/GameDeckChit";
+/** @group Supporting Types */
+export { PlayerInfo } from "./game/PlayerInfo";
+/** @group Supporting Types */
+export type { IPlayerInfo } from "./game/PlayerInfo";
+/** @group Supporting Types */
+export { MatchViewer } from "./components/MatchViewer";
+/** @group Supporting Types */
+export { ClientTrustMatchViewer } from "./components/ClientTrustMatchViewer";
+/** @group Supporting Types */
+export type { BottomBarButtonIcon } from "./components/BottomBarButton";
+/** @group Supporting Types */
+export { GameDesigner } from "./components/GameDesigner";
+/** @group Supporting Types */
+export type { PanelLayoutResult } from "./utilities/LayoutHelper";
+/** @group Supporting Types */
+export type { Picks } from "./game/Turn";
+/** @group Supporting Types */
+export type { DefaultProps } from "./utilities/CanvasStack/ReactCanvas";
+/** @group Supporting Types */
+export type {
+  ImageSpec,
+  Bounds,
+  ImageColorSpec,
+  ImageFileInfo,
+  ImageOptions,
+  RenderCallback,
+  GetImage,
+} from "./utilities/CanvasStack/CanvasOperations";
+/** @group Supporting Types */
+export type { IUpdatingCanvas } from "./utilities/IUpdatingCanvas";
+/** @group Supporting Types */
+export type { IconMap } from "./utilities/CanvasStack/RichTextRenderer";
+/** @group Supporting Types */
+export type { StaticImageOptions } from "./utilities/StaticImage";
+/** @group Supporting Types */
+export type { SplayCounterOptions } from "./rendering/SplayCounter";
+/** @group Supporting Types */
+export type { ExtrudeFromSVGOptions } from "./utilities/SvgExtruder";
+/** @group Supporting Types */
+export type { LayoutNode, PanelNode, ContainerNode, CollapsedNode, LayoutDirection } from "./utilities/LayoutHelper";
+/** @group Supporting Types */
+export { ImageResult, ImageCache } from "./utilities/CanvasStack/ImageCache";

package/src/library/rendering/CameraSpec.ts

@@ -0,0 +1,25 @@
+// TODO: Add light that is attached to camera?
+
+export class CameraSpec {
+  public maxZoom: number = 5;
+  public targetFov: number = 45;
+  public horizontalRadiansRotation: number = 0;
+  public verticalRadiansRotation: number = -0.5;
+
+  /**
+   * Pixel-based per-side paddings only (preferred).
+   * These specify absolute pixel margins to leave around the content when framing.
+   * Example: paddingLeftPx = 20 means leave 20px on the left side.
+   *
+   * If all are zero, no padding is applied.
+   */
+  public paddingTop: number = 20;
+  public extraPaddingTop: number = 0;
+  public paddingBottom: number = 20;
+  public paddingLeft: number = 20;
+  public paddingRight: number = 20;
+
+  public offsetSpeed: number = 250;
+  public minCameraDistance: number = 5;
+  public maximumCameraAnimationDuration: number = 750;
+}