gem-hunter
Language: TypeScript
gl-react – React library to write and compose WebGL shaders
gl-react is a React library to write and compose WebGL shaders. Implement complex effects by composing React components.
This universal library must be coupled with one of the concrete implementations:
gl-react-dom for React DOM (backed by WebGL).gl-react-native for React Native (iOS/Android OpenGL, backed by Expo implementation over unimodules).gl-react-expo for React Native (iOS/Android OpenGL, backed by Expo implementation).gl-react-headless for Node.js (backed by headless-gl)pnpm cookbook to run locally)import React from "react"; import { Shaders, Node, GLSL } from "gl-react"; const shaders = Shaders.create({ helloBlue: { frag: GLSL` precision highp float; varying vec2 uv; uniform float blue; void main() { gl_FragColor = vec4(uv.x, uv.y, blue, 1.0); }` } }); class HelloBlue extends React.Component { render() { const { blue } = this.props; return <Node shader={shaders.helloBlue} uniforms={{ blue }} />; } }
import the correct implementation,
import { Surface } from "gl-react-dom"; // for React DOM import { Surface } from "gl-react-expo"; // for React Native via Expo GLView import { Surface } from "gl-react-native"; // for React Native import { Surface } from "gl-react-headless"; // for Node.js!
and this code...
<Surface width={300} height={300}> <HelloBlue blue={0.5} /> </Surface>
...renders:
gl-react uses typedarray-pool which references Node.js's global. Add this to your vite.config.js:
export default defineConfig({ // ... define: { global: "globalThis", }, });
gl-react-dom)gl-react-dom)If you are using Atom Editor, you can have JS inlined GLSL syntax highlighted.
To configure this:
language-babel package.language-babel to add GLSL:source.glsl in settings "JavaScript Tagged Template Literal Grammar Extensions"./* language-babel blocks */ atom-text-editor::shadow .line .ttl-grammar { /* NB: designed for dark theme. can be customized */ background-color: rgba(0, 0, 0, 0.3); } atom-text-editor::shadow .line .ttl-grammar:first-child:last-child { display: block; /* force background to take full width only if ttl-grammar is alone in the line. */ }