image-studio/renderer/renderer.ts

import type { ImageDocument } from "@core/document";
import type { EditorState } from "@editor/state";
import { createDocumentReadIndex } from "@editor/document-indexes";
import { renderArtboard } from "./artboard";
import { createBrushPreviewRenderer } from "./brush-preview";
import { createCheckerboardRenderer } from "./checkerboard";
import { createImageTextureRenderer } from "./image-textures";
import { generationCandidatePreviewAssets, renderLayers } from "./layers";
import { renderSelectionOverlay } from "./selection";
import { renderTransformControls } from "./transform-controls";
import type { WebGlRendererContext } from "./types";
import { createAdjustmentPass } from "./adjustment-pass";
import { renderMaskShapePreview } from "./mask-shape-preview";

export type RenderFrame = {
  document: ImageDocument;
  editor: EditorState;
};

export type ImageRenderer = {
  render(frame: RenderFrame): void;
  dispose(): void;
};

export type RendererBackend = "webgl";

export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBackend = "webgl"): ImageRenderer {
  if (backend !== "webgl") {
    throw new Error(`Unsupported renderer backend: ${backend}`);
  }

  const context = canvas.getContext("webgl2");
  if (!context) {
    throw new Error("WebGL2 is not available");
  }

  const rendererContext: WebGlRendererContext = { gl: context, canvas };
  const checkerboardRenderer = createCheckerboardRenderer(rendererContext);
  const brushPreviewRenderer = createOptionalBrushPreviewRenderer(rendererContext);
  const adjustmentPass = createAdjustmentPass(rendererContext);
  let lastFrame: RenderFrame | undefined;
  let rerenderQueued = false;
  const imageTextureRenderer = createImageTextureRenderer(rendererContext, () => {
    if (!lastFrame || rerenderQueued) return;
    rerenderQueued = true;
    requestAnimationFrame(() => {
      rerenderQueued = false;
      if (lastFrame) renderer.render(lastFrame);
    });
  });

  const renderer: ImageRenderer = {
    render(frame) {
      lastFrame = frame;
      const { w, h } = frame.editor.viewport.size;

      if (canvas.width !== w) canvas.width = w;
      if (canvas.height !== h) canvas.height = h;

      context.viewport(0, 0, w, h);
      context.disable(context.SCISSOR_TEST);
      context.clearColor(0, 0, 0, 0);
      context.clear(context.COLOR_BUFFER_BIT);
      context.enable(context.SCISSOR_TEST);

      for (const artboard of frame.document.artboards) {
        if (artboard.visible) renderArtboard(rendererContext, artboard, frame.editor.viewport, checkerboardRenderer);
      }
      imageTextureRenderer.syncAssets([
        ...frame.document.assets,
        ...generationCandidatePreviewAssets(frame.editor),
        ...textTextureHandles(frame.document),
      ]);
      renderLayers(rendererContext, frame.document, frame.editor, imageTextureRenderer, adjustmentPass);

      if (!frame.editor.maskEdit) {
        renderSelectionOverlay(rendererContext, frame.document, frame.editor);
        renderTransformControls(rendererContext, frame.document, frame.editor);
      }
      brushPreviewRenderer?.render(frame.document, frame.editor);
      renderMaskShapePreview(rendererContext, frame.editor);

      context.disable(context.SCISSOR_TEST);
    },
    dispose() {
      checkerboardRenderer.dispose();
      imageTextureRenderer.dispose();
      adjustmentPass.dispose();
      brushPreviewRenderer?.dispose();
    },
  };

  return renderer;
}

function textTextureHandles(document: ImageDocument): Array<{ id: string }> {
  const index = createDocumentReadIndex(document);
  return [...index.layerById.values()]
    .filter((layer) => layer.type === "text")
    .map((layer) => ({ id: `text-render:${layer.id}` }));
}

function createOptionalBrushPreviewRenderer(context: WebGlRendererContext) {
  try {
    return createBrushPreviewRenderer(context);
  } catch {
    return undefined;
  }
}