https://github.com/cubesugar/react-native-gpuimage
GPUImage Component in React Native
https://github.com/cubesugar/react-native-gpuimage
filter gpuimage opengl react react-native shader
Last synced: about 1 month ago
JSON representation
GPUImage Component in React Native
- Host: GitHub
- URL: https://github.com/cubesugar/react-native-gpuimage
- Owner: CubeSugar
- License: mit
- Created: 2017-04-16T10:45:05.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T06:34:36.000Z (almost 3 years ago)
- Last Synced: 2025-04-10T01:12:28.673Z (about 1 month ago)
- Topics: filter, gpuimage, opengl, react, react-native, shader
- Language: JavaScript
- Size: 1.16 MB
- Stars: 56
- Watchers: 4
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [WIP] react-native-GPUImage
[](https://www.npmjs.com/package/wj-react-native-gpuimage)
[](https://www.npmjs.com/package/wj-react-native-gpuimage)
GPUImage Component for React Native
Inspired by [GPUImage](https://github.com/BradLarson/GPUImage) and [GPUImage for Android](https://github.com/CyberAgent/android-gpuimage)
[SHOWCASE](#user-content-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](#user-content-note) part
### USAGE
* BASIC
```
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
);
}
...
```
* CUSTOM SHADER
```
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
);
}
...
```
* GROUP
```
import * as GPUImage from "wj-react-native-gpuimage";
...
render() {
return (
);
}
...
```
Check [example](https://github.com/CubeSugar/react-native-GPUImage/tree/master/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
## PROGRESS
#### Filters
- [x] GPUImageFilter
- [x] GPUImageTwoInputFilter
- [x] GPUImage3x3TextureSamplingFilter
#### Color processing
- [x] GPUImageBrightnessFilter
- [ ] GPUImageLevelsFilter
- [ ] GPUImageExposureFilter
- [x] GPUImageContrastFilter
- [x] GPUImageSaturationFilter
- [x] GPUImageGammaFilter
- [x] GPUImageColorMatrixFilter
- [x] GPUImageRGBFilter
- [ ] GPUImageHSBFilter
- [ ] GPUImageHueFilter
- [x] GPUImageColorInvertFilter
- [x] GPUImageGrayscaleFilter
- [x] GPUImageLuminanceThresholdFilter
#### Image processing
- [x] GPUImage3x3ConvolutionFilter
- [x] GPUImageLocalBinaryPatternFilter
- [x] GPUImageColorLocalBinaryPatternFilter
- [x] GPUImageSobelEdgeDetectionFilter
- [x] GPUImageThresholdEdgeDetectionFilter
- [x] GPUImageDirectionalSobelEdgeDetectionFilter
- [x] GPUImageDirectionalNonMaximumSuppressionFilter
- [x] GPUImageWeakPixelInclusionFilter
- [x] GPUImageCannyEdgeDetectionFilter
#### Blends
- [x] GPUImageSourceOverBlendFilter
- [x] GPUImageColorBurnBlendFilter
- [x] GPUImageColorDodgeBlendFilter
- [x] GPUImageDarkenBlendFilter
- [x] GPUImageDifferenceBlendFilter
- [x] GPUImageDissolveBlendFilter
- [x] GPUImageExclusionBlendFilter
- [x] GPUImageHardLightBlendFilter
- [x] GPUImageSoftLightBlendFilter
- [x] GPUImageLightenBlendFilter
- [x] GPUImageAddBlendFilter
- [x] GPUImageSubstractBlendFilter
- [x] GPUImageDivideBlendFilter
- [x] GPUImageMultiplyBlendFilter
- [x] GPUImageOverlayBlendFilter
- [x] GPUImageScreenBlendFilter
- [x] GPUImageChromaKeyBlendFilter
- [x] GPUImageAlphaBlendFilter
- [x] GPUImageNormalBlendFilter
- [x] GPUImageColorBlendFilter
- [x] GPUImageHueBlendFilter
- [x] GPUImageSaturationBlendFilter
- [x] GPUImageLuminosityBlendFilter
- [x] GPUImageLinearBurnBlendFilter
- [x] GPUImageMaskFilter
#### Effects
- [x] GPUImagePixellateFilter
- [x] GPUImagePolarPixellateFilter
- [x] GPUImagePixellatePositionFilter
- [x] GPUImagePolkaDotFilter
- [x] GPUImageHalftoneFilter
- [x] GPUImageCrosshatchFilter
- [x] GPUImageSketchFilter
- [x] GPUImageThresholdSketchFilter
- [x] GPUImageEmbossFilter
- [x] GPUImageToonFilter
- [x] GPUImageVignetteFilter