Modern GLSL/WebGL bindings & components for React and Typescript.
npm i react-shadersReact Shaders is Rysana's open source library for creating GLSL/WebGL shaders in React and Typescript, with support for modern shader bindings like those in Shadertoy and Rysana. react-shaders is built on the combined work of Morgan Villedieu's shadertoy-react and some modifications by Rysana.
Log -- Website -- Docs -- Rysana
Please read the docs on the website: https://rysana.com/docs/react-shaders
index.tsx (React) |
example.glsl (GLSL) |
|---|---|
import { Shader } from 'react-shaders'
import code from './example.glsl'
return (
<Shader fs={code} />
) |
void mainImage(out vec4 O,in vec2 I){
I=.5-(I/iResolution.xy);
vec3 col=.5+vec3(I,.5*sin(iTime));
I*=vec2(1.,iResolution.y/iResolution.x);
float z=.5*sin((dot(I,I)+iTime*5e-2)/.01);
O=vec4(col*(1.+z),1.);} |
You can install react-shaders with npm, pnpm, or yarn, and you can build it from source with the build script.
npm |
pnpm |
yarn |
|---|---|---|
npm i react-shaders |
pnpm i react-shaders |
yarn add react-shaders |
- Morgan Villedieu @mvilledieu: Code, creator of shadertoy-react
- Charlie Hoey @flimshaw: Code, contributed to shadertoy-react
- Iñigo Quilez & Pol Jeremias: Shadertoy GL syntax, creators of Shadertoy