webvas 0.3.0 → 0.3.1

data/js/bridge.js

@@ -4,6 +4,107 @@
   const pendingEvents = [];
   const eventLimit = 2048;
 
+  function uniformLayout(wgsl) {
+    const source = wgsl.match(/struct\s+Uniforms\s*\{([\s\S]*?)\}/)?.[1];
+    if (!source) throw new Error("WGSL must define a Uniforms struct");
+    const fields = [...source.matchAll(/\b(\w+)\s*:\s*(f32|i32|u32|vec[234]<f32>)\s*,/g)];
+    let offset = 0;
+    const layout = fields.map(([, name, type]) => {
+      const components = Number(type.match(/^vec(\d)/)?.[1] || 1);
+      const align = components === 1 ? 4 : components === 2 ? 8 : 16;
+      const size = components === 3 ? 12 : components * 4;
+      offset = Math.ceil(offset / align) * align;
+      const field = { name, type, offset, components };
+      offset += size;
+      return field;
+    });
+    if (!layout.length) throw new Error("WGSL Uniforms must contain supported numeric fields");
+    return { fields: layout, size: Math.ceil(offset / 16) * 16 };
+  }
+
+  function startShader(selector, wgsl, initialUniforms) {
+    const canvas = globalThis.WebvasCanvases?.[selector];
+    if (!(canvas instanceof OffscreenCanvas)) throw new Error("Canvas not found: " + selector);
+    if (!navigator.gpu) throw new Error("WebGPU is unavailable. Try a browser with WebGPU enabled.");
+    if (!canvas.width || !canvas.height) throw new Error("Shader canvas size must be positive");
+
+    const startTime = performance.now();
+    let metricFrames = 0;
+    let metricStart = startTime;
+    let metricDispatchMs = 0;
+    const uniforms = JSON.parse(initialUniforms);
+    const layout = uniformLayout(wgsl);
+    const frame = async () => {
+      try {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter) throw new Error("WebGPU could not find an adapter.");
+        const device = await adapter.requestDevice();
+        const context = canvas.getContext("webgpu");
+        if (!context) throw new Error("WebGPU canvas is unavailable.");
+        context.configure({ device, format: "rgba8unorm", usage: GPUTextureUsage.STORAGE_BINDING, alphaMode: "opaque" });
+        const module = device.createShaderModule({ code: wgsl });
+        const info = await module.getCompilationInfo();
+        const errors = info.messages.filter(message => message.type === "error");
+        if (errors.length) throw new Error(errors.map(error => error.message).join("\n"));
+        const pipeline = await device.createComputePipelineAsync({
+          layout: "auto", compute: { module, entryPoint: "main" }
+        });
+        const buffer = device.createBuffer({ size: layout.size, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        const draw = () => {
+          try {
+            const started = performance.now();
+            const data = new DataView(new ArrayBuffer(layout.size));
+            for (const field of layout.fields) {
+              let value = uniforms[field.name];
+              if (field.name === "resolution") value = [canvas.width, canvas.height];
+              if (field.name === "time" && value === undefined) value = (performance.now() - startTime) / 1000;
+              const values = field.components === 1 ? [value ?? 0] : Array.isArray(value) ? value : [];
+              for (let index = 0; index < field.components; index += 1) {
+                const at = field.offset + index * 4;
+                if (field.type === "i32") data.setInt32(at, Number(values[index] || 0), true);
+                else if (field.type === "u32") data.setUint32(at, Number(values[index] || 0), true);
+                else data.setFloat32(at, Number(values[index] || 0), true);
+              }
+            }
+            device.queue.writeBuffer(buffer, 0, data);
+            const bindGroup = device.createBindGroup({
+              layout: pipeline.getBindGroupLayout(0),
+              entries: [
+                { binding: 0, resource: { buffer } },
+                { binding: 1, resource: context.getCurrentTexture().createView() }
+              ]
+            });
+            const encoder = device.createCommandEncoder();
+            const pass = encoder.beginComputePass();
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.dispatchWorkgroups(Math.ceil(canvas.width / 8), Math.ceil(canvas.height / 8));
+            pass.end();
+            device.queue.submit([encoder.finish()]);
+            metricDispatchMs += performance.now() - started;
+            metricFrames += 1;
+            if (metricFrames === 60) {
+              const elapsed = performance.now() - metricStart;
+              globalThis.postMessage({ type: "webvas:metrics", frames: metricFrames, elapsedMs: elapsed,
+                fps: metricFrames * 1000 / elapsed, averagePresentMs: metricDispatchMs / metricFrames });
+              metricFrames = 0;
+              metricStart = performance.now();
+              metricDispatchMs = 0;
+            }
+            globalThis.window.requestAnimationFrame(draw);
+          } catch (error) {
+            globalThis.WebvasBridge.showError(error.message || String(error), "");
+          }
+        };
+        globalThis.window.requestAnimationFrame(draw);
+      } catch (error) {
+        globalThis.WebvasBridge.showError(error.message || String(error), "");
+      }
+    };
+    frame();
+    return true;
+  }
+
   function queue(handle, event) {
     if (handle.events.length === eventLimit) handle.events.shift();
     handle.events.push(event);
@@ -17,16 +118,16 @@
       canvas.height = height;
       const context = canvas.getContext("2d", { alpha: false });
       if (!context) throw new Error("Canvas 2D is unavailable");
-      const handle = { id: nextId++, canvas, context, events: pendingEvents.splice(0) };
+      const handle = { id: nextId++, canvas, context, events: pendingEvents.splice(0), metricStart: performance.now(), metricFrames: 0, metricPresentMs: 0 };
       globalThis.postMessage({ type: "webvas:pixelated", selector, enabled: pixelated });
       canvases.set(handle.id, handle);
-      globalThis.postMessage({ type: "webvas:size", width, height });
       return handle.id;
     },
 
     present(id, encoded, width, height) {
       const handle = canvases.get(id);
       if (!handle) throw new Error("Canvas backend is closed");
+      const started = performance.now();
       const { canvas, context } = handle;
       if (canvas.width !== width || canvas.height !== height) {
         canvas.width = width;
@@ -37,28 +138,29 @@
       const pixels = new Uint8ClampedArray(binary.length);
       for (let index = 0; index < binary.length; index += 1) pixels[index] = binary.charCodeAt(index);
       context.putImageData(new ImageData(pixels, width, height), 0, 0);
+      handle.metricFrames += 1;
+      handle.metricPresentMs += performance.now() - started;
+      if (handle.metricFrames === 60) {
+        const elapsed = performance.now() - handle.metricStart;
+        globalThis.postMessage({ type: "webvas:metrics", frames: handle.metricFrames, elapsedMs: elapsed,
+          fps: handle.metricFrames * 1000 / elapsed, averagePresentMs: handle.metricPresentMs / handle.metricFrames });
+        handle.metricStart = performance.now();
+        handle.metricFrames = 0;
+        handle.metricPresentMs = 0;
+      }
       return true;
     },
 
+    runShader(selector, wgsl, uniforms) {
+      return startShader(selector, wgsl, uniforms);
+    },
+
     events(id) {
       const handle = canvases.get(id);
       return JSON.stringify(handle ? handle.events.splice(0) : []);
     },
 
     pushEvent(event) {
-      const canvas = canvases.values().next().value?.canvas || globalThis.WebvasCanvases?.["#screen"];
-      if (canvas && event.clientX !== undefined) {
-        const width = Number(event.rectWidth);
-        const height = Number(event.rectHeight);
-        const x = width > 0 ? Math.floor((event.clientX - event.left) * canvas.width / width) : 0;
-        const y = height > 0 ? Math.floor((event.clientY - event.top) * canvas.height / height) : 0;
-        const mouse = globalThis.WebvasMouse || [0, 0, 0, 0];
-        mouse[0] = Math.max(0, Math.min(canvas.width - 1, x));
-        mouse[1] = canvas.height - 1 - Math.max(0, Math.min(canvas.height - 1, y));
-        if (event.type === "pointerdown") [mouse[2], mouse[3]] = [mouse[0], mouse[1]];
-        if (event.type === "pointerup") [mouse[2], mouse[3]] = [-Math.abs(mouse[2]), -Math.abs(mouse[3])];
-        globalThis.WebvasMouse = mouse;
-      }
       if (!canvases.size) {
         if (pendingEvents.length === eventLimit) pendingEvents.shift();
         pendingEvents.push(event);
@@ -79,10 +181,6 @@
       canvases.delete(id);
     },
 
-    shaderMode(canvas) {
-      globalThis.postMessage({ type: "webvas:mode", canvas });
-    },
-
     showError(message, backtrace) {
       globalThis.postMessage({ type: "webvas:error", message, backtrace });
     }

data/js/loader.js

@@ -3,71 +3,106 @@
   if (!loader) return;
 
   const base = new URL(".", loader.src);
-  const runtimeUrl = loader.dataset.runtime || new URL("./assets/webvas.wasm", base).href;
-  const workerUrl = new URL("./worker.js", base).href;
-  const bridgeUrl = new URL("./bridge.js", base).href;
-  const shaderUrl = new URL("./wgsl-runner.js", base).href;
+  const defaultRuntime = loader.dataset.runtime || new URL("./assets/webvas.wasm", base).href;
+  const sessions = new Map();
+  const sourceLimit = 32768;
 
-  async function run(sourceElement) {
-    const selector = sourceElement.dataset.canvas || "#screen";
-    const canvas = document.querySelector(selector);
-    if (!(canvas instanceof HTMLCanvasElement)) throw new Error(`Canvas not found: ${selector}`);
-    if (new TextEncoder().encode(sourceElement.textContent).length > 32768) throw new Error("Ruby source exceeds 32 KB.");
+  function textSource(element) {
+    if (element.matches('script[type="application/json"][data-webvas-source]')) {
+      const payload = JSON.parse(element.textContent);
+      if (typeof payload.source !== "string") throw new Error("Embedded Ruby source is missing.");
+      return payload.source;
+    }
+    return element.textContent;
+  }
 
-    const status = document.createElement("output");
-    status.setAttribute("role", "status");
-    status.setAttribute("aria-live", "polite");
-    canvas.insertAdjacentElement("afterend", status);
-    const report = message => { status.textContent = message; };
-    report("Loading Ruby runtime…");
+  async function readSource(element) {
+    if (!element.src) return textSource(element);
+    const response = await fetch(element.src, { credentials: "omit" });
+    if (!response.ok) throw new Error(`Ruby source download failed: ${response.status}`);
+    return response.text();
+  }
 
-    const gpu = document.querySelector("#gpu") || document.createElement("canvas");
-    gpu.hidden = true;
-    if (!gpu.isConnected) {
-      gpu.id = "gpu";
-      gpu.hidden = true;
-      canvas.insertAdjacentElement("afterend", gpu);
+  function dispose(selector, replaceCanvas) {
+    const old = sessions.get(selector);
+    if (!old) return;
+    old.worker.terminate();
+    URL.revokeObjectURL(old.workerBlobUrl);
+    old.listeners.forEach(([target, type, listener, options]) => target.removeEventListener(type, listener, options));
+    if (replaceCanvas && old.canvas.isConnected) {
+      const canvas = old.canvas.cloneNode(false);
+      canvas.style.imageRendering = "";
+      old.canvas.replaceWith(canvas);
+    }
+    sessions.delete(selector);
+  }
+
+  async function start(source, { canvas: selector = "#screen", runtime, statusElement, onStatus } = {}) {
+    if (typeof source !== "string") throw new TypeError("Ruby source must be a string.");
+    if (new TextEncoder().encode(source).length > sourceLimit) throw new Error("Ruby source exceeds 32 KB.");
+    dispose(selector, true);
+
+    const canvas = document.querySelector(selector);
+    if (!(canvas instanceof HTMLCanvasElement)) throw new Error(`Canvas not found: ${selector}`);
+    const status = statusElement || document.createElement("output");
+    if (!statusElement) {
+      status.setAttribute("role", "status");
+      status.setAttribute("aria-live", "polite");
+      canvas.insertAdjacentElement("afterend", status);
     }
+    const report = detail => {
+      if (onStatus) onStatus(detail);
+      else status.textContent = detail.message || "";
+    };
+    report({ state: "loading", message: "Loading Ruby runtime…" });
     if (canvas.tabIndex < 0) canvas.tabIndex = 0;
 
-    const response = await fetch(workerUrl, { credentials: "omit" });
+    const response = await fetch(new URL("./worker.js", base), { credentials: "omit" });
     if (!response.ok) throw new Error(`Worker download failed: ${response.status}`);
     const workerBlobUrl = URL.createObjectURL(new Blob([await response.text()], { type: "text/javascript" }));
     const worker = new Worker(workerBlobUrl, { type: "module", name: "webvas" });
-    const screenSelector = selector;
-    worker.addEventListener("message", event => {
+    const listeners = [];
+    const session = { canvas, worker, workerBlobUrl, listeners };
+    sessions.set(selector, session);
+
+    const listen = (target, type, callback, options) => {
+      target.addEventListener(type, callback, options);
+      listeners.push([target, type, callback, options]);
+    };
+    listen(worker, "message", event => {
       const message = event.data || {};
-      if (message.type === "webvas:loading") report(message.message || "Loading Ruby runtime…");
+      if (message.type === "webvas:loading") report({ state: "loading", message: message.message || "Loading Ruby runtime…" });
       else if (message.type === "webvas:ready") {
         URL.revokeObjectURL(workerBlobUrl);
-        worker.postMessage({ type: "webvas:run", source: sourceElement.textContent });
-      }
-      else if (message.type === "webvas:started") report("Ruby sketch is running");
-      else if (message.type === "webvas:error") report([message.message, message.backtrace].filter(Boolean).join("\n"));
-      else if (message.type === "webvas:pixelated" && message.selector === screenSelector) {
-        canvas.style.imageRendering = message.enabled ? "pixelated" : "auto";
-      } else if (message.type === "webvas:mode") {
-        canvas.hidden = message.canvas !== screenSelector;
-        gpu.hidden = message.canvas !== "#gpu";
+        worker.postMessage({ type: "webvas:run", source });
+      } else if (message.type === "webvas:started") report({ state: "running", message: "Ruby sketch is running" });
+      else if (message.type === "webvas:error") report({ state: "error", message: message.message || "Ruby sketch failed", backtrace: message.backtrace || "" });
+      else if (message.type === "webvas:metrics") report({ state: "metrics", ...message });
+      else if (message.type === "webvas:pixelated" && message.selector === selector) {
+        const enabled = message.enabled === true || message.enabled === "true";
+        canvas.dataset.pixelated = String(enabled);
+        canvas.style.imageRendering = enabled ? "pixelated" : "auto";
       }
     });
-    worker.addEventListener("error", event => {
+    listen(worker, "error", event => {
       URL.revokeObjectURL(workerBlobUrl);
-      report(event.message || "Webvas worker failed");
+      report({ state: "error", message: event.message || "Webvas worker failed" });
     });
+    listen(worker, "messageerror", () => report({ state: "error", message: "Webvas worker sent an unreadable message." }));
 
     const forward = event => {
       if (event.type === "wheel") event.preventDefault();
+      if (event.type === "keydown" && event.code === "Space") event.preventDefault();
       if (event.type === "pointerdown") {
         canvas.focus({ preventScroll: true });
         canvas.setPointerCapture(event.pointerId);
       }
-      const rect = event.currentTarget.getBoundingClientRect();
+      const rect = canvas.getBoundingClientRect();
       worker.postMessage({
         type: "webvas:input",
         event: {
           type: event.type === "pointercancel" ? "pointerup" : event.type,
-          clientX: event.clientX || 0, clientY: event.clientY || 0,
+          clientX: event.clientX ?? 0, clientY: event.clientY ?? 0,
           left: rect.left, top: rect.top, rectWidth: rect.width, rectHeight: rect.height,
           button: event.button, deltaX: event.deltaX, deltaY: event.deltaY,
           code: event.code, key: event.key, shiftKey: event.shiftKey,
@@ -76,25 +111,52 @@
       });
     };
     for (const type of ["pointerdown", "pointerup", "pointermove", "pointercancel", "keydown", "keyup", "wheel"]) {
-      canvas.addEventListener(type, forward, type === "wheel" ? { passive: false } : undefined);
+      listen(canvas, type, forward, type === "wheel" ? { passive: false } : undefined);
     }
 
-    const screen = canvas.transferControlToOffscreen();
-    const gpuCanvas = gpu.transferControlToOffscreen();
+    if (typeof canvas.transferControlToOffscreen !== "function") throw new Error("OffscreenCanvas is unavailable in this browser.");
+    const offscreen = canvas.transferControlToOffscreen();
     worker.postMessage({
-      type: "webvas:init", screen, gpu: gpuCanvas, screenSelector, gpuSelector: "#gpu",
-      bridgeUrl, shaderUrl, wasmUrl: new URL(runtimeUrl, document.baseURI).href
-    }, [screen, gpuCanvas]);
+      type: "webvas:init", canvas: offscreen, selector,
+      bridgeUrl: new URL("./bridge.js", base).href,
+      wasmUrl: new URL(runtime || defaultRuntime, document.baseURI).href
+    }, [offscreen]);
+    return session;
   }
 
-  const start = () => document.querySelectorAll('script[type="text/ruby"][data-webvas]').forEach(element => {
-    run(element).catch(error => {
+  async function run(source, options = {}) {
+    try {
+      return await start(source, options);
+    } catch (error) {
+      const detail = { state: "error", message: error.message || String(error) };
+      dispose(options.canvas || "#screen", true);
+      if (options.onStatus) options.onStatus(detail);
+      else if (options.statusElement) options.statusElement.textContent = detail.message;
+      else throw error;
+    }
+  }
+
+  globalThis.WebvasPlayground = {
+    run,
+    stop(canvas = "#screen") { dispose(canvas, true); }
+  };
+
+  const startEmbedded = () => {
+    for (const element of document.querySelectorAll('script[type="text/ruby"][data-webvas],script[type="application/json"][data-webvas-source]')) {
       const status = document.createElement("output");
-      status.setAttribute("role", "alert");
-      status.textContent = error.message || String(error);
+      status.setAttribute("role", "status");
+      status.setAttribute("aria-live", "polite");
       element.insertAdjacentElement("afterend", status);
-    });
-  });
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start, { once: true });
-  else start();
+      readSource(element).then(source => run(source, {
+        canvas: element.dataset.canvas || "#screen",
+        runtime: element.dataset.runtime,
+        statusElement: status
+      })).catch(error => {
+        status.setAttribute("role", "alert");
+        status.textContent = error.message || String(error);
+      });
+    }
+  };
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", startEmbedded, { once: true });
+  else startEmbedded();
 })();

data/{site → js}/worker.js

@@ -4,35 +4,11 @@ const pendingEvents = [];
 
 globalThis.window = {
   requestAnimationFrame(callback) {
-    return setTimeout(() => {
-      const now = performance.now();
-      const started = now;
-      callback(now);
-      frameMetrics(now, performance.now() - started);
-    }, 1000 / 60);
+    return setTimeout(() => callback(performance.now()), 1000 / 60);
   }
 };
 globalThis.requestAnimationFrame ||= callback => globalThis.window.requestAnimationFrame(callback);
 
-let metricFrames = 0;
-let metricStarted;
-let callbackTime = 0;
-
-function frameMetrics(now, elapsed) {
-  metricStarted ??= now;
-  metricFrames += 1;
-  callbackTime += elapsed;
-  if (metricFrames < 60) return;
-  const duration = now - metricStarted;
-  send("metrics", {
-    fps: (metricFrames - 1) * 1000 / duration,
-    callbackMs: callbackTime / metricFrames
-  });
-  metricFrames = 0;
-  callbackTime = 0;
-  metricStarted = now;
-}
-
 function send(type, payload = {}) {
   globalThis.postMessage({ type: "webvas:" + type, ...payload });
 }
@@ -42,11 +18,7 @@ globalThis.addEventListener("message", async event => {
   try {
     if (message?.type === "webvas:init") {
       await import(message.bridgeUrl);
-      await import(message.shaderUrl);
-      globalThis.WebvasCanvases = {
-        [message.screenSelector || "#screen"]: message.screen,
-        [message.gpuSelector || "#gpu"]: message.gpu
-      };
+      globalThis.WebvasCanvases = { [message.selector]: message.canvas };
       pendingEvents.splice(0).forEach(input => globalThis.WebvasBridge.pushEvent(input));
       send("loading", { message: "Downloading the Ruby drawing machine…" });
       const { DefaultRubyVM } = await import("https://cdn.jsdelivr.net/npm/@ruby/wasm-wasi@2.10.1/dist/browser/+esm");

data/lib/webvas/backend.rb

@@ -19,7 +19,14 @@ module Webvas
     def set_pixels(buffer, width, height)
       width = Integer(width)
       height = Integer(height)
-      bytes = validate_rgba_buffer(buffer, width, height)
+      bytes = String.try_convert(buffer)
+      raise ArgumentError, "Pixel buffer must be a String" unless bytes
+
+      expected_size = width * height * 4
+      unless width.positive? && height.positive? && bytes.bytesize == expected_size
+        raise ArgumentError, "Pixel buffer size mismatch: expected #{expected_size}, got #{bytes.bytesize}"
+      end
+
       resize(width, height) if [width, height] != [@width, @height]
       @pending_pixels = [bytes, width, height]
       true

data/lib/webvas/bridge.rb

@@ -18,6 +18,10 @@ module Webvas
       @api.present(handle, Base64.strict_encode64(bytes), width, height)
     end
 
+    def run_shader(selector, wgsl, uniforms)
+      @api.runShader(selector, wgsl, JSON.generate(uniforms))
+    end
+
     def events(handle)
       JSON.parse(@api.events(handle).to_s)
     end
@@ -37,10 +41,5 @@ module Webvas
     def show_error(message, backtrace)
       @api.showError(String(message), Array(backtrace).join("\n"))
     end
-
-    def run_shader(canvas, source, layout, uniforms)
-      @api.shaderMode(canvas)
-      JS.global[:GlazeWGSL].run(canvas, source, layout, uniforms)
-    end
   end
 end