Skip to content

Latest commit

 

History

History
211 lines (181 loc) · 6.2 KB

README.md

File metadata and controls

211 lines (181 loc) · 6.2 KB
Raw

[WIP] react-native-GPUImage

npm npm

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

  1. npm i gl-react --save
  2. npm i gl-react-native --save
  3. npm i gl-react-image --save [optional, but recommended]
  4. npm i wj-react-native-gpuimage --save
  5. 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 (
        <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>
    );
}
...
  • 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.

  1. cd example
  2. npm install
  3. edit RNGLContext.java
  4. 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);
    }
}

SHOWCASE

PixelateEffect HalftoonEffect PolkaDotEffect VignetteEffect CannyEdgeDetect

PROGRESS

Filters

  • GPUImageFilter
  • GPUImageTwoInputFilter
  • GPUImage3x3TextureSamplingFilter

Color processing

  • GPUImageBrightnessFilter
  • GPUImageLevelsFilter
  • GPUImageExposureFilter
  • GPUImageContrastFilter
  • GPUImageSaturationFilter
  • GPUImageGammaFilter
  • GPUImageColorMatrixFilter
  • GPUImageRGBFilter
  • GPUImageHSBFilter
  • GPUImageHueFilter
  • GPUImageColorInvertFilter
  • GPUImageGrayscaleFilter
  • GPUImageLuminanceThresholdFilter

Image processing

  • GPUImage3x3ConvolutionFilter
  • GPUImageLocalBinaryPatternFilter
  • GPUImageColorLocalBinaryPatternFilter
  • GPUImageSobelEdgeDetectionFilter
  • GPUImageThresholdEdgeDetectionFilter
  • GPUImageDirectionalSobelEdgeDetectionFilter
  • GPUImageDirectionalNonMaximumSuppressionFilter
  • GPUImageWeakPixelInclusionFilter
  • GPUImageCannyEdgeDetectionFilter

Blends

  • GPUImageSourceOverBlendFilter
  • GPUImageColorBurnBlendFilter
  • GPUImageColorDodgeBlendFilter
  • GPUImageDarkenBlendFilter
  • GPUImageDifferenceBlendFilter
  • GPUImageDissolveBlendFilter
  • GPUImageExclusionBlendFilter
  • GPUImageHardLightBlendFilter
  • GPUImageSoftLightBlendFilter
  • GPUImageLightenBlendFilter
  • GPUImageAddBlendFilter
  • GPUImageSubstractBlendFilter
  • GPUImageDivideBlendFilter
  • GPUImageMultiplyBlendFilter
  • GPUImageOverlayBlendFilter
  • GPUImageScreenBlendFilter
  • GPUImageChromaKeyBlendFilter
  • GPUImageAlphaBlendFilter
  • GPUImageNormalBlendFilter
  • GPUImageColorBlendFilter
  • GPUImageHueBlendFilter
  • GPUImageSaturationBlendFilter
  • GPUImageLuminosityBlendFilter
  • GPUImageLinearBurnBlendFilter
  • GPUImageMaskFilter

Effects

  • GPUImagePixellateFilter
  • GPUImagePolarPixellateFilter
  • GPUImagePixellatePositionFilter
  • GPUImagePolkaDotFilter
  • GPUImageHalftoneFilter
  • GPUImageCrosshatchFilter
  • GPUImageSketchFilter
  • GPUImageThresholdSketchFilter
  • GPUImageEmbossFilter
  • GPUImageToonFilter
  • GPUImageVignetteFilter