mirror of
https://github.com/gre/gl-react.git
synced 2026-01-18 16:16:59 +00:00
86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# 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:**
|
|
|
|
```html
|
|
<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/):**
|
|
|
|
```html
|
|
<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`)
|
|
|
|
```html
|
|
<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`](https://github.com/Flipboard/react-canvas).
|
|
|
|
**Same example (adapted from Simple/):**
|
|
|
|
```html
|
|
<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.
|