feat(renderer): render image textures

renderer/renderer.ts

@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { EditorState } from "@editor/state";
 import { renderArtboard } from "./artboard";
+import { createImageTextureRenderer } from "./image-textures";
 import { renderLayers } from "./layers";
 import { renderSelectionOverlay } from "./selection";
 import { renderTransformControls } from "./transform-controls";
@@ -29,9 +30,20 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
   }
 
   const rendererContext: WebGlRendererContext = { gl: context, canvas };
+  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);
+    });
+  });
 
-  return {
+  const renderer: ImageRenderer = {
     render(frame) {
+      lastFrame = frame;
       const { w, h } = frame.editor.viewport.size;
 
       if (canvas.width !== w) canvas.width = w;
@@ -46,13 +58,17 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
       for (const artboard of frame.document.artboards) {
         renderArtboard(rendererContext, artboard, frame.editor.viewport);
       }
-      renderLayers(rendererContext, frame.document, frame.editor.viewport);
+      renderLayers(rendererContext, frame.document, frame.editor.viewport, imageTextureRenderer);
 
       renderSelectionOverlay(rendererContext, frame.document, frame.editor);
       renderTransformControls(rendererContext, frame.document, frame.editor);
 
       context.disable(context.SCISSOR_TEST);
     },
-    dispose() {},
+    dispose() {
+      imageTextureRenderer.dispose();
+    },
   };
+
+  return renderer;
 }