96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
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 { generationCandidatePreviewAssets, renderLayers } from "./layers";
|
|
import { renderSelectionOverlay } from "./selection";
|
|
import { renderTransformControls } from "./transform-controls";
|
|
import type { WebGlRendererContext } from "./types";
|
|
import { createAdjustmentPass } from "./adjustment-pass";
|
|
|
|
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)]);
|
|
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);
|
|
|
|
context.disable(context.SCISSOR_TEST);
|
|
},
|
|
dispose() {
|
|
checkerboardRenderer.dispose();
|
|
imageTextureRenderer.dispose();
|
|
adjustmentPass.dispose();
|
|
brushPreviewRenderer?.dispose();
|
|
},
|
|
};
|
|
|
|
return renderer;
|
|
}
|
|
|
|
function createOptionalBrushPreviewRenderer(context: WebGlRendererContext) {
|
|
try {
|
|
return createBrushPreviewRenderer(context);
|
|
} catch {
|
|
return undefined;
|
|
}
|
|
}
|