gl-react/docs/api/Target.md

GL.Target

GL.Target allows to render a shader with any content. It can be an image, a video, a complex content (including texts and images...) or even another GL.Component (which allows to compose and stack effects).

Example:

<GL.View
    shader={shaders.myEffect3}
    width={200}
    height={100}>

  <GL.Target uniform="textureName">

    ...children

  </GL.Target>

</GL.View>

Props

• uniform (string) (required): The name of the shader texture uniform to use for rendering the content.
• children (any) (required): The content to use as a uniform texture. It can be:
  • an image URL (this is like giving it as an uniform).
  • a GL.Component or GL.View (this allows to stack effects).
  • any content to rasterize (this feature is advanced, see below for support detail).

difference between gl-react and gl-react-native rasterization support

N.B. The content rasterization remains experimental. It current does not support children content refreshing (like load events,...).

gl-react-native

In gl-react-native, GL.Target can contain any content! The resulting UIView will be rasterized and rendered into the GL View.

Example (adapted from Simple/):

<HueRotate width={width} height={height} hue={hue}>
  <Image source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}
    style={{ width: 256, height: 244 }} />
  <Text style={styles.demoText1}>Throw me to the wolves</Text>
  <Text style={styles.demoText2}>{text}</Text>
</HueRotate>

(and here is render implementation of HueRotate)

<GL.View
  shader={shaders.hueRotate}
  width={width}
  height={height}
  uniforms={{ hue }}>
  <GL.Target uniform="tex">{children}</GL.Target>
</GL.View>

gl-react

GL.Target have a limited support in gl-react because the web does not allow to rasterize any DOM element.

Only one child is supported per GL.Target and it MUST be either: an <img />, a <video /> or a <canvas />.

If you want to implement effect over complex content, we highly recommend you to use react-canvas.

Same example (adapted from Simple/):

<HueRotate width={width} height={height} hue={hue}>
  <Surface width={width} height={height} top={0} left={0}>
    <Image src="http://i.imgur.com/qVxHrkY.jpg"
      style={{ width: 256, height: 244, top: 0, left: 0 }} />
    <Text style={styles.demoText1}>Throw me to the wolves</Text>
    <Text style={styles.demoText2}>{text}</Text>
  </Surface>
</HueRotate>

Note how the react-canvas is very close to React Native's code.