wj-react-native-gpuimage

1.0.2 • Public • Published 8 years ago

[WIP] react-native-GPUImage

GPUImage Component for React Native

Inspired by GPUImage and GPUImage for Android

SHOWCASE

DEPENDENCIES

React-Native > 0.40
gl-react
gl-react-native

DOC

INSTALL

npm i gl-react --save
npm i gl-react-native --save
npm i gl-react-image --save [optional, but recommanded]
npm i wj-react-native-gpuimage --save
edit file android/src/main/java/com/projectseptember/RNGL/RNGLContext.java in node_module/gl-react-native/ as showed in NOTE part

USAGE

BASIC

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>
    );
}
...

CUSTOM SHADER

import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
    return (
        <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>
    );
}
...

GROUP

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
edit RNGLContext.java
react-native run-android or react-native run-ios

NOTE

vertex shader support for Android

// 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);
    }
}