@fjandin/react-shader 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +147 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# @fjandin/react-shader
|
|
2
|
+
|
|
3
|
+
A React component for rendering WebGL fragment and vertex shaders. Designed to work with Shadertoy-style shaders with automatic uniform handling.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fjandin/react-shader
|
|
9
|
+
# or
|
|
10
|
+
yarn add @fjandin/react-shader
|
|
11
|
+
# or
|
|
12
|
+
bun add @fjandin/react-shader
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Basic Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { ReactShader } from "@fjandin/react-shader"
|
|
19
|
+
|
|
20
|
+
const fragment = `#version 300 es
|
|
21
|
+
precision highp float;
|
|
22
|
+
|
|
23
|
+
uniform float iTime;
|
|
24
|
+
uniform vec2 iResolution;
|
|
25
|
+
|
|
26
|
+
out vec4 fragColor;
|
|
27
|
+
|
|
28
|
+
void main() {
|
|
29
|
+
vec2 uv = gl_FragCoord.xy / iResolution;
|
|
30
|
+
vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));
|
|
31
|
+
fragColor = vec4(color, 1.0);
|
|
32
|
+
}
|
|
33
|
+
`
|
|
34
|
+
|
|
35
|
+
function App() {
|
|
36
|
+
return (
|
|
37
|
+
<div style={{ width: "800px", height: "600px" }}>
|
|
38
|
+
<ReactShader fragment={fragment} />
|
|
39
|
+
</div>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Props
|
|
45
|
+
|
|
46
|
+
| Prop | Type | Required | Default | Description |
|
|
47
|
+
|------|------|----------|---------|-------------|
|
|
48
|
+
| `fragment` | `string` | Yes | - | GLSL fragment shader source code |
|
|
49
|
+
| `vertex` | `string` | No | Default quad shader | GLSL vertex shader source code |
|
|
50
|
+
| `uniforms` | `Record<string, UniformValue>` | No | `{}` | Custom uniform values |
|
|
51
|
+
| `className` | `string` | No | - | CSS class name for the container |
|
|
52
|
+
| `debug` | `boolean` | No | `false` | Show debug overlay with resolution and mouse info |
|
|
53
|
+
| `fullscreen` | `boolean` | No | `false` | Render as fixed fullscreen overlay |
|
|
54
|
+
| `timeScale` | `number` | No | `1` | Scale factor for elapsed time |
|
|
55
|
+
| `onFrame` | `(info: FrameInfo) => void` | No | - | Callback invoked on each frame |
|
|
56
|
+
|
|
57
|
+
## Built-in Uniforms
|
|
58
|
+
|
|
59
|
+
These uniforms are automatically provided to your shader every frame:
|
|
60
|
+
|
|
61
|
+
| Uniform | GLSL Type | Description |
|
|
62
|
+
|---------|-----------|-------------|
|
|
63
|
+
| `iTime` | `float` | Elapsed time in seconds (scaled by `timeScale` prop) |
|
|
64
|
+
| `iMouse` | `vec2` | Mouse position in pixels (Y=0 at bottom) |
|
|
65
|
+
| `iMouseLeftDown` | `float` | `1.0` when left mouse button is pressed, `0.0` otherwise |
|
|
66
|
+
| `iResolution` | `vec2` | Canvas resolution in pixels (includes high-DPI scaling) |
|
|
67
|
+
|
|
68
|
+
## Custom Uniforms
|
|
69
|
+
|
|
70
|
+
Pass custom uniform values via the `uniforms` prop:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<ReactShader
|
|
74
|
+
fragment={fragment}
|
|
75
|
+
uniforms={{
|
|
76
|
+
scale: 2.0, // float
|
|
77
|
+
offset: [0.5, 0.5], // vec2
|
|
78
|
+
color: [1.0, 0.5, 0.2], // vec3
|
|
79
|
+
transform: [1, 0, 0, 1], // vec4
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Supported types:
|
|
85
|
+
- `number` → `float`
|
|
86
|
+
- `[number, number]` → `vec2`
|
|
87
|
+
- `[number, number, number]` → `vec3`
|
|
88
|
+
- `[number, number, number, number]` → `vec4`
|
|
89
|
+
|
|
90
|
+
## Frame Callback
|
|
91
|
+
|
|
92
|
+
Use the `onFrame` callback to update uniforms based on animation timing:
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
function App() {
|
|
96
|
+
const [customTime, setCustomTime] = useState(0)
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<ReactShader
|
|
100
|
+
fragment={fragment}
|
|
101
|
+
uniforms={{ customTime }}
|
|
102
|
+
onFrame={(info) => {
|
|
103
|
+
setCustomTime((prev) => prev + info.deltaTime * 0.5)
|
|
104
|
+
}}
|
|
105
|
+
/>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
The `FrameInfo` object contains:
|
|
111
|
+
- `deltaTime` - Time since last frame in seconds
|
|
112
|
+
- `time` - Total elapsed time in seconds
|
|
113
|
+
- `resolution` - Canvas resolution as `[width, height]`
|
|
114
|
+
- `mouse` - Mouse position as `[x, y]`
|
|
115
|
+
|
|
116
|
+
## TypeScript
|
|
117
|
+
|
|
118
|
+
All types are exported:
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import type {
|
|
122
|
+
Vec2,
|
|
123
|
+
Vec3,
|
|
124
|
+
Vec4,
|
|
125
|
+
UniformValue,
|
|
126
|
+
DefaultUniforms,
|
|
127
|
+
FrameInfo,
|
|
128
|
+
ReactShaderProps,
|
|
129
|
+
} from "@fjandin/react-shader"
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Features
|
|
133
|
+
|
|
134
|
+
- WebGL2 with WebGL1 fallback
|
|
135
|
+
- High-DPI display support via `devicePixelRatio`
|
|
136
|
+
- Automatic canvas resizing
|
|
137
|
+
- Shader compilation error display
|
|
138
|
+
- Context loss/restoration handling
|
|
139
|
+
- Mouse tracking with WebGL coordinate convention
|
|
140
|
+
|
|
141
|
+
## Requirements
|
|
142
|
+
|
|
143
|
+
- React >= 17.0.0
|
|
144
|
+
|
|
145
|
+
## License
|
|
146
|
+
|
|
147
|
+
MIT
|