OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm
Latest commit df83206 Feb 8, 2017 @gre gre 2.2.9

STATUS: project is being rewritten from scratch in It will be the next v3.

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

icon 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:

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.


you want to experiment / show us some code?

you can fork this JSFiddle:


Open Examples page / Read the code.

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

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 }) =>
    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} />



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


npm i --save gl-react

Influence / Credits

Read Full Documentation