imclab / gl-react

OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm

Gitbook documentation / Github / live demos / gl-react-dom / gl-react-native / #gl-react on reactiflux

gl-react

WebGL/OpenGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.

gl-react allows you to write a fragment shader that covers a component. The shader can render: generated graphics/demos, effects on top of images, effects over content (video, canvas)... anything you can imagine!

gl-react is the universal library that have 2 implementations:

• gl-react-dom for React DOM (web using WebGL).
• gl-react-native for React Native (iOS and Android using OpenGL).

The library gl-react share most of the common code and exposes { Node, Uniform, Shaders, createComponent }.

Both gl-react-dom and gl-react-native depends on gl-react and exposes the { Surface } implementation.

Examples

Open Examples page / Read the code.

• Simple contains minimal examples, perfect to learn how to use the library. See also the Related Documentation.
• SpringCursor shows usage with react-motion.
• AdvancedEffects' Intro shows usage with react-canvas.
• Video shows usage with the <video/> tag.
• AdvancedEffects's Transition shows a minimal interoperability with GLSL Transitions.
• Blur shows an advanced example of multi-pass pipeline and also shows usage of glslify.
• VideoBlur shows multi-pass Blur over Hue over a <video>! It demonstrates the "shared computation" of the rendering tree introduced by 1.0.0.
• Image Effects implements an Image Effects app for Web and Native with a same codebase.

Some universal GL effects made with gl-react (published on NPM)

• gl-react-blur
• gl-react-contrast-saturation-brightness
• gl-react-negative
• gl-react-hue-rotate
• gl-react-color-matrix

HelloGL Gist

const GL = require("gl-react");
const React = require("react");

const shaders = GL.Shaders.create({
  helloGL: {
    frag: `
precision highp float;
varying vec2 uv;
uniform float blue;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});

module.exports = GL.createComponent(
  ({ blue }) =>
  <GL.Node
    shader={shaders.helloGL}
    uniforms={{ blue }}
  />,
  { displayName: "HelloGL" });

const { Surface } = require("gl-react-dom"); // in React DOM context
const { Surface } = require("gl-react-native"); // in React Native context

<Surface width={511} height={341}>
  <HelloGL blue={0.5} />
</Surface>

renders

Focus

• Virtual DOM 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.
• Performance
• Developer experience: the application doesn't crash on bugs - Live Reload support make experimenting with effects easy (also gl-react-native's version uses React Native error message to display GLSL errors).
• Uniform bindings: bindings from JavaScript objects to OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
• Support for images as a texture uniform.
• Support for <canvas>, <video> as a texture uniform.

gl-react primary goal is not to do 3D. The library currently focus on stacking fragment shaders (that runs with static vertex) and exposes these features in a simple API applying React paradigm. This already unlock a lot of capabilities shown in the examples.

3D graphics implies more work on vertex shader and vertex data. We might eventually implement this. In the meantime, if this is a use-case for you, feel free to comment on this issue.

Installation

npm i --save gl-react

Influence / Credits

• stack.gl approach (gl-shader, gl-texture2d, gl-fbo are library directly used by gl-react-dom)
• GLSL.io and Diaporama

Read Full Documentation