React Shaders

React Shaders is an open source library for creating GLSL/WebGL shaders with support for modern shader bindings.

import { Shader } from 're-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

npm i re-shaders

pnpm i re-shaders

bun add re-shaders