gem-hunter

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)

• Cookbook examples (pnpm cookbook to run locally)
• Expo Cookbook
• JSFiddle hello gl example
• 

• GLSL spec
• 'the books of shaders'
• shader-school workshop

• onthisspot.ca
• ProjectSeptember
• WallGen
• noisesculptor.com
• ... your project ?

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",
  },
});

• React, VDOM and immutable paradigm: OpenGL is a low level imperative and mutable API. This library takes the best of it and exposes it in an immutable, descriptive way with React.
• React lifecycle allows partial GL re-rendering. Only a React Component update will trigger a redraw. Each Node holds a framebuffer state that get redrawn when component updates and schedule a Surface reflow.
• Developer experience
  • React DevTools works like on DOM and allows you to inspect and debug your stack of effects.
• Uniform bindings: bindings from JavaScript objects to OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
• An extensible texture loader that allows to support any content that goes in the shader as a sampler2D texture.
  • support for images
  • support for videos (currently gl-react-dom)
  • support for canvas (gl-react-dom)
• flowtype support.
• Modular, Composable, Sharable. Write shaders once into components that you re-use everywhere! At the end, users don't need to write shaders.

If you are using Atom Editor, you can have JS inlined GLSL syntax highlighted.

To configure this:

• add language-babel package.
• Configure language-babel to add GLSL:source.glsl in settings "JavaScript Tagged Template Literal Grammar Extensions".
• (Bonus) Add this CSS to your Atom > Stylesheet:

/* 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. */
}