gl-react/docs/api/Component.md

Component

GL.Component is the class to extend to implement a GL Component.

class MyEffect extends GL.Component {
  render () {
    return <GL.View ...>...</GL.View>;
  }
}

GL.Component allows to compose effects: it tells the gl-react-core algorithm to "unfold" the render() looking for a GL.View to merge with.

Although it is technically not required to extend GL.Component (you can still use React.Component), this is generally a good idea because you always want to make a component "composable".

Composing effects

Effects component can be implemented as follow:

// Assuming we have defined a shaders.myEffect, where the frag have:
// a `tex` sampler2D uniform
// a `someParam` uniform
class MyEffect extends GL.Component {
  render () {
    const { width, height, children, someParam } = this.props;
    return <GL.View shader={shaders.myEffect} width={width} height={height} uniforms={{ someParam }}>
      <GL.Target uniform="tex">{children}</GL.Target>
    </GL.View>;
  }
}

Once you have defined effect components that inject children (let's say Blur and Negative), you can compose them together.

Example:

<Blur factor={1.2} width={200} height={150}>
  <Negative width={200} height={150}>
    http://i.imgur.com/qM9BHCy.jpg
  </Negative>
</Blur>

and define another generic component out of it:

class BlurNegative extends GL.Component {
  render () {
    const { width, height, blur, children } = this.props;
    return <Blur factor={blur} width={width} height={height}>
      <Negative width={width} height={height}>
        {children}
      </Negative>
    </Blur>;
  }
}

and use it:

<BlurNegative factor={1.2} width={200} height={150}>
  http://i.imgur.com/qM9BHCy.jpg
</BlurNegative>

Implementation notes

Effects composition are made efficient using OpenGL Framebuffers: the rendering is made in the same pipeline.

gl-react-core contains the core logic (shared across both gl-react and gl-react-native) that convert the Virtual DOM Tree into data, an object tree that represent the rendering pipeline.

Respective implementation will then uses that data tree and render it in OpenGL (for gl-react-native) or in WebGL (for gl-react, using stack.gl libs).