Skip to content

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

License

Notifications You must be signed in to change notification settings

rysana-ai/react-shaders

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Shaders lusat minzip package size lusat package version lusat license

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:

Credits to contributors:

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published