GPUImage Component in React Native
GPUImage Component for React Native
Inspired by GPUImage and GPUImage for Android
npm i gl-react --save
npm i gl-react-native --save
npm i gl-react-image --save
[optional, but recommended]npm i wj-react-native-gpuimage --save
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
<Surface width={300} height={300}>
<GPUImage.GPUImageColorInvertFilter>
<GLImage
source={{url: "https://avatars3.githubusercontent.com/u/3667305?v=3&s=460", width: 300, height: 300}}
resizeMode="stretch"
/>
</GPUImage.GPUImageColorInvertFilter>
</Surface>
);
}
...
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
<Surface width={300} height={300}>
<GPUImage.GPUImageFilter
frag={`
precision highp float;
varying vec2 v_texCoord;
uniform float u_red;
void main() {
gl_FragColor = vec4(u_red, v_texCoord.x, v_texCoord.y, 1.0);
}
`}
uniforms={{
u_red: 0.5,
}}
>
</GPUImage.GPUImageFilter>
</Surface>
);
}
...
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
<Surface width={300} height={300}>
<GPUImage.GPUImageColorInvertFilter>
<GPUImage.GPUImageHalftoneFilter fractionalWidthOfPixel={0.2}>
<GLImage
source={{url: "https://avatars3.githubusercontent.com/u/3667305?v=3&s=460", width: 300, height: 300}}
resizeMode="stretch"
/>
</GPUImage.GPUImageHalftoneFilter>
</GPUImage.GPUImageColorInvertFilter>
</Surface>
);
}
...
Check example for more details.
cd example
npm install
react-native run-android
or react-native run-ios
// gl-react-native proj
// android/src/main/java/com/projectseptember/RNGL/RNGLContext.java
public void addShader (final Integer id, final ReadableMap config, final Callback onCompile) {
final String frag = config.getString("frag");
final String name = config.getString("name");
//shaders.put(id, new GLShaderData(name, STATIC_VERT, frag));
String vert = STATIC_VERT;
if (config.hasKey("vert")) {
vert = config.getString("vert");
}
shaders.put(id, new GLShaderData(name, vert, frag));
if (onCompile != null) {
onCompileCallbacks.put(id, onCompile);
}
}