perf(renderer): draw checkerboard with shader

renderer/renderer.ts

@@ -2,6 +2,7 @@ import type { ImageDocument } from "@core/document";
 import type { EditorState } from "@editor/state";
 import { renderArtboard } from "./artboard";
 import { createBrushPreviewRenderer } from "./brush-preview";
+import { createCheckerboardRenderer } from "./checkerboard";
 import { createImageTextureRenderer } from "./image-textures";
 import { renderLayers } from "./layers";
 import { renderSelectionOverlay } from "./selection";
@@ -31,6 +32,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
   }
 
   const rendererContext: WebGlRendererContext = { gl: context, canvas };
+  const checkerboardRenderer = createCheckerboardRenderer(rendererContext);
   const brushPreviewRenderer = createOptionalBrushPreviewRenderer(rendererContext);
   let lastFrame: RenderFrame | undefined;
   let rerenderQueued = false;
@@ -58,7 +60,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
       context.enable(context.SCISSOR_TEST);
 
       for (const artboard of frame.document.artboards) {
-        if (artboard.visible) renderArtboard(rendererContext, artboard, frame.editor.viewport);
+        if (artboard.visible) renderArtboard(rendererContext, artboard, frame.editor.viewport, checkerboardRenderer);
       }
       imageTextureRenderer.syncAssets(frame.document.assets);
       renderLayers(rendererContext, frame.document, frame.editor, imageTextureRenderer);
@@ -72,6 +74,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
       context.disable(context.SCISSOR_TEST);
     },
     dispose() {
+      checkerboardRenderer.dispose();
       imageTextureRenderer.dispose();
       brushPreviewRenderer?.dispose();
     },