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/react@15.3.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/gl-react-dom@2.2.5/gl-react-dom.js"></script>
<script src="https://unpkg.com/gl-react@2.2.8/gl-react.js"></script>
<script src="https://unpkg.com/gl-react-dom@2.2.6/gl-react-dom.js"></script>
<div id="root"></div>
<!--
Welcome to gl-react playground.

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

Babel + JSX

GL;// import GL from "gl-react";

// statically define your shaders
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);
}`
  }
});

// create React components
const HelloGL = GL.createComponent(
  ({ blue }) =>
  <GL.Node
    shader={shaders.helloGL}
    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 GLReactDOM from "gl-react-dom";
ReactDOM.render(
  <Surface width={300} height={200}>
    <HelloGL blue={0.5} />
  </Surface>,
  document.getElementById("root"),
);