From ab7f576dea79cb48d30b077502c93cef659a0004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=AA=E3=82=AD=E8=90=8C?= <commits@liquidev.net>
Date: Wed, 10 Sep 2025 18:09:33 +0200
Subject: [PATCH] make brush preview work under GPU

---
 static/brush-box.js     |  1 -
 static/brush-preview.js | 62 +++++++++++++++++++++++++++++++++++------
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/static/brush-box.js b/static/brush-box.js
index 78baefb..27c47e7 100644
--- a/static/brush-box.js
+++ b/static/brush-box.js
@@ -1,4 +1,3 @@
-import { BrushPreview } from "rkgk/brush-preview.js";
 import { Haku } from "rkgk/haku.js";
 import { randomId } from "rkgk/random.js";
 import { SaveData } from "rkgk/framework.js";
diff --git a/static/brush-preview.js b/static/brush-preview.js
index cca3150..4851f63 100644
--- a/static/brush-preview.js
+++ b/static/brush-preview.js
@@ -1,17 +1,63 @@
-export class BrushPreview extends HTMLElement {
-    constructor(width, height) {
-        super();
+import { BrushRenderer } from "rkgk/brush-renderer.js";
 
-        this.width = width;
-        this.height = height;
+export class BrushPreview extends HTMLElement {
+    connectedCallback() {
+        this.canvas = this.appendChild(document.createElement("canvas"));
+        this.gl = this.canvas.getContext("webgl2");
+
+        this.brushRenderer = new BrushRenderer(this.gl, this.canvasSource());
+
+        let resizeObserver = new ResizeObserver(() => this.#updateCanvasSize());
+        resizeObserver.observe(this);
+        this.#updateCanvasSize();
     }
 
-    connectedCallback() {
-        // TODO
+    #updateCanvasSize() {
+        this.canvas.width = this.clientWidth;
+        this.canvas.height = this.clientHeight;
+        this.dispatchEvent(new Event(".pixmapLost"));
+    }
+
+    canvasSource() {
+        let canvas = this.canvas;
+        return {
+            useCanvas(gl, id) {
+                let viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height };
+                gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+                return viewport;
+            },
+
+            resetCanvas(gl) {},
+        };
     }
 
     async #renderBrushInner(haku) {
-        // TODO
+        let gl = this.gl;
+
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+
+        let canvas = this.canvas;
+        let result = await haku.evalBrush({
+            runDotter: async () => {
+                return {
+                    fromX: canvas.width / 2,
+                    fromY: canvas.height / 2,
+                    toX: canvas.width / 2,
+                    toY: canvas.height / 2,
+                    num: 0,
+                };
+            },
+
+            runScribble: async (renderToCanvas) => {
+                return renderToCanvas(this.brushRenderer, 0, 0, 0);
+            },
+        });
+
+        if (result.status != "ok") {
+            return { status: "error", phase: "eval", result };
+        }
+
         return { status: "ok" };
     }