Function createHighlightRenderer

src/renderers/createHighlightRenderer.ts:62–203

(device: GPUDevice, options?: HighlightRendererOptions)

  0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];

export function createHighlightRenderer(device: GPUDevice, options?: HighlightRendererOptions): HighlightRenderer {
  let disposed = false;
  let visible = true;

  const targetFormat = options?.targetFormat ?? DEFAULT_TARGET_FORMAT;

  const bindGroupLayout = device.createBindGroupLayout({
    entries: [{ binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } }],
  });

  // Uniform layout (WGSL):
  // center.xy, radius, thickness, color.rgba, outlineColor.rgba
  // = 12 floats = 48 bytes
  const uniformBuffer = createUniformBuffer(device, 48, { label: 'highlightRenderer/uniforms' });

  const bindGroup = device.createBindGroup({
    layout: bindGroupLayout,
    entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
  });

  const pipeline = createRenderPipeline(device, {
    label: 'highlightRenderer/pipeline',
    bindGroupLayouts: [bindGroupLayout],
    vertex: { code: highlightWgsl, label: 'highlight.wgsl' },
    fragment: {
      code: highlightWgsl,
      label: 'highlight.wgsl',
      formats: targetFormat,
      blend: {
        color: { operation: 'add', srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha' },
        alpha: { operation: 'add', srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
      },
    },
    primitive: { topology: 'triangle-list', cullMode: 'none' },
    multisample: { count: 1 },
  });

  let lastCanvasWidth = 0;
  let lastCanvasHeight = 0;
  let lastScissor = { x: 0, y: 0, w: 0, h: 0 };
  let hasPrepared = false;

  const assertNotDisposed = (): void => {
    if (disposed) throw new Error('HighlightRenderer is disposed.');
  };

  const prepare: HighlightRenderer['prepare'] = (point, cssColor, sizeCssPx) => {
    assertNotDisposed();

    if (!Number.isFinite(point.centerDeviceX) || !Number.isFinite(point.centerDeviceY)) {
      throw new Error('HighlightRenderer.prepare: point center must be finite.');
    }
    if (!Number.isFinite(point.canvasWidth) || !Number.isFinite(point.canvasHeight) || point.canvasWidth <= 0 || point.canvasHeight <= 0) {
      throw new Error('HighlightRenderer.prepare: canvasWidth/canvasHeight must be positive finite numbers.');
    }
    if (!isFiniteScissor(point.scissor)) {
      throw new Error('HighlightRenderer.prepare: scissor must be finite.');
    }