Skip to content
OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm
Branch: master
Clone or download
Latest commit f46615a Oct 7, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs add notes in doc Jun 19, 2016
src use prop-types pkg Sep 23, 2017
.babelrc Babel 6 Dec 4, 2015
.eslintrc.json add runtime object to inject some decorator functions Jun 19, 2016
.gitignore umd bundle Sep 24, 2016
.npmignore downgrade to initial version 2.0.1 Dec 5, 2015
README.md Update README.md Feb 6, 2017
book.json define gitbook version Dec 3, 2015
package.json 2.3.1 Oct 7, 2017

README.md

STATUS: project is being rewritten from scratch in https://github.com/gre/gl-react. 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.

Playground

you want to experiment / show us some code?

you can fork this JSFiddle:

https://jsfiddle.net/greweb/bztz8494/

Examples

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

Read Full Documentation

You can’t perform that action at this time.