@fjandin/react-shader 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,147 @@
+# @fjandin/react-shader
+
+A React component for rendering WebGL fragment and vertex shaders. Designed to work with Shadertoy-style shaders with automatic uniform handling.
+
+## Installation
+
+```bash
+npm install @fjandin/react-shader
+# or
+yarn add @fjandin/react-shader
+# or
+bun add @fjandin/react-shader
+```
+
+## Basic Usage
+
+```tsx
+import { ReactShader } from "@fjandin/react-shader"
+
+const fragment = `#version 300 es
+precision highp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+out vec4 fragColor;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / iResolution;
+  vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));
+  fragColor = vec4(color, 1.0);
+}
+`
+
+function App() {
+  return (
+    <div style={{ width: "800px", height: "600px" }}>
+      <ReactShader fragment={fragment} />
+    </div>
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `fragment` | `string` | Yes | - | GLSL fragment shader source code |
+| `vertex` | `string` | No | Default quad shader | GLSL vertex shader source code |
+| `uniforms` | `Record<string, UniformValue>` | No | `{}` | Custom uniform values |
+| `className` | `string` | No | - | CSS class name for the container |
+| `debug` | `boolean` | No | `false` | Show debug overlay with resolution and mouse info |
+| `fullscreen` | `boolean` | No | `false` | Render as fixed fullscreen overlay |
+| `timeScale` | `number` | No | `1` | Scale factor for elapsed time |
+| `onFrame` | `(info: FrameInfo) => void` | No | - | Callback invoked on each frame |
+
+## Built-in Uniforms
+
+These uniforms are automatically provided to your shader every frame:
+
+| Uniform | GLSL Type | Description |
+|---------|-----------|-------------|
+| `iTime` | `float` | Elapsed time in seconds (scaled by `timeScale` prop) |
+| `iMouse` | `vec2` | Mouse position in pixels (Y=0 at bottom) |
+| `iMouseLeftDown` | `float` | `1.0` when left mouse button is pressed, `0.0` otherwise |
+| `iResolution` | `vec2` | Canvas resolution in pixels (includes high-DPI scaling) |
+
+## Custom Uniforms
+
+Pass custom uniform values via the `uniforms` prop:
+
+```tsx
+<ReactShader
+  fragment={fragment}
+  uniforms={{
+    scale: 2.0,                    // float
+    offset: [0.5, 0.5],            // vec2
+    color: [1.0, 0.5, 0.2],        // vec3
+    transform: [1, 0, 0, 1],       // vec4
+  }}
+/>
+```
+
+Supported types:
+- `number` → `float`
+- `[number, number]` → `vec2`
+- `[number, number, number]` → `vec3`
+- `[number, number, number, number]` → `vec4`
+
+## Frame Callback
+
+Use the `onFrame` callback to update uniforms based on animation timing:
+
+```tsx
+function App() {
+  const [customTime, setCustomTime] = useState(0)
+
+  return (
+    <ReactShader
+      fragment={fragment}
+      uniforms={{ customTime }}
+      onFrame={(info) => {
+        setCustomTime((prev) => prev + info.deltaTime * 0.5)
+      }}
+    />
+  )
+}
+```
+
+The `FrameInfo` object contains:
+- `deltaTime` - Time since last frame in seconds
+- `time` - Total elapsed time in seconds
+- `resolution` - Canvas resolution as `[width, height]`
+- `mouse` - Mouse position as `[x, y]`
+
+## TypeScript
+
+All types are exported:
+
+```tsx
+import type {
+  Vec2,
+  Vec3,
+  Vec4,
+  UniformValue,
+  DefaultUniforms,
+  FrameInfo,
+  ReactShaderProps,
+} from "@fjandin/react-shader"
+```
+
+## Features
+
+- WebGL2 with WebGL1 fallback
+- High-DPI display support via `devicePixelRatio`
+- Automatic canvas resizing
+- Shader compilation error display
+- Context loss/restoration handling
+- Mouse tracking with WebGL coordinate convention
+
+## Requirements
+
+- React >= 17.0.0
+
+## License
+
+MIT

package/dist/ReactShader.d.ts

@@ -1,3 +1,3 @@
 import type { ReactShaderProps } from "./types";
-export declare function ReactShader({ className, fragment, vertex, uniforms, debug, fullscreen, timeScale, onFrame, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactShader({ className, fragment, vertex, uniforms, fullscreen, timeScale, onFrame, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ReactShader.d.ts.map

package/dist/ReactShader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAA;AAerD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,KAAa,EACb,UAAkB,EAClB,SAAa,EACb,OAAO,GACR,EAAE,gBAAgB,2CAiHlB"}
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAU/C,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,UAAkB,EAClB,SAAa,EACb,OAAO,GACR,EAAE,gBAAgB,2CAwElB"}

package/dist/example/frontend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAsBpB,wBAAgB,GAAG,4CAyBlB"}
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAsBpB,wBAAgB,GAAG,4CA6BlB"}

package/dist/index.cjs

@@ -329,17 +329,11 @@ function ReactShader({
   fragment,
   vertex = DEFAULT_VERTEX,
   uniforms,
-  debug = false,
   fullscreen = false,
   timeScale = 1,
   onFrame
 }) {
   const [error, setError] = import_react2.useState(null);
-  const [debugInfo, setDebugInfo] = import_react2.useState({
-    iResolution: [0, 0],
-    iMouse: [0, 0]
-  });
-  const lastDebugUpdateRef = import_react2.useRef(0);
   const handleError = import_react2.useCallback((err) => {
     setError(err.message);
     console.error("ReactShader error:", err);
@@ -348,17 +342,7 @@ function ReactShader({
     if (onFrame) {
       onFrame(info);
     }
-    if (!debug)
-      return;
-    const now = performance.now();
-    if (now - lastDebugUpdateRef.current < 100)
-      return;
-    lastDebugUpdateRef.current = now;
-    setDebugInfo({
-      iResolution: info.resolution,
-      iMouse: info.mouse
-    });
-  }, [debug, onFrame]);
+  }, [onFrame]);
   import_react2.useEffect(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -396,7 +380,9 @@ function ReactShader({
         fontSize: "12px",
         padding: "16px",
         overflow: "auto",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        width: "100%",
+        height: "100%"
       },
       children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("pre", {
         style: { margin: 0, whiteSpace: "pre-wrap" },
@@ -404,48 +390,9 @@ function ReactShader({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
-    style: containerStyle,
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
-        ref: canvasRef,
-        className,
-        style: { display: "block", width: "100%", height: "100%" }
-      }, undefined, false, undefined, this),
-      debug && /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
-        style: {
-          position: "absolute",
-          top: 8,
-          left: 8,
-          backgroundColor: "rgba(0, 0, 0, 0.7)",
-          color: "#fff",
-          fontFamily: "monospace",
-          fontSize: "12px",
-          padding: "8px",
-          borderRadius: "4px",
-          pointerEvents: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
-            children: [
-              "iResolution: [",
-              debugInfo.iResolution[0],
-              ", ",
-              debugInfo.iResolution[1],
-              "]"
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
-            children: [
-              "iMouse: [",
-              Math.round(debugInfo.iMouse[0]),
-              ", ",
-              Math.round(debugInfo.iMouse[1]),
-              "]"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
+    ref: canvasRef,
+    className,
+    style: { display: "block", width: "100%", height: "100%" }
+  }, undefined, false, undefined, this);
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/ReactShader.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState } from "react";
 
 // src/hooks/useWebGL.ts
 import { useCallback, useEffect, useRef } from "react";
@@ -294,17 +294,11 @@ function ReactShader({
   fragment,
   vertex = DEFAULT_VERTEX,
   uniforms,
-  debug = false,
   fullscreen = false,
   timeScale = 1,
   onFrame
 }) {
   const [error, setError] = useState(null);
-  const [debugInfo, setDebugInfo] = useState({
-    iResolution: [0, 0],
-    iMouse: [0, 0]
-  });
-  const lastDebugUpdateRef = useRef2(0);
   const handleError = useCallback2((err) => {
     setError(err.message);
     console.error("ReactShader error:", err);
@@ -313,17 +307,7 @@ function ReactShader({
     if (onFrame) {
       onFrame(info);
     }
-    if (!debug)
-      return;
-    const now = performance.now();
-    if (now - lastDebugUpdateRef.current < 100)
-      return;
-    lastDebugUpdateRef.current = now;
-    setDebugInfo({
-      iResolution: info.resolution,
-      iMouse: info.mouse
-    });
-  }, [debug, onFrame]);
+  }, [onFrame]);
   useEffect2(() => {
     setError(null);
   }, [fragment, vertex]);
@@ -361,7 +345,9 @@ function ReactShader({
         fontSize: "12px",
         padding: "16px",
         overflow: "auto",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        width: "100%",
+        height: "100%"
       },
       children: /* @__PURE__ */ jsxDEV("pre", {
         style: { margin: 0, whiteSpace: "pre-wrap" },
@@ -369,50 +355,11 @@ function ReactShader({
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV("div", {
-    style: containerStyle,
-    children: [
-      /* @__PURE__ */ jsxDEV("canvas", {
-        ref: canvasRef,
-        className,
-        style: { display: "block", width: "100%", height: "100%" }
-      }, undefined, false, undefined, this),
-      debug && /* @__PURE__ */ jsxDEV("div", {
-        style: {
-          position: "absolute",
-          top: 8,
-          left: 8,
-          backgroundColor: "rgba(0, 0, 0, 0.7)",
-          color: "#fff",
-          fontFamily: "monospace",
-          fontSize: "12px",
-          padding: "8px",
-          borderRadius: "4px",
-          pointerEvents: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              "iResolution: [",
-              debugInfo.iResolution[0],
-              ", ",
-              debugInfo.iResolution[1],
-              "]"
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              "iMouse: [",
-              Math.round(debugInfo.iMouse[0]),
-              ", ",
-              Math.round(debugInfo.iMouse[1]),
-              "]"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+  return /* @__PURE__ */ jsxDEV("canvas", {
+    ref: canvasRef,
+    className,
+    style: { display: "block", width: "100%", height: "100%" }
+  }, undefined, false, undefined, this);
 }
 export {
   ReactShader

package/dist/types.d.ts

@@ -8,7 +8,6 @@ export interface ReactShaderProps {
     fragment: string;
     vertex?: string;
     uniforms?: Record<string, UniformValue>;
-    debug?: boolean;
     fullscreen?: boolean;
     timeScale?: number;
     onFrame?: (info: FrameInfo) => void;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fjandin/react-shader",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React component for rendering WebGL shaders",
   "type": "module",
   "main": "./dist/index.cjs",