make brush preview work under GPU

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";

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" };
     }
 

static/chunk-allocator.js

@@ -177,7 +177,6 @@ export class AtlasAllocator {
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.compositeRectVbo);
         gl.bufferData(gl.ARRAY_BUFFER, this.compositeRectData, gl.DYNAMIC_DRAW);
-        console.log(this.compositeRectData.byteLength);
 
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.compositeRectIbo);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, compositeRectIndices, gl.DYNAMIC_DRAW);

static/index.js

@@ -287,7 +287,7 @@ function readUrl(urlString) {
 
         let data = new Blob(dataParts);
 
-        console.log("sending edit data. record count:", editRecords.length, "data blob:", data);
+        console.debug("sending edit data. record count:", editRecords.length, "data blob:", data);
         session.sendEdit(editRecords, data);
     });
 

static/wall.js

@@ -89,7 +89,7 @@ export class Layer {
                     let blob = canvas.convertToBlob({ type: "image/png" });
 
                     let end = performance.now();
-                    console.log("encoding image took", end - start, "ms");
+                    console.debug("encoding image took", end - start, "ms");
                     encodeTime += end - start;
 
                     return blob;