@thi.ng/webgl-shadertoy 1.0.50 → 1.1.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2025-09-01T16:38:35Z
+- **Last updated**: 2025-10-07T11:51:57Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -11,6 +11,15 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [1.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/webgl-shadertoy@1.1.0) (2025-10-07)
+
+#### 🚀 Features
+
+- refactor/update types & impl ([4e9e929](https://github.com/thi-ng/umbrella/commit/4e9e929))
+  - rename `ShaderToy` interface => `IShaderToy`
+  - update impl to use proper class `ShaderToy`, thus allowing
+    custom extensions to update loop etc.
+
 ### [0.4.115](https://github.com/thi-ng/umbrella/tree/@thi.ng/webgl-shadertoy@0.4.115) (2024-02-06)
 
 #### ♻️ Refactoring

package/api.d.ts

@@ -30,11 +30,36 @@ export interface ShaderToyOpts<U extends ShaderToyUniforms> {
      */
     opts?: Partial<DefShaderOpts>;
 }
-export interface ShaderToy<U extends ShaderToyUniforms> {
+export interface IShaderToy<U extends ShaderToyUniforms> {
+    /**
+     * Starts automatic update/render loop, driven by `requestAnimationFrame()`.
+     * Alternatively, use {@link IShaderToy.update} directly to update/draw a
+     * single frame.
+     */
     start(): void;
+    /**
+     * Stops automatic update/render loop.
+     */
     stop(): void;
+    /**
+     * Updates and renders a single frame. The given `time` value will be stored
+     * in the eponymous shader uniform.
+     *
+     * @param time
+     */
     update(time?: number): void;
+    /**
+     * Recompiles shader using new given shader `main` function and options.
+     * Updates {@link IShaderToy.model} spec.
+     *
+     * @param main
+     * @param opts
+     */
     recompile(main: MainImageFn<U>, opts?: Partial<DefShaderOpts>): void;
+    /**
+     * Generated thi.ng/webgl model spec (full-canvas rect), incl. exposed
+     * uniforms and compiled shader.
+     */
     model: ModelSpec;
 }
 //# sourceMappingURL=api.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/webgl-shadertoy",
-  "version": "1.0.50",
+  "version": "1.1.0",
   "description": "Basic WebGL scaffolding for running interactive fragment shaders via @thi.ng/shader-ast",
   "type": "module",
   "module": "./index.js",
@@ -40,9 +40,9 @@
   },
   "dependencies": {
     "@thi.ng/api": "^8.12.2",
-    "@thi.ng/shader-ast": "^1.1.22",
-    "@thi.ng/shader-ast-glsl": "^1.0.41",
-    "@thi.ng/webgl": "^6.9.78"
+    "@thi.ng/shader-ast": "^1.1.23",
+    "@thi.ng/shader-ast-glsl": "^1.0.42",
+    "@thi.ng/webgl": "^6.9.79"
   },
   "devDependencies": {
     "esbuild": "^0.25.9",
@@ -91,5 +91,5 @@
     "status": "alpha",
     "year": 2019
   },
-  "gitHead": "3c3531350eec56011982583c694aeb1a2e0d0ff4\n"
+  "gitHead": "fbf4b46ba8a5ecff8c5423f4c2d158d208d20fc8\n"
 }

package/shadertoy.d.ts

@@ -1,3 +1,15 @@
-import type { ShaderToy, ShaderToyOpts, ShaderToyUniforms } from "./api.js";
+import type { DefShaderOpts, ModelSpec } from "@thi.ng/webgl";
+import type { IShaderToy, MainImageFn, ShaderToyOpts, ShaderToyUniforms } from "./api.js";
+export declare class ShaderToy<U extends ShaderToyUniforms> implements IShaderToy<U> {
+    opts: ShaderToyOpts<U>;
+    model: ModelSpec;
+    t0: number;
+    active: boolean;
+    constructor(opts: ShaderToyOpts<U>);
+    start(): void;
+    stop(): void;
+    update(time: number): void;
+    recompile(main: MainImageFn<U>, shaderOpts?: Partial<DefShaderOpts>): void;
+}
 export declare const shaderToy: <U extends ShaderToyUniforms>(opts: ShaderToyOpts<U>) => ShaderToy<U>;
 //# sourceMappingURL=shadertoy.d.ts.map

package/shadertoy.js

@@ -6,98 +6,101 @@ import { compileModel } from "@thi.ng/webgl/buffer";
 import { draw } from "@thi.ng/webgl/draw";
 import { defQuadModel } from "@thi.ng/webgl/geo/quad";
 import { defShader } from "@thi.ng/webgl/shader";
-const shaderToy = (opts) => {
-  const gl = opts.gl;
-  const model = defQuadModel({ uv: false });
-  model.textures = opts.textures || [];
-  compileModel(gl, model);
-  opts.canvas.addEventListener("mousemove", (e) => {
-    const rect = opts.canvas.getBoundingClientRect();
-    const dpr = window.devicePixelRatio;
-    model.uniforms.mouse = [
-      (e.clientX - rect.left) * dpr,
-      (rect.height - (e.clientY - rect.top)) * dpr
-    ];
-  });
-  opts.canvas.addEventListener("mousedown", (e) => {
-    model.uniforms.mouseButtons = e.buttons;
-  });
-  opts.canvas.addEventListener("mouseup", (e) => {
-    model.uniforms.mouseButtons = e.buttons;
-  });
-  let active;
-  let t0;
-  const update = (time) => {
+class ShaderToy {
+  constructor(opts) {
+    this.opts = opts;
+    this.model = defQuadModel({ uv: false });
+    this.model.textures = opts.textures || [];
+    compileModel(opts.gl, this.model);
+    opts.canvas.addEventListener("mousemove", (e) => {
+      const rect = opts.canvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio;
+      this.model.uniforms.mouse = [
+        (e.clientX - rect.left) * dpr,
+        (rect.height - (e.clientY - rect.top)) * dpr
+      ];
+    });
+    opts.canvas.addEventListener("mousedown", (e) => {
+      this.model.uniforms.mouseButtons = e.buttons;
+    });
+    opts.canvas.addEventListener("mouseup", (e) => {
+      this.model.uniforms.mouseButtons = e.buttons;
+    });
+    this.recompile(opts.main);
+  }
+  model;
+  t0;
+  active = false;
+  start() {
+    this.t0 = Date.now();
+    this.active = true;
+    const update = () => {
+      this.update((Date.now() - this.t0) * 1e-3);
+      this.active && requestAnimationFrame(update);
+    };
+    requestAnimationFrame(update);
+  }
+  stop() {
+    this.active = false;
+  }
+  update(time) {
+    const {
+      opts: { gl },
+      model
+    } = this;
     const w = gl.drawingBufferWidth;
     const h = gl.drawingBufferHeight;
     model.uniforms.time = time;
     model.uniforms.resolution = [w, h];
     gl.viewport(0, 0, w, h);
     draw(model);
-  };
-  const updateRAF = () => {
-    update((Date.now() - t0) * 1e-3);
-    active && requestAnimationFrame(updateRAF);
-  };
-  const instance = {
-    start() {
-      t0 = Date.now();
-      active = true;
-      requestAnimationFrame(updateRAF);
-    },
-    stop() {
-      active = false;
-    },
-    update(time) {
-      update(time);
-    },
-    recompile(main, shaderOpts) {
-      if (model.shader) {
-        model.shader.release();
-      }
-      model.shader = defShader(
-        gl,
-        {
-          vs: (gl2, _, ins) => [
-            defMain(() => [
-              assign(
-                gl2.gl_Position,
-                vec4(ins.position, FLOAT0, FLOAT1)
-              )
-            ])
-          ],
-          fs: (gl2, unis, _, outputs) => [
-            defMain(() => [
-              assign(
-                outputs.fragColor,
-                defn(
-                  V4,
-                  "mainImage",
-                  [],
-                  () => main(gl2, unis)
-                )()
-              )
-            ])
-          ],
-          attribs: {
-            position: V2
-          },
-          uniforms: {
-            resolution: V2,
-            mouse: [V2, [0, 0]],
-            mouseButtons: [I, 0],
-            time: F,
-            ...opts.uniforms
-          }
+  }
+  recompile(main, shaderOpts) {
+    const { opts, model } = this;
+    if (model.shader) {
+      model.shader.release();
+    }
+    model.shader = defShader(
+      opts.gl,
+      {
+        vs: (gl, _, ins) => [
+          defMain(() => [
+            assign(
+              gl.gl_Position,
+              vec4(ins.position, FLOAT0, FLOAT1)
+            )
+          ])
+        ],
+        fs: (gl, unis, _, outputs) => [
+          defMain(() => [
+            assign(
+              outputs.fragColor,
+              defn(
+                V4,
+                "mainImage",
+                [],
+                () => main(gl, unis)
+              )()
+            )
+          ])
+        ],
+        attribs: {
+          position: V2
         },
-        shaderOpts || opts.opts
-      );
-    },
-    model
-  };
-  instance.recompile(opts.main);
-  return instance;
-};
+        uniforms: {
+          resolution: V2,
+          mouse: [V2, [0, 0]],
+          mouseButtons: [I, 0],
+          time: F,
+          ...opts.uniforms
+        }
+      },
+      shaderOpts || opts.opts
+    );
+  }
+}
+const shaderToy = (opts) => new ShaderToy(opts);
 export {
+  ShaderToy,
   shaderToy
 };