gl-react/docs/api/Uniform.md

GL.Uniform

GL.Uniform is an helper for describing content uniform.

GL.View allows uniform VDOM 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).

<GL.Uniform name="foo">{value}</GL.Uniform> is an alternative syntax to passing { foo: value } in parent GL.View uniforms props. It is just more convenient for VDOM uniform value.

Example:

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

  <GL.Uniform name="textureName">

    ...children

  </GL.Uniform>

</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 in GL.View's uniforms object).
  • a GL.Component or GL.View (this allows to stack effects).
  • any content to rasterize (this feature is advanced, see below for support detail).

Content rasterization support

N.B. The content rasterization remains experimental. The complexity to implement it is to know when content get refreshed (for instance when an image loads,...). When content to rasterize is provided, the current implementation will ALWAYS re-draw the GLView after each Virtual DOM render(), so if you can observe a specific content event (e.g: load) you may want to forceUpdate or use a state.

Using gl-react-native

In gl-react-native, GL.Uniform 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.Uniform name="tex">{children}</GL.Uniform>
</GL.View>

Using gl-react

GL.Uniform 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.Uniform 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.