projectseptemberinc
gl-react

Updated a month ago

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:

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