gl-react (v6)

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)

Links

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

References

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

They use gl-react 🙂

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

Gist

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:

Usage with Vite

gl-react uses typedarray-pool which references Node.js's global. Add this to your vite.config.js:

export default defineConfig({
  // ...
  define: {
    global: "globalThis",
  },
});

Features

• 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.

Atom nice GLSL highlighting

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