gl-react

OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm.

More technically, gl-react-native 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 any UI content... anything you can imagine!

There's also a gl-react-native version gl-react with the same API.

Examples

Open Examples page and 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.

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 React.Component {
  render () {
    const { width, height } = this.props;
    return <GL.View
      shader={shaders.helloGL}
      width={width}
      height={height}
    />;
  }
}

Installation

npm i --save gl-react

Documentation and difference with gl-react-native

gl-react adopts the same API of gl-react-native, therefore you can read gl-react-native documentation.

GL.Target limited support

GL.Target have a more limited support because the web does not allow to draw DOM element in Canvas.

Only one child is supported per GL.Target and it MUST be either: an <img />, a <video /> or a <canvas />.

You might want to take a look at react-canvas for drawing content.

Influence / Credits

• stack.gl approach
• GLSL.io and Diaporama
• Source code of React Native