Function resizeCanvasAndConfigure

examples/million-points/main.ts:348–389

()

   * Clamps to maxTextureDimension2D to avoid WebGPU validation errors on large/zoomed viewports.
   */
  const resizeCanvasAndConfigure = (): void => {
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;

    const maxDimension = gpuContext?.device?.limits.maxTextureDimension2D ?? 8192;
    const width = Math.min(maxDimension, Math.max(1, Math.round(rect.width * dpr)));
    const height = Math.min(maxDimension, Math.max(1, Math.round(rect.height * dpr)));

    const sizeChanged = canvas.width !== width || canvas.height !== height;
    if (sizeChanged) {
      canvas.width = width;
      canvas.height = height;
    }

    const device = gpuContext?.device;
    const canvasContext = gpuContext?.canvasContext;
    const preferredFormat = gpuContext?.preferredFormat;

    if (!device || !canvasContext || !preferredFormat) return;

    const shouldConfigure =
      sizeChanged ||
      !lastConfigured ||
      lastConfigured.width !== canvas.width ||
      lastConfigured.height !== canvas.height ||
      lastConfigured.format !== preferredFormat;

    if (!shouldConfigure) return;

    canvasContext.configure({
      device,
      format: preferredFormat,
      alphaMode: 'opaque',
    });
    lastConfigured = { width: canvas.width, height: canvas.height, format: preferredFormat };

    if (coordinator && coordinatorTargetFormat !== preferredFormat) {
      // Recreate coordinator through the shared helper so we don't leak subscriptions/slider bindings.
      coordinatorTargetFormat = preferredFormat;
      recreateCoordinator();
    }
  };

  const recreateCoordinator = (): void => {
    if (!gpuContext) return;