rysana-ai / react-shaders

Modern GLSL/WebGL bindings & components for React and Typescript.

React Shaders

Modern GLSL/WebGL bindings & components for React and Typescript.

npm i react-shaders

React 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

---

Documentation

Please read the docs on the website: https://rysana.com/docs/react-shaders

Basic example

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.);}

Installation

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

Contributors

Credits to original authors:

• 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

Credits to contributors:

• John @jrysana: Code
• aremorov @aremorov: Code