gl-react (v4)

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:

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:

432492c6-475c-11e5-9328-f3d5187298c1

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.

0527cce2-b306-11e6-85ee-5020be994c10

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

GitHub

https://github.com/freelancelife/gl-react