gl-react playground template

gl-react is a React library to write OpenGL effects in a descriptive way and from the bottom-up (create React component from shader code, compose them to build up more complex effects).

by greweb

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/gl-react.js"></script>
<script src="https://unpkg.com/[email protected]/gl-react-dom.js"></script>
<div id="root"></div>

Babel + JSX

const { Shaders, Node, GLSL } = GLReact; // import from "gl-react";

const shaders = Shaders.create({
  helloBlue: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});
class HelloBlue extends React.Component {
  render() {
    const { blue } = this.props;
    return <Node
      shader={shaders.helloBlue}
      uniforms={{ blue }}
    />;
  }
}

//^ code written so far is "universal", it can be run on Web and Native (iOS/Android/desktop).
// now using gl-react-dom WebGL implementation to render our component in a Surface (canvas).
const {Surface} = GLReactDOM; // import from "gl-react-dom";
ReactDOM.render(
  <Surface width={300} height={200}>
    <HelloBlue blue={0.5} />
  </Surface>,
  document.getElementById("root"),
);