0.1.165 • Published 8 months ago
react-glsl v0.1.165
React GLSL
A minimal wrapper for GLSL shaders in React.
Basic usage:
import { ShaderCanvas } from "react-glsl";
const fragment = `#version 300 es
precision highp float;
uniform vec2 resolution;
uniform vec2 mouse;
uniform float time;
void main() {
vec2 position = ( gl_FragCoord.xy / resolution.xy );
float dist = length(position - vec2(.5));
float t = .5 + (sin(time*3.) * .5);
outColor = vec4(dist, dist/1.8, t, 1);
}
`;
export const Shader = () => (
<div style={{ width: "100%", height: "100%" }}>
<ShaderCanvas glsl={fragment} mouse time />
</div>
);
***Note: to use react-glsl in a NextJs project, make sure to set client mode:
"use client";
Pass in fragment shader as a string with optional props:
type uniform = {
name: string;
value: number | number[];
};
type ShaderCanvasProps = {
glsl: string;
enableMouse?: boolean;
enableTime?: boolean;
uniforms?: uniform[];
pixelRatio?: number;
style?: CSSProperties;
className?: string;
webglAttributes?: WebGLContextAttributes;
};
- glsl - fragment shader string
- enableMouse - default: true enable mouse postion uniform (vec2 from 0-1 scaled to canvas size)
- enableTime - default: true enable time uniform (float)
- uniforms - array of uniform objects, each with a name and value (float|vec2|vec3|vec4)
- pixelRatio - set custom pixelRatio
- style - css for canvas element
- className - string of css class names
- webglAttributes - add additional webgl customization
Inspired By:
0.1.12
8 months ago
0.1.13
8 months ago
0.1.14
8 months ago
0.1.15
8 months ago
0.1.165
8 months ago
0.1.16
8 months ago
0.1.10
9 months ago
0.1.11
9 months ago
0.1.2
9 months ago
0.1.8
9 months ago
0.1.7
9 months ago
0.1.9
9 months ago
0.1.4
9 months ago
0.1.3
9 months ago
0.1.6
9 months ago
0.1.5
9 months ago
0.1.1
2 years ago
0.1.0
2 years ago