react-shadertoy 0.3.0 → 0.5.0

package/README.md

@@ -4,9 +4,10 @@ Run [Shadertoy](https://www.shadertoy.com/) GLSL shaders in React. Copy-paste an
 
 - Zero dependencies (just React)
 - All Shadertoy uniforms supported (`iTime`, `iResolution`, `iMouse`, `iDate`, etc.)
+- iChannel0-3 textures (image URL, video, canvas)
+- Multipass rendering (Buffer A-D → Image)
 - Mouse & touch interaction built-in
 - TypeScript-first
-- < 4KB gzipped
 
 ## Install
 

package/dist/index.d.mts

@@ -3,17 +3,45 @@ import { CSSProperties, RefObject } from 'react';
 
 /** Texture source: URL string, or an HTML element for dynamic textures */
 type TextureSource = string | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
+type TextureWrap = 'clamp' | 'repeat';
+type TextureFilter = 'nearest' | 'linear' | 'mipmap';
+/** Advanced texture options with wrap/filter/vflip control */
+interface TextureOptions {
+    src: TextureSource;
+    wrap?: TextureWrap;
+    filter?: TextureFilter;
+    vflip?: boolean;
+}
+/** A texture input: shorthand source or full options object */
+type TextureInput = TextureSource | TextureOptions;
 /** Texture inputs mapped to Shadertoy channels */
 type TextureInputs = {
-    iChannel0?: TextureSource;
-    iChannel1?: TextureSource;
-    iChannel2?: TextureSource;
-    iChannel3?: TextureSource;
+    iChannel0?: TextureInput;
+    iChannel1?: TextureInput;
+    iChannel2?: TextureInput;
+    iChannel3?: TextureInput;
+};
+type PassName = 'BufferA' | 'BufferB' | 'BufferC' | 'BufferD' | 'Image';
+/** A channel input for a multipass pass: external texture or another pass name */
+type PassInput = TextureInput | PassName;
+/** Configuration for a single render pass */
+interface PassConfig {
+    code: string;
+    iChannel0?: PassInput;
+    iChannel1?: PassInput;
+    iChannel2?: PassInput;
+    iChannel3?: PassInput;
+}
+/** Multipass configuration: Buffer A-D + Image */
+type MultipassConfig = {
+    [K in PassName]?: PassConfig;
 };
 interface ShadertoyProps {
     /** Shadertoy-compatible GLSL fragment shader (must contain mainImage) */
-    fragmentShader: string;
-    /** Texture inputs for iChannel0-3 */
+    fragmentShader?: string;
+    /** Multipass configuration (Buffer A-D + Image) */
+    passes?: MultipassConfig;
+    /** Texture inputs for iChannel0-3 (single-pass mode) */
     textures?: TextureInputs;
     /** Container style */
     style?: CSSProperties;
@@ -33,7 +61,8 @@ interface ShadertoyProps {
     onLoad?: () => void;
 }
 interface UseShadertoyOptions {
-    fragmentShader: string;
+    fragmentShader?: string;
+    passes?: MultipassConfig;
     textures?: TextureInputs;
     paused?: boolean;
     speed?: number;
@@ -50,8 +79,8 @@ interface UseShadertoyReturn {
     resume: () => void;
 }
 
-declare function Shadertoy({ fragmentShader, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
+declare function Shadertoy({ fragmentShader, passes, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
 
-declare function useShadertoy({ fragmentShader, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
+declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
 
-export { Shadertoy, type ShadertoyProps, type TextureInputs, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };
+export { type MultipassConfig, type PassConfig, type PassName, Shadertoy, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };

package/dist/index.d.ts

@@ -3,17 +3,45 @@ import { CSSProperties, RefObject } from 'react';
 
 /** Texture source: URL string, or an HTML element for dynamic textures */
 type TextureSource = string | HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
+type TextureWrap = 'clamp' | 'repeat';
+type TextureFilter = 'nearest' | 'linear' | 'mipmap';
+/** Advanced texture options with wrap/filter/vflip control */
+interface TextureOptions {
+    src: TextureSource;
+    wrap?: TextureWrap;
+    filter?: TextureFilter;
+    vflip?: boolean;
+}
+/** A texture input: shorthand source or full options object */
+type TextureInput = TextureSource | TextureOptions;
 /** Texture inputs mapped to Shadertoy channels */
 type TextureInputs = {
-    iChannel0?: TextureSource;
-    iChannel1?: TextureSource;
-    iChannel2?: TextureSource;
-    iChannel3?: TextureSource;
+    iChannel0?: TextureInput;
+    iChannel1?: TextureInput;
+    iChannel2?: TextureInput;
+    iChannel3?: TextureInput;
+};
+type PassName = 'BufferA' | 'BufferB' | 'BufferC' | 'BufferD' | 'Image';
+/** A channel input for a multipass pass: external texture or another pass name */
+type PassInput = TextureInput | PassName;
+/** Configuration for a single render pass */
+interface PassConfig {
+    code: string;
+    iChannel0?: PassInput;
+    iChannel1?: PassInput;
+    iChannel2?: PassInput;
+    iChannel3?: PassInput;
+}
+/** Multipass configuration: Buffer A-D + Image */
+type MultipassConfig = {
+    [K in PassName]?: PassConfig;
 };
 interface ShadertoyProps {
     /** Shadertoy-compatible GLSL fragment shader (must contain mainImage) */
-    fragmentShader: string;
-    /** Texture inputs for iChannel0-3 */
+    fragmentShader?: string;
+    /** Multipass configuration (Buffer A-D + Image) */
+    passes?: MultipassConfig;
+    /** Texture inputs for iChannel0-3 (single-pass mode) */
     textures?: TextureInputs;
     /** Container style */
     style?: CSSProperties;
@@ -33,7 +61,8 @@ interface ShadertoyProps {
     onLoad?: () => void;
 }
 interface UseShadertoyOptions {
-    fragmentShader: string;
+    fragmentShader?: string;
+    passes?: MultipassConfig;
     textures?: TextureInputs;
     paused?: boolean;
     speed?: number;
@@ -50,8 +79,8 @@ interface UseShadertoyReturn {
     resume: () => void;
 }
 
-declare function Shadertoy({ fragmentShader, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
+declare function Shadertoy({ fragmentShader, passes, textures, style, className, paused, speed, pixelRatio, mouse, onError, onLoad, }: ShadertoyProps): react_jsx_runtime.JSX.Element;
 
-declare function useShadertoy({ fragmentShader, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
+declare function useShadertoy({ fragmentShader, passes: passesProp, textures: texturesProp, paused, speed, pixelRatio, mouse: mouseEnabled, onError, onLoad, }: UseShadertoyOptions): UseShadertoyReturn;
 
-export { Shadertoy, type ShadertoyProps, type TextureInputs, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };
+export { type MultipassConfig, type PassConfig, type PassName, Shadertoy, type ShadertoyProps, type TextureFilter, type TextureInput, type TextureInputs, type TextureOptions, type TextureWrap, type UseShadertoyOptions, type UseShadertoyReturn, useShadertoy };