Function main

examples/grid-test/main.ts:15–202

* Grid Renderer Test Example * * This example demonstrates the grid renderer functionality with: * - Configurable horizontal and vertical line counts * - Proper coordinate transformation to clip space * - Real-time updates via interactive controls

()

 */

async function main() {
  // Get canvas element
  const canvas = document.getElementById('canvas') as HTMLCanvasElement;
  if (!canvas) {
    throw new Error('Canvas element not found');
  }

  // Get control elements
  const horizontalSlider = document.getElementById('horizontal') as HTMLInputElement;
  const verticalSlider = document.getElementById('vertical') as HTMLInputElement;
  const horizontalValue = document.getElementById('horizontal-value') as HTMLSpanElement;
  const verticalValue = document.getElementById('vertical-value') as HTMLSpanElement;

  if (!horizontalSlider || !verticalSlider || !horizontalValue || !verticalValue) {
    throw new Error('Control elements not found');
  }

  let gpuContext: Awaited<ReturnType<typeof initializeGPUContext>> | null = null;
  let animationFrameId: number | null = null;
  let gridRenderer: ReturnType<typeof createGridRenderer> | null = null;
  let xAxisRenderer: ReturnType<typeof createAxisRenderer> | null = null;
  let yAxisRenderer: ReturnType<typeof createAxisRenderer> | null = null;

  // Track current line counts
  let currentHorizontal = parseInt(horizontalSlider.value, 10);
  let currentVertical = parseInt(verticalSlider.value, 10);

  try {
    // Create and initialize GPU context
    const ctx = createGPUContext(canvas);
    gpuContext = await initializeGPUContext(ctx);
    const device = gpuContext.device;
    if (!device) {
      throw new Error('WebGPU device not available after GPUContext initialization.');
    }
    const gpuDevice: GPUDevice = device;

    // Create grid renderer (match pipeline format to configured canvas format)
    gridRenderer = createGridRenderer(gpuDevice, { targetFormat: gpuContext.preferredFormat ?? 'bgra8unorm' });

    // Calculate grid area (margins in CSS pixels)
    // Note: devicePixelRatio is required by GridArea interface and is used for CSS-to-device pixel conversion
    const gridArea: GridArea = {
      left: 60,
      right: 20,
      top: 40,
      bottom: 40,
      canvasWidth: canvas.width,
      canvasHeight: canvas.height,
      devicePixelRatio: gpuContext.devicePixelRatio,
    };

    // Create clip-space scales for axis ticks.
    // Note: scale.range() is clip-space [-1, 1] in this project.
    const dpr = gridArea.devicePixelRatio;
    const plotLeft = gridArea.left * dpr;
    const plotRight = gridArea.canvasWidth - gridArea.right * dpr;
    const plotTop = gridArea.top * dpr;