mirror of
https://github.com/gre/gl-react.git
synced 2026-01-25 16:43:36 +00:00
99 lines
2.6 KiB
Markdown
99 lines
2.6 KiB
Markdown
# Hue Rotate on Text+Image
|
|
|
|
`gl-react` not only allows to add effects on top of images but also on top of **any** content. This example shows the Hue rotation effect on top of **texts and image**.
|
|
|
|
|
|
**`gl-react-native` version:**
|
|
|
|
```html
|
|
<HueRotate
|
|
width={256}
|
|
height={180}
|
|
hue={hue}>
|
|
<Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
|
|
<Text style={styles.demoText1}>Throw me to the wolves</Text>
|
|
<Text style={styles.demoText2}>{text}</Text>
|
|
</HueRotate>
|
|
```
|
|
|
|
**`gl-react` version:** (using `react-canvas`)
|
|
|
|
```html
|
|
<HueRotate
|
|
width={256}
|
|
height={180}
|
|
hue={hue}>
|
|
<ReactCanvasContentExample width={256} height={180} text={text} />
|
|
<Surface width={256} height={180} top={0} left={0}>
|
|
<Image src="http://i.imgur.com/qVxHrkY.jpg" style={{ width: 256, height: 244, top: 0, left: 0 }} />
|
|
<Text style={styles.demospan1}>Throw me to the wolves</Text>
|
|
<Text style={styles.demospan2}>and I will return</Text>
|
|
<Text style={styles.demospan3}>{text}</Text>
|
|
</Surface>
|
|
</HueRotate>
|
|
```
|
|
|
|
|
|
|
|
## Implementation
|
|
|
|
```js
|
|
const React = require("react-native");
|
|
const GL = require("gl-react-native");
|
|
|
|
const shaders = GL.Shaders.create({
|
|
hueRotate: {
|
|
frag: `
|
|
precision highp float;
|
|
varying vec2 uv;
|
|
uniform sampler2D tex;
|
|
uniform float hue;
|
|
|
|
const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
|
|
const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
|
|
|
|
void main() {
|
|
vec3 yColor = rgb2yiq * texture2D(tex, uv).rgb;
|
|
float originalHue = atan(yColor.b, yColor.g);
|
|
float finalHue = originalHue + hue;
|
|
float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);
|
|
vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
|
|
gl_FragColor = vec4(yiq2rgb*yFinalColor, 1.0);
|
|
}
|
|
`
|
|
}
|
|
});
|
|
|
|
module.exports = GL.createComponent(
|
|
({ hue, children, ...rest }) =>
|
|
<GL.View
|
|
{...rest}
|
|
shader={shaders.hueRotate}
|
|
uniforms={{ hue }}>
|
|
<GL.Uniform name="tex">{children}</GL.Uniform>
|
|
</GL.View>
|
|
, { displayName: "HueRotate" });
|
|
```
|
|
|
|
The `GL.Uniform` describes which texture uniform is used for the rasterization of its children content.
|
|
|
|
> Note how powerful it is to **compose** React Components that way.
|
|
|
|
### Improved version
|
|
|
|
Here is an even more concise way of writing your component.
|
|
|
|
```js
|
|
...
|
|
module.exports = GL.createComponent(
|
|
({ hue, children: tex, ...rest }) =>
|
|
<GL.View
|
|
{...rest}
|
|
shader={shaders.hueRotate}
|
|
uniforms={{ hue, tex }}
|
|
/>
|
|
, { displayName: "HueRotate" });
|
|
```
|
|
|
|
> Remember that you can totally avoid to use `GL.Uniform` and give everything to `uniforms` props.
|