ezhangle / gl-react

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

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

gl-react

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

More technically, 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!

There's also gl-react-native, a React Native version implementing the same API.

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.

HelloGL Gist

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

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

class HelloGL extends GL.Component {
  render () {
    const { width, height } = this.props;
    return <GL.View
      shader={shaders.helloGL}
      width={width}
      height={height}
    />;
  }
}

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.

Installation

npm i --save gl-react

Influence / Credits

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

Read Full Documentation