CubeSugar / React Native Gpuimage
Licence: mit
GPUImage Component in React Native
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Gpuimage
Ezfilter
A lightweight (<180KB), easy-to-extend Android filter and dynamic sticker framework for adding filters and stickers for camera, video, bitmap and view.(一个轻量级(<180KB)、易扩展的Android滤镜和动态贴纸框架,支持摄像头、视频、图片和视图添加滤镜和贴纸。)
Stars: ✭ 155 (+244.44%)
Mutual labels: opengl, shader, filter
Ios Gpuimage Plus
GPU accelerated image filters for iOS, based on OpenGL.
Stars: ✭ 217 (+382.22%)
Mutual labels: opengl, gpuimage, filter
Android Instagram Filter
a android image filter like instagram
Stars: ✭ 360 (+700%)
Mutual labels: gpuimage, filter
Easy3d
A lightweight, easy-to-use, and efficient C++ library for processing and rendering 3D data
Stars: ✭ 383 (+751.11%)
Mutual labels: opengl, shader
Pesdk Android Demo
A fully customizable photo editor for your app.
Stars: ✭ 464 (+931.11%)
Mutual labels: opengl, filter
image-editor-effects
💎 A WebGL example of image adjustment / effects shaders found in Photoshop, other image editors and game engines.
Stars: ✭ 68 (+51.11%)
Mutual labels: filter, shader
Colormap Shaders
A collection of shaders to draw color maps.
Stars: ✭ 315 (+600%)
Mutual labels: opengl, shader
Android Gpuimage Plus
Android Image & Camera Filters Based on OpenGL.
Stars: ✭ 1,554 (+3353.33%)
Mutual labels: opengl, filter
Bonzomatic
Live shader coding tool and Shader Showdown workhorse
Stars: ✭ 829 (+1742.22%)
Mutual labels: opengl, shader
Android Opengl Canvas
An Android library that provides views using openGL canvas to draw things on SurfaceView or TextureView.
Stars: ✭ 815 (+1711.11%)
Mutual labels: opengl, gpuimage
Ios tips
iOS的一些示例,持续更新中:1、AVFoundation 高仿微信相机拍摄和编辑 2、AVFoundation 人脸检测、实时滤镜、音视频编解码、GPUImage框架的使用等音视频相关内容 3、OpenGLES 4、LeetCode算法练习 5、iOS Crash防护和APM监控 6、WKWebView相关的内容 等........
Stars: ✭ 896 (+1891.11%)
Mutual labels: gpuimage, filter
sparkar-pixelate-shader
simple script-only pixelate shader with Facebook SparkAR.
Stars: ✭ 35 (-22.22%)
Mutual labels: filter, shader
Android Ffmpeg Camerarecord
使用JavaCV提供的支持, 使用OpenGL实时处理+显示摄像头采集的图像, 并使用FFMPEG实时录制音视频
Stars: ✭ 334 (+642.22%)
Mutual labels: opengl, filter
Tess Opt
Demonstration of how we can use tessellation shaders to make faster fragment shaders.
Stars: ✭ 13 (-71.11%)
Mutual labels: opengl, shader
Gpuvideo Android
This library apply video filter on generate an Mp4 and on ExoPlayer video and Video Recording with Camera2.
Stars: ✭ 403 (+795.56%)
Mutual labels: gpuimage, filter
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+25895.56%)
Mutual labels: opengl, shader
Bbmetalimage
A high performance Swift library for GPU-accelerated image/video processing based on Metal.
Stars: ✭ 677 (+1404.44%)
Mutual labels: gpuimage, filter
Librestreaming
Android real-time effect filter rtmp streaming library.using Mediacodec HWencoding&librtmp stream.
Stars: ✭ 856 (+1802.22%)
Mutual labels: gpuimage, filter
[WIP] react-native-GPUImage
GPUImage Component for React Native
Inspired by GPUImage and GPUImage for Android
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 recommended] 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 (
<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.
cd example
npm install
- edit RNGLContext.java
-
react-native run-android
orreact-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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].