├── .npmignore ├── example ├── .watchmanconfig ├── .gitattributes ├── .babelrc ├── app.json ├── assets │ ├── test_01.jpg │ ├── test_02.jpg │ ├── test_03.png │ └── tex_brick.jpg ├── showcase │ ├── halftoon.png │ ├── pixelate.png │ ├── polkadot.png │ ├── vignette.png │ └── cannyedgedetection.png ├── android │ ├── app │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ ├── BUCK │ │ ├── proguard-rules.pro │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── .buckconfig ├── index.ios.js ├── index.android.js ├── __tests__ │ ├── index.ios.js │ └── index.android.js ├── ios │ ├── example │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m │ ├── example-tvOSTests │ │ └── Info.plist │ ├── example-tvOS │ │ └── Info.plist │ └── example.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ ├── example.xcscheme │ │ └── example-tvOS.xcscheme ├── package.json ├── .gitignore ├── root.js ├── .flowconfig ├── TestCaseList.js └── CaseDetail.js ├── package.json ├── framework └── Filters │ ├── ColorProcessing │ ├── GPUImageColorInvertFilter.js │ ├── GPUImageGrayscaleFilter.js │ ├── GPUImageGammaFilter.js │ ├── GPUImageBrightnessFilter.js │ ├── GPUImageContrastFilter.js │ ├── GPUImageColorMatrixFilter.js │ ├── GPUImageLuminanceThresholdFilter.js │ ├── GPUImageSaturationFilter.js │ └── GPUImageRGBFilter.js │ ├── Effects │ ├── GPUImageSketchFilter.js │ ├── GPUImageEmbossFilter.js │ ├── GPUImageThresholdSketchFilter.js │ ├── GPUImagePixelateFilter.js │ ├── GPUImagePolarPixelateFilter.js │ ├── GPUImageVignetteFilter.js │ ├── GPUImagePixelatePositionFilter.js │ ├── GPUImageHalftoneFilter.js │ ├── GPUImagePolkaDotFilter.js │ ├── GPUImageCrosshatchFilter.js │ └── GPUImageToonFilter.js │ ├── GPUImageFilter.js │ ├── Blends │ ├── GPUImageLightenBlendFilter.js │ ├── GPUImageSourceOverBlendFilter.js │ ├── GPUImageMultiplyBlendFilter.js │ ├── GPUImageSubtractBlendFilter.js │ ├── GPUImageDifferenceBlendFilter.js │ ├── GPUImageMaskFilter.js │ ├── GPUImageDarkenBlendFilter.js │ ├── GPUImageLinearBurnBlendFilter.js │ ├── GPUImageColorBurnBlendFilter.js │ ├── GPUImageScreenBlendFilter.js │ ├── GPUImageExclusionBlendFilter.js │ ├── GPUImageNormalBlendFilter.js │ ├── GPUImageDissolveBlendFilter.js │ ├── GPUImageAlphaBlendFilter.js │ ├── GPUImageSoftLightBlendFilter.js │ ├── GPUImageColorDodgeBlendFilter.js │ ├── GPUImageAddBlendFilter.js │ ├── GPUImageColorBlendFilter.js │ ├── GPUImageLuminosityBlendFilter.js │ ├── GPUImageOverlayBlendFilter.js │ ├── GPUImageHardLightBlendFilter.js │ ├── GPUImageDivideBlendFilter.js │ ├── GPUImageChromaKeyBlendFilter.js │ ├── GPUImageHueBlendFilter.js │ └── GPUImageSaturationBlendFilter.js │ ├── GPUImageTwoInputFilter.js │ ├── ImageProcessing │ ├── GPUImageWeakPixelInclusionFilter.js │ ├── GPUImageCannyEdgeDetectionFilter.js │ ├── GPUImageDirectionalNonMaximumSuppressionFilter.js │ ├── GPUImageSobelEdgeDetectionFilter.js │ ├── GPUImageDirectionalSobelEdgeDetectionFilter.js │ ├── GPUImageLocalBinaryPatternFilter.js │ ├── GPUImageSingleComponentGaussianBlurFilter.js │ ├── GPUImageThresholdEdgeDetectionFilter.js │ ├── GPUImage3x3ConvolutionFilter.js │ └── GPUImageColorLocalBinaryPatternFilter.js │ └── GPUImage3x3TextureSamplingFilter.js ├── LICENSE ├── README.md └── index.js /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } -------------------------------------------------------------------------------- /example/assets/test_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/assets/test_01.jpg -------------------------------------------------------------------------------- /example/assets/test_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/assets/test_02.jpg -------------------------------------------------------------------------------- /example/assets/test_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/assets/test_03.png -------------------------------------------------------------------------------- /example/assets/tex_brick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/assets/tex_brick.jpg -------------------------------------------------------------------------------- /example/showcase/halftoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/showcase/halftoon.png -------------------------------------------------------------------------------- /example/showcase/pixelate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/showcase/pixelate.png -------------------------------------------------------------------------------- /example/showcase/polkadot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/showcase/polkadot.png -------------------------------------------------------------------------------- /example/showcase/vignette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/showcase/vignette.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example 3 | 4 | -------------------------------------------------------------------------------- /example/showcase/cannyedgedetection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/showcase/cannyedgedetection.png -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CubeSugar/react-native-GPUImage/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'example' 2 | include ':gl-react-native' 3 | project(':gl-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/gl-react-native/android') 4 | 5 | include ':app' 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 6 | -------------------------------------------------------------------------------- /example/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | } from 'react-native'; 11 | import Root from './root'; 12 | 13 | AppRegistry.registerComponent('example', () => Root); 14 | -------------------------------------------------------------------------------- /example/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | } from 'react-native'; 11 | import Root from './root'; 12 | 13 | AppRegistry.registerComponent('example', () => Root); 14 | -------------------------------------------------------------------------------- /example/__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /example/__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "example"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/ios/example/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.2.3' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wj-react-native-gpuimage", 3 | "version": "1.0.2", 4 | "description": "gpuimage component for react-native in javascript", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/CubeSugar/react-native-GPUImage.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "react-native", 16 | "opengl", 17 | "shader", 18 | "gpuimage" 19 | ], 20 | "author": "Wei Jian", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/CubeSugar/react-native-GPUImage/issues" 24 | }, 25 | "homepage": "https://github.com/CubeSugar/react-native-GPUImage#readme" 26 | } 27 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "gl-react": "^2.2.10", 11 | "gl-react-image": "0.0.2", 12 | "gl-react-native": "^2.42.3", 13 | "react": "16.0.0-alpha.6", 14 | "react-native": "0.44.0", 15 | "react-native-router-flux": "3.38.0", 16 | "wj-react-native-gpuimage": "^1.0.1" 17 | }, 18 | "devDependencies": { 19 | "babel-jest": "19.0.0", 20 | "babel-preset-react-native": "1.9.1", 21 | "jest": "19.0.2", 22 | "react-test-renderer": "16.0.0-alpha.6" 23 | }, 24 | "jest": { 25 | "preset": "react-native" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageColorInvertFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | export const GPUImageColorInvertFragShaderString = GPUImageFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 14 | gl_FragColor = vec4((1.0 - texColor.rgb), texColor.a); 15 | } 16 | `; 17 | 18 | export const GPUImageColorInvertFilter = GL.createComponent( 19 | ({children})=>{ 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | } 26 | ); -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageGrayscaleFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageLuminanceFragShaderString = GPUImageFragShaderPredefineString + ` 12 | void main() { 13 | lowp vec4 texColor = texture2D(u_texture_0, v_texCoord); 14 | float luminance = dot(texColor.rgb, vec3(0.2125, 0.7154, 0.0721)); 15 | gl_FragColor = vec4(luminance, luminance, luminance, texColor.a); 16 | } 17 | `; 18 | 19 | export const GPUImageGrayscaleFilter = GL.createComponent( 20 | ({children})=>{ 21 | return ( 22 | 23 | {children} 24 | 25 | ); 26 | } 27 | ); -------------------------------------------------------------------------------- /example/ios/exampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/example-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageGammaFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageGammaFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump float u_gamma; 13 | void main() { 14 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 15 | gl_FragColor = vec4(pow(texColor.rgb, vec3(u_gamma)), texColor.a); 16 | } 17 | `; 18 | 19 | export const GPUImageGammaFilter = GL.createComponent( 20 | ({children, gamma})=>{ 21 | return ( 22 | 27 | {children} 28 | 29 | ); 30 | }, 31 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageSketchFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageColorInvertFilter 8 | } from '../ColorProcessing/GPUImageColorInvertFilter'; 9 | import { 10 | GPUImageSobelEdgeDetectionFilter 11 | } from '../ImageProcessing/GPUImageSobelEdgeDetectionFilter'; 12 | 13 | export const GPUImageSketchFilter = GL.createComponent( 14 | ({children, texelWidth, texelHeight, edgeStrength})=>{ 15 | return( 16 | 17 | 20 | {children} 21 | 22 | 23 | ); 24 | } 25 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageEmbossFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImage3x3ConvolutionFilter 8 | } from '../ImageProcessing/GPUImage3x3ConvolutionFilter'; 9 | 10 | export const GPUImageEmbossFilter = GL.createComponent( 11 | ({children, texelWidth, texelHeight, intensity})=>{ 12 | return( 13 | 20 | {children} 21 | 22 | ); 23 | }, 24 | { 25 | defaultProps: { 26 | intensity: 1.0, 27 | } 28 | } 29 | ); -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageBrightnessFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageBrightnessFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump float u_brightness; 13 | void main() { 14 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 15 | gl_FragColor = vec4((texColor.rgb + u_brightness), texColor.a); 16 | } 17 | `; 18 | 19 | export const GPUImageBrightnessFilter = GL.createComponent( 20 | ({children, brightness})=>{ 21 | return ( 22 | 27 | {children} 28 | 29 | ); 30 | }, 31 | ); -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageContrastFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageContrastFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump float u_contrast; 13 | void main() { 14 | lowp vec4 texColor = texture2D(u_texture_0, v_texCoord); 15 | gl_FragColor = vec4(((texColor.rgb - vec3(0.5)) * u_contrast + vec3(0.5)), texColor.a); 16 | } 17 | `; 18 | 19 | export const GPUImageContrastFilter = GL.createComponent( 20 | ({children, contrast})=>{ 21 | return ( 22 | 27 | {children} 28 | 29 | ); 30 | } 31 | ); -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md 50 | 51 | fastlane/report.xml 52 | fastlane/Preview.html 53 | fastlane/screenshots 54 | -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageColorMatrixFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageColorMatrixFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump mat4 u_matrix; 13 | uniform mediump vec4 u_offset; 14 | void main() { 15 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 16 | vec4 result = texColor * u_matrix + u_offset; 17 | gl_FragColor = result; 18 | } 19 | `; 20 | 21 | export const GPUImageColorMatrixFilter = GL.createComponent( 22 | ({children, matrix, offset})=>{ 23 | return ( 24 | 30 | {children} 31 | 32 | ); 33 | } 34 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageThresholdSketchFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageColorInvertFilter 8 | } from '../ColorProcessing/GPUImageColorInvertFilter'; 9 | import { 10 | GPUImageThresholdEdgeDetectionFilter 11 | } from '../ImageProcessing/GPUImageThresholdEdgeDetectionFilter'; 12 | 13 | export const GPUImageThresholdSketchFilter = GL.createComponent( 14 | ({children, texelWidth, texelHeight, edgeStrength, threshold})=>{ 15 | return( 16 | 17 | 21 | {children} 22 | 23 | 24 | ); 25 | } 26 | ); -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageLuminanceThresholdFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageLuminanceThresholdFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_threshold; 13 | void main() { 14 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 15 | float luminance = step(u_threshold, dot(texColor.rgb, vec3(0.2125, 0.7154, 0.0721))); 16 | gl_FragColor = vec4(luminance, luminance, luminance, texColor.a); 17 | } 18 | `; 19 | 20 | export const GPUImageLuminanceThresholdFilter = GL.createComponent( 21 | ({children, threshold})=>{ 22 | return ( 23 | 28 | {children} 29 | 30 | ); 31 | } 32 | ); -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageSaturationFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageSaturationFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump float u_saturation; 13 | void main() { 14 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 15 | mediump float luminance = dot(texColor.rgb, vec3(0.2125, 0.7154, 0.0721)); 16 | vec3 grayColor = vec3(luminance); 17 | gl_FragColor = vec4(mix(grayColor, texColor.rgb, u_saturation), texColor.a); 18 | 19 | } 20 | `; 21 | 22 | export const GPUImageSaturationFilter = GL.createComponent( 23 | ({children, saturation})=>{ 24 | return ( 25 | 30 | {children} 31 | 32 | ); 33 | } 34 | ); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jian Wei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/root.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | import { 5 | View, 6 | StyleSheet, 7 | } from 'react-native'; 8 | 9 | import {Scene, Router, Modal, TabBar, Schema, Navigator} from 'react-native-router-flux'; 10 | import TestCaseList from './TestCaseList'; 11 | import CaseDetail from './CaseDetail'; 12 | 13 | class Root extends Component { 14 | render() { 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | const styles = StyleSheet.create({ 27 | application:{ 28 | flex:1 29 | }, 30 | tabBarStyle: { 31 | borderTopWidth : .5, 32 | borderColor : '#b7b7b7', 33 | backgroundColor: 'white', 34 | opacity : 1 35 | } 36 | }); 37 | 38 | export default Root; 39 | -------------------------------------------------------------------------------- /framework/Filters/ColorProcessing/GPUImageRGBFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageRGBFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump float u_r; 13 | uniform mediump float u_g; 14 | uniform mediump float u_b; 15 | void main() { 16 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 17 | gl_FragColor = vec4(texColor.r * u_r, 18 | texColor.g * u_g, 19 | texColor.b * u_b, 20 | texColor.a); 21 | } 22 | `; 23 | 24 | export const GPUImageRGBFilter = GL.createComponent( 25 | ({children, r, g, b})=>{ 26 | return ( 27 | 34 | {children} 35 | 36 | ); 37 | }, 38 | ); -------------------------------------------------------------------------------- /framework/Filters/GPUImageFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | export const GPUImageVertShaderString = ` 7 | attribute vec2 position; 8 | varying vec2 v_texCoord; 9 | void main() { 10 | gl_Position = vec4(position, 0.0, 1.0); 11 | v_texCoord = vec2(0.5) * (position + vec2(1.0)); 12 | } 13 | `; 14 | 15 | 16 | export const GPUImageFragShaderPredefineString = ` 17 | precision highp float; 18 | varying vec2 v_texCoord; 19 | uniform sampler2D u_texture_0; 20 | `; 21 | 22 | export const GPUImageFragShaderString = GPUImageFragShaderPredefineString + ` 23 | void main() { 24 | gl_FragColor = texture2D(u_texture_0, v_texCoord); 25 | } 26 | `; 27 | 28 | export const GPUImageFilter = GL.createComponent( 29 | ({children, vert, frag, uniforms})=>{ 30 | return ( 31 | 41 | ); 42 | } 43 | ); 44 | 45 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.projectseptember.RNGL.RNGLPackage; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage(), 27 | new RNGLPackage() 28 | ); 29 | } 30 | }; 31 | 32 | @Override 33 | public ReactNativeHost getReactNativeHost() { 34 | return mReactNativeHost; 35 | } 36 | 37 | @Override 38 | public void onCreate() { 39 | super.onCreate(); 40 | SoLoader.init(this, /* native exopackage */ false); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageLightenBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageLightenBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | gl_FragColor = max(texColor0, texColor1); 22 | } 23 | `; 24 | 25 | export const GPUImageLightenBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageSourceOverBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageSourceOverBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | gl_FragColor = mix(texColor0, texColor1, texColor1.a); 22 | } 23 | `; 24 | 25 | export const GPUImageSourceOverBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageMultiplyBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageMultiplyBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | gl_FragColor = overlay * base + overlay * (1.0 - base.a) + base * (1.0 - overlay.a); 21 | } 22 | `; 23 | 24 | export const GPUImageMultiplyBlendFilter = GL.createComponent( 25 | ({ children, input2nd, input2ndScale}) => { 26 | return ( 27 | 31 | {children} 32 | 33 | ); 34 | }, { 35 | defaultProps: { 36 | input2ndScale: 1.0, 37 | } 38 | } 39 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageSubtractBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageSubtractBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | gl_FragColor = vec4(texColor0.rgb - texColor1.rgb, texColor0.a); 22 | } 23 | `; 24 | 25 | export const GPUImageSubtractBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageDifferenceBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageDifferenceBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | gl_FragColor = vec4(abs(texColor1.rgb - texColor0.rgb), texColor0.a); 22 | } 23 | `; 24 | 25 | export const GPUImageDifferenceBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImagePixelateFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImagePixelateFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_fractionalWidthOfPixel; 13 | uniform float u_aspectRatio; 14 | 15 | void main() { 16 | vec2 sampleDivisor = vec2(u_fractionalWidthOfPixel, u_fractionalWidthOfPixel / u_aspectRatio); 17 | vec2 samplePos = v_texCoord - mod(v_texCoord, sampleDivisor) + 0.5 * sampleDivisor; 18 | gl_FragColor = texture2D(u_texture_0, samplePos); 19 | } 20 | `; 21 | 22 | export const GPUImagePixelateFilter = GL.createComponent( 23 | ({children, aspectRatio, fractionalWidthOfPixel})=>{ 24 | return ( 25 | 31 | {children} 32 | 33 | ); 34 | }, 35 | { 36 | defaultProps: { 37 | fractionalWidthOfPixel: 0.02, 38 | aspectRatio: 1.0, 39 | } 40 | } 41 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageMaskFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageMaskFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | lowp float newAlpha = dot(texColor1.rgb, vec3(.33333334, .33333334, .33333334)) * texColor1.a; 21 | gl_FragColor = vec4(texColor0.rgb, newAlpha); 22 | } 23 | `; 24 | 25 | export const GPUImageMaskFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageDarkenBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageDarkenBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | gl_FragColor = vec4(min(overlay.rgb * base.a, base.rgb * overlay.a) + overlay.rgb * (1.0 - base.a) + base.rgb * (1.0 - overlay.a), 1.0); 21 | } 22 | `; 23 | 24 | export const GPUImageDarkenBlendFilter = GL.createComponent( 25 | ({ children, input2nd, input2ndScale}) => { 26 | return ( 27 | 31 | {children} 32 | 33 | ); 34 | }, { 35 | defaultProps: { 36 | input2ndScale: 1.0, 37 | } 38 | } 39 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageLinearBurnBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageLinearBurnBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | gl_FragColor = vec4(clamp(texColor0.rgb + texColor1.rgb - vec3(1.0), vec3(0.0), vec3(1.0)), texColor0.a); 22 | } 23 | `; 24 | 25 | export const GPUImageLinearBurnBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageColorBurnBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageColorBurnBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | mediump vec4 whiteColor = vec4(1.0); 22 | gl_FragColor = whiteColor - (whiteColor - texColor0) / texColor1; 23 | } 24 | `; 25 | 26 | export const GPUImageColorBurnBlendFilter = GL.createComponent( 27 | ({ children, input2nd, input2ndScale}) => { 28 | return ( 29 | 33 | {children} 34 | 35 | ); 36 | }, { 37 | defaultProps: { 38 | input2ndScale: 1.0, 39 | } 40 | } 41 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageScreenBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageScreenBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | mediump vec4 whiteColor = vec4(1.0); 22 | gl_FragColor = whiteColor - (whiteColor - texColor1) * (whiteColor - texColor0); 23 | } 24 | `; 25 | 26 | export const GPUImageScreenBlendFilter = GL.createComponent( 27 | ({ children, input2nd, input2ndScale}) => { 28 | return ( 29 | 33 | {children} 34 | 35 | ); 36 | }, { 37 | defaultProps: { 38 | input2ndScale: 1.0, 39 | } 40 | } 41 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageExclusionBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageExclusionBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | gl_FragColor = vec4((overlay.rgb * base.a + base.rgb * overlay.a - 2.0 * overlay.rgb * base.rgb) + overlay.rgb * (1.0 - base.a) + base.rgb * (1.0 - overlay.a), base.a); 21 | } 22 | `; 23 | 24 | export const GPUImageExclusionBlendFilter = GL.createComponent( 25 | ({ children, input2nd, input2ndScale}) => { 26 | return ( 27 | 31 | {children} 32 | 33 | ); 34 | }, { 35 | defaultProps: { 36 | input2ndScale: 1.0, 37 | } 38 | } 39 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageNormalBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageNormalBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 14 | vec4 texColor1; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | texColor1 = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | vec4 outputColor; 22 | outputColor.rgb = texColor0.rgb * texColor0.a + texColor1.rgb * texColor1.a * (1.0 - texColor0.a); 23 | outputColor.a = texColor0.a + texColor1.a * (1.0 - texColor0.a); 24 | 25 | gl_FragColor = outputColor; 26 | } 27 | `; 28 | 29 | export const GPUImageNormalBlendFilter = GL.createComponent( 30 | ({ children, input2nd, input2ndScale}) => { 31 | return ( 32 | 36 | {children} 37 | 38 | ); 39 | }, { 40 | defaultProps: { 41 | input2ndScale: 1.0, 42 | } 43 | } 44 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageDissolveBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageDissolveBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | uniform mediump float u_mixPercent; 13 | void main() { 14 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 15 | vec4 texColor1; 16 | if (u_texture_1_samplingScale > 1.0) { 17 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 18 | } else { 19 | texColor1 = texture2D(u_texture_1, v_texCoord); 20 | } 21 | 22 | gl_FragColor = mix(texColor0, texColor1, u_mixPercent); 23 | } 24 | `; 25 | 26 | export const GPUImageDissolveBlendFilter = GL.createComponent( 27 | ({ children, input2nd, input2ndScale, mixPercent}) => { 28 | return ( 29 | 36 | {children} 37 | 38 | ); 39 | }, { 40 | defaultProps: { 41 | input2ndScale: 1.0, 42 | mixPercent: 0.5, 43 | } 44 | } 45 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageAlphaBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageAlphaBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | uniform float u_mixPercent; 13 | void main() { 14 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 15 | vec4 texColor1; 16 | if (u_texture_1_samplingScale > 1.0) { 17 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 18 | } else { 19 | texColor1 = texture2D(u_texture_1, v_texCoord); 20 | } 21 | 22 | gl_FragColor = vec4(mix(texColor0.rgb, texColor1.rgb, texColor1.a * u_mixPercent), texColor0.a); 23 | } 24 | `; 25 | 26 | export const GPUImageAlphaBlendFilter = GL.createComponent( 27 | ({ children, input2nd, mixPercent, input2ndScale}) => { 28 | return ( 29 | 36 | {children} 37 | 38 | ); 39 | }, { 40 | defaultProps: { 41 | input2ndScale: 1.0, 42 | mixPercent: 0.5, 43 | } 44 | } 45 | ); -------------------------------------------------------------------------------- /example/ios/example/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"example" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageSoftLightBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageSoftLightBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | mediump float alphaDivisor = base.a + step(base.a, 0.0); // Protect against a divide-by-zero blacking out things in the output 21 | gl_FragColor = base * (overlay.a * (base / alphaDivisor) + (2.0 * overlay * (1.0 - (base / alphaDivisor)))) + overlay * (1.0 - base.a) + base * (1.0 - overlay.a); 22 | } 23 | `; 24 | 25 | export const GPUImageSoftLightBlendFilter = GL.createComponent( 26 | ({ children, input2nd, input2ndScale}) => { 27 | return ( 28 | 32 | {children} 33 | 34 | ); 35 | }, { 36 | defaultProps: { 37 | input2ndScale: 1.0, 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /framework/Filters/GPUImageTwoInputFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from './GPUImageFilter'; 10 | 11 | export const GPUImageTwoInputFragShaderPredefineString = GPUImageFragShaderPredefineString + ` 12 | uniform sampler2D u_texture_1; 13 | uniform float u_texture_1_samplingScale; 14 | `; 15 | 16 | const GPUImageTwoInputFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 17 | void main() { 18 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 19 | vec4 texColor1; 20 | if (u_texture_1_samplingScale > 1.0) { 21 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 22 | } else { 23 | texColor1 = texture2D(u_texture_1, v_texCoord); 24 | } 25 | gl_FragColor = texColor0 + texColor1; 26 | } 27 | `; 28 | 29 | export const GPUImageTwoInputFilter = GL.createComponent( 30 | ({ children, frag, input2nd, input2ndScale, uniforms }) => { 31 | return ( 32 | 39 | {children} 40 | 41 | ); 42 | }, { 43 | defaultProps: { 44 | input2ndScale: 1.0, 45 | } 46 | } 47 | ); -------------------------------------------------------------------------------- /example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | emoji=true 26 | 27 | module.system=haste 28 | 29 | experimental.strict_type_args=true 30 | 31 | munge_underscores=true 32 | 33 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 34 | 35 | suppress_type=$FlowIssue 36 | suppress_type=$FlowFixMe 37 | suppress_type=$FixMe 38 | 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 41 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 42 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 43 | 44 | unsafe.enable_getters_and_setters=true 45 | 46 | [version] 47 | ^0.42.0 48 | -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImagePolarPixelateFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImagePolarPixelateFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform vec2 u_polarCenter; 13 | uniform vec2 u_pixelSize; 14 | 15 | void main() { 16 | vec2 normCoord = 2.0 * v_texCoord - 1.0; 17 | vec2 normCenter = 2.0 * u_polarCenter - 1.0; 18 | 19 | normCoord -= normCenter; 20 | float r = length(normCoord); 21 | float phi = atan(normCoord.y, normCoord.x); 22 | r = r - mod(r, u_pixelSize.x) + 0.03; 23 | phi = phi - mod(phi, u_pixelSize.y); 24 | 25 | normCoord.x = r * cos(phi); 26 | normCoord.y = r * sin(phi); 27 | normCoord += normCenter; 28 | mediump vec2 texCoordToUse = normCoord / 2.0 + 0.5; 29 | gl_FragColor = texture2D(u_texture_0, texCoordToUse); 30 | } 31 | `; 32 | 33 | export const GPUImagePolarPixelateFilter = GL.createComponent( 34 | ({children, center, pixelSize})=>{ 35 | return ( 36 | 42 | {children} 43 | 44 | ); 45 | }, 46 | { 47 | defaultProps: { 48 | center: [0.5, 0.5], 49 | pixelSize: [0.05, 0.05], 50 | } 51 | } 52 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageVignetteFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageVignetteFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform mediump vec2 u_vignetteCenter; 13 | uniform mediump vec3 u_vignetteColor; 14 | uniform mediump float u_vignetteStart; 15 | uniform mediump float u_vignetteEnd; 16 | 17 | float sstep(float lower, float upper, float x) { 18 | float t = clamp((x - lower) / (upper - lower), 0.0, 1.0); 19 | return t * t * (3.0 - 2.0 * t); 20 | } 21 | void main() { 22 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 23 | lowp float d = distance(v_texCoord, u_vignetteCenter); 24 | lowp float percent = sstep(u_vignetteStart, u_vignetteEnd, d); 25 | gl_FragColor = vec4(mix(texColor.rgb, u_vignetteColor, percent), texColor.a); 26 | } 27 | `; 28 | 29 | export const GPUImageVignetteFilter = GL.createComponent( 30 | ({children, center, color, start, end})=>{ 31 | return ( 32 | 40 | {children} 41 | 42 | ); 43 | }, 44 | { 45 | defaultProps: { 46 | center: [0.5, 0.5], 47 | color: [0.0, 0.0, 0.0], 48 | start: 0.3, 49 | end: 0.75, 50 | } 51 | } 52 | ); -------------------------------------------------------------------------------- /example/TestCaseList.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | import { 5 | View, 6 | StyleSheet, 7 | ListView, 8 | Text, 9 | TouchableHighlight, 10 | } from 'react-native'; 11 | import {Actions} from 'react-native-router-flux'; 12 | import TestCases from './TestCases'; 13 | 14 | class TestCaseList extends Component { 15 | constructor(props) { 16 | super(props); 17 | const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 18 | this.state = { 19 | dataSource: ds.cloneWithRows(TestCases) 20 | } 21 | } 22 | 23 | _renderRow(data) { 24 | return ( 25 | 32 | { 34 | Actions.CaseDetail({config: data, title: data.NAME}); 35 | }} 36 | > 37 | {data.NAME} 41 | 42 | 43 | ); 44 | } 45 | 46 | render() { 47 | return ( 48 | 49 | 53 | 54 | ); 55 | } 56 | } 57 | 58 | export default TestCaseList; -------------------------------------------------------------------------------- /example/ios/example-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | lib_deps = [] 12 | 13 | for jarfile in glob(['libs/*.jar']): 14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')] 15 | lib_deps.append(':' + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | 21 | for aarfile in glob(['libs/*.aar']): 22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] 23 | lib_deps.append(':' + name) 24 | android_prebuilt_aar( 25 | name = name, 26 | aar = aarfile, 27 | ) 28 | 29 | android_library( 30 | name = "all-libs", 31 | exported_deps = lib_deps, 32 | ) 33 | 34 | android_library( 35 | name = "app-code", 36 | srcs = glob([ 37 | "src/main/java/**/*.java", 38 | ]), 39 | deps = [ 40 | ":all-libs", 41 | ":build_config", 42 | ":res", 43 | ], 44 | ) 45 | 46 | android_build_config( 47 | name = "build_config", 48 | package = "com.example", 49 | ) 50 | 51 | android_resource( 52 | name = "res", 53 | package = "com.example", 54 | res = "src/main/res", 55 | ) 56 | 57 | android_binary( 58 | name = "app", 59 | keystore = "//android/keystores:debug", 60 | manifest = "src/main/AndroidManifest.xml", 61 | package_type = "debug", 62 | deps = [ 63 | ":app-code", 64 | ], 65 | ) 66 | -------------------------------------------------------------------------------- /example/ios/example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | example 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | UILaunchStoryboardName 28 | LaunchScreen 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UIViewControllerBasedStatusBarAppearance 40 | 41 | NSLocationWhenInUseUsageDescription 42 | 43 | NSAppTransportSecurity 44 | 45 | 46 | NSExceptionDomains 47 | 48 | localhost 49 | 50 | NSExceptionAllowsInsecureHTTPLoads 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageColorDodgeBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageColorDodgeBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | vec3 baseOverlayAlphaProduct = vec3(overlay.a * base.a); 22 | vec3 rightHandProduct = overlay.rgb * (1.0 - base.a) + base.rgb * (1.0 - overlay.a); 23 | 24 | vec3 firstBlendColor = baseOverlayAlphaProduct + rightHandProduct; 25 | vec3 overlayRGB = clamp((overlay.rgb / clamp(overlay.a, 0.01, 1.0)) * step(0.0, overlay.a), 0.0, 0.99); 26 | 27 | vec3 secondBlendColor = (base.rgb * overlay.a) / (1.0 - overlayRGB) + rightHandProduct; 28 | 29 | vec3 colorChoice = step((overlay.rgb * base.a + base.rgb * overlay.a), baseOverlayAlphaProduct); 30 | 31 | gl_FragColor = vec4(mix(firstBlendColor, secondBlendColor, colorChoice), 1.0); 32 | } 33 | `; 34 | 35 | export const GPUImageColorDodgeBlendFilter = GL.createComponent( 36 | ({ children, input2nd, input2ndScale}) => { 37 | return ( 38 | 42 | {children} 43 | 44 | ); 45 | }, { 46 | defaultProps: { 47 | input2ndScale: 1.0, 48 | } 49 | } 50 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImagePixelatePositionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImagePixelatePositionFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_fractionalWidthOfPixel; 13 | uniform float u_aspectRatio; 14 | uniform lowp vec2 u_pixelateCenter; 15 | uniform float u_pixelateRadius; 16 | 17 | void main() { 18 | vec2 texCoordToUse = vec2(v_texCoord.x, (v_texCoord.y * u_aspectRatio + 0.5 - 0.5 * u_aspectRatio)); 19 | float dis = distance(u_pixelateCenter, texCoordToUse); 20 | if (dis < u_pixelateRadius) { 21 | vec2 sampleDivisor = vec2(u_fractionalWidthOfPixel, u_fractionalWidthOfPixel / u_aspectRatio); 22 | vec2 samplePos = v_texCoord - mod(v_texCoord, sampleDivisor) + 0.5 * sampleDivisor; 23 | gl_FragColor = texture2D(u_texture_0, samplePos); 24 | } else { 25 | gl_FragColor = texture2D(u_texture_0, v_texCoord); 26 | } 27 | } 28 | `; 29 | 30 | export const GPUImagePixelatePositionFilter = GL.createComponent( 31 | ({children, fractionalWidthOfPixel, center, radius, aspectRatio})=>{ 32 | return ( 33 | 41 | {children} 42 | 43 | ); 44 | }, 45 | { 46 | defaultProps: { 47 | fractionalWidthOfPixel: 0.02, 48 | aspectRatio: 1.0, 49 | center: [0.5, 0.5], 50 | radius: 0.25, 51 | } 52 | } 53 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageHalftoneFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageHalftoneFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_fractionalWidthOfPixel; 13 | uniform float u_aspectRatio; 14 | 15 | const vec3 W = vec3(0.2125, 0.7145, 0.0721); 16 | 17 | void main() { 18 | vec2 sampleDivisor = vec2(u_fractionalWidthOfPixel, u_fractionalWidthOfPixel / u_aspectRatio); 19 | vec2 samplePos = v_texCoord - mod(v_texCoord, sampleDivisor) + 0.5 * sampleDivisor; 20 | vec2 texCoordToUse = vec2(v_texCoord.x, (v_texCoord.y * u_aspectRatio + 0.5 - 0.5 * u_aspectRatio)); 21 | vec2 adjustedSamplePos = vec2(samplePos.x, (samplePos.y * u_aspectRatio + 0.5 - 0.5 * u_aspectRatio)); 22 | float distanceFromSamplePoint = distance(adjustedSamplePos, texCoordToUse); 23 | vec3 texColor = texture2D(u_texture_0, samplePos).rgb; 24 | float dotScaling = 1.0 - dot(texColor, W); 25 | mediump float checkForPresenceWithinDot = 1.0 - step(distanceFromSamplePoint, (u_fractionalWidthOfPixel * 0.5) * dotScaling); 26 | gl_FragColor = vec4(vec3(checkForPresenceWithinDot), 1.0); 27 | } 28 | `; 29 | 30 | export const GPUImageHalftoneFilter = GL.createComponent( 31 | ({children, aspectRatio, fractionalWidthOfPixel})=>{ 32 | return ( 33 | 39 | {children} 40 | 41 | ); 42 | }, 43 | { 44 | defaultProps: { 45 | fractionalWidthOfPixel: 0.02, 46 | aspectRatio: 1.0, 47 | } 48 | } 49 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImagePolkaDotFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImagePolkaDotFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_fractionalWidthOfPixel; 13 | uniform float u_aspectRatio; 14 | uniform float u_dotScaling; 15 | 16 | void main() { 17 | vec2 sampleDivisor = vec2(u_fractionalWidthOfPixel, u_fractionalWidthOfPixel / u_aspectRatio); 18 | vec2 samplePos = v_texCoord - mod(v_texCoord, sampleDivisor) + 0.5 * sampleDivisor; 19 | vec2 texCoordToUse = vec2(v_texCoord.x, (v_texCoord.y * u_aspectRatio + 0.5 - 0.5 * u_aspectRatio)); 20 | vec2 adjustedSamplePos = vec2(samplePos.x, (samplePos.y * u_aspectRatio + 0.5 - 0.5 * u_aspectRatio)); 21 | float distanceFromSamplePoint = distance(adjustedSamplePos, texCoordToUse); 22 | float checkForPresenceWithinDot = step(distanceFromSamplePoint, (u_fractionalWidthOfPixel * 0.5) * u_dotScaling); 23 | vec4 texColor = texture2D(u_texture_0, samplePos); 24 | gl_FragColor = vec4(texColor.rgb * checkForPresenceWithinDot, texColor.a); 25 | } 26 | `; 27 | 28 | export const GPUImagePolkaDotFilter = GL.createComponent( 29 | ({children, dotScaling, aspectRatio, fractionalWidthOfPixel})=>{ 30 | return ( 31 | 38 | {children} 39 | 40 | ); 41 | }, 42 | { 43 | defaultProps: { 44 | fractionalWidthOfPixel: 0.02, 45 | aspectRatio: 1.0, 46 | dotScaling: 0.9, 47 | } 48 | } 49 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageWeakPixelInclusionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageWeakPixelInclusionShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | void main() { 18 | float intensityLB = texture2D(u_texture_0, v_texCoord_lb).r; 19 | float intensityRT = texture2D(u_texture_0, v_texCoord_rt).r; 20 | float intensityLT = texture2D(u_texture_0, v_texCoord_lt).r; 21 | float intensityRB = texture2D(u_texture_0, v_texCoord_rb).r; 22 | float intensityL = texture2D(u_texture_0, v_texCoord_l).r; 23 | float intensityR = texture2D(u_texture_0, v_texCoord_r).r; 24 | float intensityB = texture2D(u_texture_0, v_texCoord_b).r; 25 | float intensityT = texture2D(u_texture_0, v_texCoord_t).r; 26 | float intensityC = texture2D(u_texture_0, v_texCoord).r; 27 | float intensitySum = intensityLT + intensityT + intensityRT + intensityL + intensityR + 28 | intensityLB + intensityB + intensityRB + intensityC; 29 | 30 | float sumTest = step(0.5, intensitySum); 31 | float pixelTest = step(0.001, intensityC); 32 | gl_FragColor = vec4(vec3(sumTest * pixelTest), 1.0); 33 | } 34 | `; 35 | 36 | export const GPUImageWeakPixelInclusionFilter = GL.createComponent( 37 | ({children, texelWidth, texelHeight})=>{ 38 | return ( 39 | 43 | {children} 44 | 45 | ); 46 | } 47 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageCannyEdgeDetectionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | import {GPUImageGrayscaleFilter} from '../ColorProcessing/GPUImageGrayscaleFilter'; 6 | import {GPUImageDirectionalSobelEdgeDetectionFilter} from './GPUImageDirectionalSobelEdgeDetectionFilter'; 7 | import {GPUImageDirectionalNonMaximumSuppressionFilter} from './GPUImageDirectionalNonMaximumSuppressionFilter'; 8 | import {GPUImageWeakPixelInclusionFilter} from './GPUImageWeakPixelInclusionFilter'; 9 | import {GPUImageSingleComponentGaussianBlurFilter} from './GPUImageSingleComponentGaussianBlurFilter' 10 | 11 | export const GPUImageCannyEdgeDetectionFilter = GL.createComponent( 12 | ({children, texelWidth, texelHeight, blurSigma, lowerThreshold, upperThreshold})=>{ 13 | return ( 14 | 15 | 19 | 20 | 21 | 22 | {children} 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageAddBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageAddBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | mediump float r; 22 | if (overlay.r * base.a + base.r * overlay.a >= overlay.a * base.a) { 23 | r = overlay.a * base.a + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 24 | } else { 25 | r = overlay.r + base.r; 26 | } 27 | 28 | mediump float g; 29 | if (overlay.g * base.a + base.g * overlay.a >= overlay.a * base.a) { 30 | g = overlay.a * base.a + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 31 | } else { 32 | g = overlay.g + base.g; 33 | } 34 | 35 | mediump float b; 36 | if (overlay.b * base.a + base.b * overlay.a >= overlay.a * base.a) { 37 | b = overlay.a * base.a + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 38 | } else { 39 | b = overlay.b + base.b; 40 | } 41 | 42 | mediump float a = overlay.a + base.a - overlay.a * base.a; 43 | 44 | gl_FragColor = vec4(r, g, b, a); 45 | } 46 | `; 47 | 48 | export const GPUImageAddBlendFilter = GL.createComponent( 49 | ({ children, input2nd, input2ndScale}) => { 50 | return ( 51 | 55 | {children} 56 | 57 | ); 58 | }, { 59 | defaultProps: { 60 | input2ndScale: 1.0, 61 | } 62 | } 63 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageColorBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageColorBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | const vec3 W = vec3(0.3, 0.59, 0.11); 13 | mediump vec3 clipColor(mediump vec3 c) { 14 | float l = dot(c, W); 15 | float n = min(min(c.r, c.g), c.b); 16 | float x = max(max(c.r, c.g), c.b); 17 | if (n < 0.0) { 18 | c.rgb = l + ((c.rgb - l) * l) / (l - n); 19 | } 20 | //vec3 if_n_lowthen_0 = l + ((c.rgb - l) * l) / (l - n); 21 | //c.rgb = mix(if_n_lowthen_0, c.rgb, step(0.0, n)); 22 | 23 | if (x > 1.0) { 24 | c.rgb = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 25 | } 26 | //vec3 if_x_bigthen_1 = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 27 | //c.rgb = mix(if_x_bigthen_1, c.rgb, step(x, 1.0)); 28 | return c; 29 | } 30 | mediump vec3 setLum(mediump vec3 c, float l) { 31 | float d = l - dot(c, W); 32 | c += vec3(d); 33 | return clipColor(c); 34 | } 35 | void main() { 36 | vec4 base = texture2D(u_texture_0, v_texCoord); 37 | vec4 overlay; 38 | if (u_texture_1_samplingScale > 1.0) { 39 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 40 | } else { 41 | overlay = texture2D(u_texture_1, v_texCoord); 42 | } 43 | gl_FragColor = vec4(base.rgb * (1.0 - overlay.a) + setLum(overlay.rgb, dot(base.rgb, W)) * overlay.a, base.a); 44 | } 45 | `; 46 | 47 | export const GPUImageColorBlendFilter = GL.createComponent( 48 | ({ children, input2nd, input2ndScale}) => { 49 | return ( 50 | 54 | {children} 55 | 56 | ); 57 | }, { 58 | defaultProps: { 59 | input2ndScale: 1.0, 60 | } 61 | } 62 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageCrosshatchFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageCrosshatchFragShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_crossHatchSpacing; 13 | uniform float u_lineWidth; 14 | 15 | const vec3 W = vec3(0.2125, 0.7154, 0.0721); 16 | 17 | void main() { 18 | float luminance = dot(texture2D(u_texture_0, v_texCoord).rgb, W); 19 | 20 | lowp vec4 colorToDisplay = vec4(1.0, 1.0, 1.0, 1.0); 21 | if (luminance < 1.00) { 22 | if (mod(v_texCoord.x + v_texCoord.y, u_crossHatchSpacing) <= u_lineWidth) { 23 | colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0); 24 | } 25 | } 26 | if (luminance < 0.75) { 27 | if (mod(v_texCoord.x - v_texCoord.y, u_crossHatchSpacing) <= u_lineWidth) { 28 | colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0); 29 | } 30 | } 31 | if (luminance < 0.50) { 32 | if (mod(v_texCoord.x + v_texCoord.y - (u_crossHatchSpacing / 2.0), u_crossHatchSpacing) <= u_lineWidth) { 33 | colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0); 34 | } 35 | } 36 | if (luminance < 0.3) { 37 | if (mod(v_texCoord.x - v_texCoord.y - (u_crossHatchSpacing / 2.0), u_crossHatchSpacing) <= u_lineWidth) { 38 | colorToDisplay = vec4(0.0, 0.0, 0.0, 1.0); 39 | } 40 | } 41 | 42 | gl_FragColor = colorToDisplay; 43 | } 44 | `; 45 | 46 | export const GPUImageCrosshatchFilter = GL.createComponent( 47 | ({children, lineWidth, spacing})=>{ 48 | return ( 49 | 55 | {children} 56 | 57 | ); 58 | }, 59 | { 60 | defaultProps: { 61 | lineWidth: 0.003, 62 | spacing: 0.03, 63 | } 64 | } 65 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageLuminosityBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageLuminosityBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | const vec3 W = vec3(0.3, 0.59, 0.11); 13 | mediump vec3 clipColor(mediump vec3 c) { 14 | float l = dot(c, W); 15 | float n = min(min(c.r, c.g), c.b); 16 | float x = max(max(c.r, c.g), c.b); 17 | if (n < 0.0) { 18 | c.rgb = l + ((c.rgb - l) * l) / (l - n); 19 | } 20 | //vec3 if_n_lowthen_0 = l + ((c.rgb - l) * l) / (l - n); 21 | //c.rgb = mix(if_n_lowthen_0, c.rgb, step(0.0, n)); 22 | 23 | if (x > 1.0) { 24 | c.rgb = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 25 | } 26 | //vec3 if_x_bigthen_1 = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 27 | //c.rgb = mix(if_x_bigthen_1, c.rgb, step(x, 1.0)); 28 | return c; 29 | } 30 | mediump vec3 setLum(mediump vec3 c, float l) { 31 | float d = l - dot(c, W); 32 | c += vec3(d); 33 | return clipColor(c); 34 | } 35 | void main() { 36 | vec4 base = texture2D(u_texture_0, v_texCoord); 37 | vec4 overlay; 38 | if (u_texture_1_samplingScale > 1.0) { 39 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 40 | } else { 41 | overlay = texture2D(u_texture_1, v_texCoord); 42 | } 43 | gl_FragColor = vec4(base.rgb * (1.0 - overlay.a) + setLum(base.rgb, dot(overlay.rgb, W)) * overlay.a, base.a); 44 | } 45 | `; 46 | 47 | export const GPUImageLuminosityBlendFilter = GL.createComponent( 48 | ({ children, input2nd, input2ndScale}) => { 49 | return ( 50 | 54 | {children} 55 | 56 | ); 57 | }, { 58 | defaultProps: { 59 | input2ndScale: 1.0, 60 | } 61 | } 62 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageDirectionalNonMaximumSuppressionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | 11 | const GPUImageDirectionalNonMaximumSuppressionShaderString = GPUImageFragShaderPredefineString + ` 12 | uniform float u_texel_width; 13 | uniform float u_texel_height; 14 | uniform float u_lower_threshold; 15 | uniform float u_upper_threshold; 16 | 17 | float sstep(float lower, float upper, float x) { 18 | float t = clamp((x - lower) / (upper - lower), 0.0, 1.0); 19 | return t * t * (3.0 - 2.0 * t); 20 | } 21 | 22 | void main() { 23 | vec3 currentGradientAndDirection = texture2D(u_texture_0, v_texCoord).rgb; 24 | vec2 gradientDirection = ((currentGradientAndDirection.gb * 2.0) - 1.0) * vec2(u_texel_width, u_texel_height); 25 | 26 | float firstSampledGradientMagnitude = texture2D(u_texture_0, v_texCoord + gradientDirection).r; 27 | float secondSampledGradientMagnitude = texture2D(u_texture_0, v_texCoord - gradientDirection).r; 28 | float thresholdCompliance = sstep(u_lower_threshold, u_upper_threshold, currentGradientAndDirection.r); 29 | 30 | float multiplier = step(firstSampledGradientMagnitude, currentGradientAndDirection.r); 31 | multiplier = multiplier * step(secondSampledGradientMagnitude, currentGradientAndDirection.r); 32 | multiplier = multiplier * thresholdCompliance; 33 | 34 | gl_FragColor = vec4(multiplier, multiplier, multiplier, 1.0); 35 | } 36 | `; 37 | 38 | export const GPUImageDirectionalNonMaximumSuppressionFilter = GL.createComponent( 39 | ({children, texelWidth, texelHeight, lowerThreshold, upperThreshold})=>{ 40 | return ( 41 | 49 | {children} 50 | 51 | ); 52 | } 53 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageOverlayBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageOverlayBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | mediump float ra; 22 | if (2.0 * base.r < base.a) { 23 | ra = 2.0 * overlay.r * base.r + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 24 | } else { 25 | ra = overlay.a * base.a - 2.0 * (base.a - base.r) * (overlay.a - overlay.r) + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 26 | } 27 | 28 | mediump float ga; 29 | if (2.0 * base.g < base.a) { 30 | ga = 2.0 * overlay.g * base.g + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 31 | } else { 32 | ga = overlay.a * base.a - 2.0 * (base.a - base.g) * (overlay.a - overlay.g) + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 33 | } 34 | 35 | mediump float ba; 36 | if (2.0 * base.b < base.a) { 37 | ba = 2.0 * overlay.b * base.b + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 38 | } else { 39 | ba = overlay.a * base.a - 2.0 * (base.a - base.b) * (overlay.a - overlay.b) + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 40 | } 41 | 42 | gl_FragColor = vec4(ra, ga, ba, 1.0); 43 | } 44 | `; 45 | 46 | export const GPUImageOverlayBlendFilter = GL.createComponent( 47 | ({ children, input2nd, input2ndScale}) => { 48 | return ( 49 | 53 | {children} 54 | 55 | ); 56 | }, { 57 | defaultProps: { 58 | input2ndScale: 1.0, 59 | } 60 | } 61 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageHardLightBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageHardLightBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | highp float ra; 21 | if (2.0 * overlay.r < overlay.a) { 22 | ra = 2.0 * overlay.r * base.r + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 23 | } else { 24 | ra = overlay.a * base.a - 2.0 * (base.a - base.r) * (overlay.a - overlay.r) + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 25 | } 26 | 27 | highp float ga; 28 | if (2.0 * overlay.g < overlay.a) { 29 | ga = 2.0 * overlay.g * base.g + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 30 | } else { 31 | ga = overlay.a * base.a - 2.0 * (base.a - base.g) * (overlay.a - overlay.g) + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 32 | } 33 | 34 | highp float ba; 35 | if (2.0 * overlay.b < overlay.a) { 36 | ba = 2.0 * overlay.b * base.b + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 37 | } else { 38 | ba = overlay.a * base.a - 2.0 * (base.a - base.b) * (overlay.a - overlay.b) + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 39 | } 40 | 41 | gl_FragColor = vec4(ra, ga, ba, 1.0); 42 | } 43 | `; 44 | 45 | export const GPUImageHardLightBlendFilter = GL.createComponent( 46 | ({ children, input2nd, input2ndScale}) => { 47 | return ( 48 | 52 | {children} 53 | 54 | ); 55 | }, { 56 | defaultProps: { 57 | input2ndScale: 1.0, 58 | } 59 | } 60 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageSobelEdgeDetectionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageSobelEdgeDetectionFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | uniform float u_edgeStrength; 18 | void main() { 19 | float bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).r; 20 | float topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).r; 21 | float topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).r; 22 | float bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).r; 23 | float leftIntensity = texture2D(u_texture_0, v_texCoord_l).r; 24 | float rightIntensity = texture2D(u_texture_0, v_texCoord_r).r; 25 | float bottomIntensity = texture2D(u_texture_0, v_texCoord_b).r; 26 | float topIntensity = texture2D(u_texture_0, v_texCoord_t).r; 27 | 28 | float x = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity; 29 | float y = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity; 30 | float magnitude = length(vec2(x, y)) * u_edgeStrength; 31 | 32 | gl_FragColor = vec4(vec3(magnitude), 1.0); 33 | } 34 | `; 35 | 36 | export const GPUImageSobelEdgeDetectionFilter = GL.createComponent( 37 | ({children, texelWidth, texelHeight, edgeStrength})=>{ 38 | return ( 39 | 46 | {children} 47 | 48 | ); 49 | }, 50 | { 51 | defaultProps: { 52 | edgeStrength: 1.0, 53 | } 54 | } 55 | ); -------------------------------------------------------------------------------- /example/ios/exampleTests/exampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import 14 | #import 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface exampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation exampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageDivideBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageDivideBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | void main() { 13 | vec4 base = texture2D(u_texture_0, v_texCoord); 14 | vec4 overlay; 15 | if (u_texture_1_samplingScale > 1.0) { 16 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 17 | } else { 18 | overlay = texture2D(u_texture_1, v_texCoord); 19 | } 20 | 21 | mediump float ra; 22 | if (overlay.a == 0.0 || ((base.r / overlay.r) > (base.a / overlay.a))) 23 | ra = overlay.a * base.a + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 24 | else 25 | ra = (base.r * overlay.a * overlay.a) / overlay.r + overlay.r * (1.0 - base.a) + base.r * (1.0 - overlay.a); 26 | 27 | mediump float ga; 28 | if (overlay.a == 0.0 || ((base.g / overlay.g) > (base.a / overlay.a))) 29 | ga = overlay.a * base.a + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 30 | else 31 | ga = (base.g * overlay.a * overlay.a) / overlay.g + overlay.g * (1.0 - base.a) + base.g * (1.0 - overlay.a); 32 | 33 | mediump float ba; 34 | if (overlay.a == 0.0 || ((base.b / overlay.b) > (base.a / overlay.a))) 35 | ba = overlay.a * base.a + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 36 | else 37 | ba = (base.b * overlay.a * overlay.a) / overlay.b + overlay.b * (1.0 - base.a) + base.b * (1.0 - overlay.a); 38 | 39 | mediump float a = overlay.a + base.a - overlay.a * base.a; 40 | gl_FragColor = vec4(ra, ga, ba, a); 41 | } 42 | `; 43 | 44 | export const GPUImageDivideBlendFilter = GL.createComponent( 45 | ({ children, input2nd, input2ndScale}) => { 46 | return ( 47 | 51 | {children} 52 | 53 | ); 54 | }, { 55 | defaultProps: { 56 | input2ndScale: 1.0, 57 | } 58 | } 59 | ); -------------------------------------------------------------------------------- /framework/Filters/GPUImage3x3TextureSamplingFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | //GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from './GPUImageFilter'; 10 | 11 | export const GPUImage3x3TextureSamplingVertShaderString = ` 12 | attribute vec2 position; 13 | 14 | varying vec2 v_texCoord; 15 | varying vec2 v_texCoord_lt; 16 | varying vec2 v_texCoord_t; 17 | varying vec2 v_texCoord_rt; 18 | varying vec2 v_texCoord_l; 19 | varying vec2 v_texCoord_r; 20 | varying vec2 v_texCoord_lb; 21 | varying vec2 v_texCoord_b; 22 | varying vec2 v_texCoord_rb; 23 | 24 | uniform float u_texel_width; 25 | uniform float u_texel_height; 26 | 27 | void main() { 28 | vec2 hStep = vec2(u_texel_width, 0.0); 29 | vec2 vStep = vec2(0.0, u_texel_height); 30 | vec2 hvStep = vec2(u_texel_width, u_texel_height); 31 | vec2 _hvStep = vec2(u_texel_width, -u_texel_height); 32 | 33 | gl_Position = vec4(position, 0.0, 1.0); 34 | v_texCoord = vec2(0.5, 0.5) * (position + vec2(1.0, 1.0)); 35 | 36 | v_texCoord_l = v_texCoord - hStep; 37 | v_texCoord_r = v_texCoord + hStep; 38 | v_texCoord_t = v_texCoord - vStep; 39 | v_texCoord_b = v_texCoord + vStep; 40 | 41 | v_texCoord_lt = v_texCoord - hvStep; 42 | v_texCoord_rb = v_texCoord + hvStep; 43 | v_texCoord_lb = v_texCoord - _hvStep; 44 | v_texCoord_rt = v_texCoord + _hvStep; 45 | } 46 | `; 47 | 48 | export const GPUImage3x3TextureSamplingFragShaderPredefine = ` 49 | varying vec2 v_texCoord_lt; 50 | varying vec2 v_texCoord_t; 51 | varying vec2 v_texCoord_rt; 52 | varying vec2 v_texCoord_l; 53 | varying vec2 v_texCoord_r; 54 | varying vec2 v_texCoord_lb; 55 | varying vec2 v_texCoord_b; 56 | varying vec2 v_texCoord_rb; 57 | `; 58 | 59 | export const GPUImage3x3TextureSamplingFilter = GL.createComponent( 60 | ({ children, frag, texelWidth, texelHeight, uniforms }) => { 61 | return ( 62 | 70 | {children} 71 | 72 | ); 73 | } 74 | ); -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageChromaKeyBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageChromaKeyBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | uniform float u_thresholdSensitivity; 13 | uniform float u_smoothing; 14 | uniform vec3 u_colorToReplace; 15 | void main() { 16 | vec4 texColor0 = texture2D(u_texture_0, v_texCoord); 17 | vec4 texColor1; 18 | if (u_texture_1_samplingScale > 1.0) { 19 | texColor1 = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 20 | } else { 21 | texColor1 = texture2D(u_texture_1, v_texCoord); 22 | } 23 | 24 | float maskY = 0.2989 * u_colorToReplace.r + 0.5866 * u_colorToReplace.g + 0.1145 * u_colorToReplace.b; 25 | float maskCr = 0.7132 * (u_colorToReplace.r - maskY); 26 | float maskCb = 0.5647 * (u_colorToReplace.b - maskY); 27 | 28 | float Y = 0.2989 * texColor0.r + 0.5866 * texColor0.g + 0.1145 * texColor0.b; 29 | float Cr = 0.7132 * (texColor0.r - Y); 30 | float Cb = 0.5647 * (texColor0.b - Y); 31 | 32 | float blendValue = 1.0 - smoothstep(u_thresholdSensitivity, u_thresholdSensitivity + u_smoothing, distance(vec2(Cr, Cb), vec2(maskCr, maskCb))); 33 | gl_FragColor = mix(texColor0, texColor1, blendValue); 34 | } 35 | `; 36 | 37 | export const GPUImageChromaKeyBlendFilter = GL.createComponent( 38 | ({ children, input2nd, threshold, smoothing, colorToReplace, input2ndScale}) => { 39 | return ( 40 | 49 | {children} 50 | 51 | ); 52 | }, { 53 | defaultProps: { 54 | input2ndScale: 1.0, 55 | threshold: 0.4, 56 | smoothing: 0.1, 57 | colorToReplace: [0.0, 1.0, 0.0], 58 | } 59 | } 60 | ); -------------------------------------------------------------------------------- /example/CaseDetail.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | import { 5 | View, 6 | StyleSheet, 7 | Dimensions, 8 | Slider, 9 | } from 'react-native'; 10 | 11 | //import GL from "gl-react"; 12 | import {Surface} from 'gl-react-native'; 13 | 14 | //const {Image: GLImage} = require('gl-react-image'); 15 | //const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); 16 | 17 | const {width: WinWidth, height: WinHeight} = Dimensions.get("window"); 18 | 19 | class SurfaceWrapper extends Component { 20 | constructor(props) { 21 | super(props); 22 | this.state = { 23 | animValue: props.initValue, 24 | } 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | {this.props.genFilter(this.state.animValue)} 31 | 32 | ); 33 | } 34 | } 35 | 36 | class CaseDetail extends Component { 37 | render() { 38 | let filterCase = this.props.config; 39 | return ( 40 | 41 | 42 | 43 | { 44 | filterCase.SLIDER.ENABLE && ( 45 | { 50 | let { surface } = this.refs; 51 | surface.setState({ 52 | animValue: value, 53 | }); 54 | }} 55 | style={styles.Slider} 56 | > 57 | 58 | ) 59 | } 60 | 61 | ); 62 | } 63 | } 64 | 65 | const styles = StyleSheet.create({ 66 | SurfaceContainer: { 67 | marginTop: 100, 68 | flex: 4 69 | }, 70 | 71 | Surface: { 72 | 73 | }, 74 | 75 | Slider: { 76 | flex: 1 77 | } 78 | }); 79 | 80 | export default CaseDetail; -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageDirectionalSobelEdgeDetectionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageDirectionalSobelEdgeDetectionFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | void main() { 18 | float bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).r; 19 | float topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).r; 20 | float topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).r; 21 | float bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).r; 22 | float leftIntensity = texture2D(u_texture_0, v_texCoord_l).r; 23 | float rightIntensity = texture2D(u_texture_0, v_texCoord_r).r; 24 | float bottomIntensity = texture2D(u_texture_0, v_texCoord_b).r; 25 | float topIntensity = texture2D(u_texture_0, v_texCoord_t).r; 26 | 27 | vec2 gradientDirection; 28 | gradientDirection.x = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity; 29 | gradientDirection.y = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity; 30 | 31 | float gradientMagnitude = length(gradientDirection); 32 | vec2 normalizedDirection = normalize(gradientDirection); 33 | normalizedDirection = sign(normalizedDirection) * floor(abs(normalizedDirection) + 0.617316); // Offset by 1-sin(pi/8) to set to 0 if near axis, 1 if away 34 | normalizedDirection = (normalizedDirection + 1.0) * 0.5; // Place -1.0 - 1.0 within 0 - 1.0 35 | 36 | gl_FragColor = vec4(gradientMagnitude, normalizedDirection.x, normalizedDirection.y, 1.0); 37 | } 38 | `; 39 | 40 | export const GPUImageDirectionalSobelEdgeDetectionFilter = GL.createComponent( 41 | ({children, texelWidth, texelHeight})=>{ 42 | return ( 43 | 47 | {children} 48 | 49 | ); 50 | } 51 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageLocalBinaryPatternFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageLocalBinaryPatternFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | void main() { 18 | float bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).r; 19 | float topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).r; 20 | float topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).r; 21 | float bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).r; 22 | float leftIntensity = texture2D(u_texture_0, v_texCoord_l).r; 23 | float rightIntensity = texture2D(u_texture_0, v_texCoord_r).r; 24 | float bottomIntensity = texture2D(u_texture_0, v_texCoord_b).r; 25 | float topIntensity = texture2D(u_texture_0, v_texCoord_t).r; 26 | float centerIntensity = texture2D(u_texture_0, v_texCoord).r; 27 | 28 | lowp float byteTally = 1.0 / 255.0 * step(centerIntensity, topRightIntensity); 29 | byteTally += 2.0 / 255.0 * step(centerIntensity, topIntensity); 30 | byteTally += 4.0 / 255.0 * step(centerIntensity, topLeftIntensity); 31 | byteTally += 8.0 / 255.0 * step(centerIntensity, leftIntensity); 32 | byteTally += 16.0 / 255.0 * step(centerIntensity, bottomLeftIntensity); 33 | byteTally += 32.0 / 255.0 * step(centerIntensity, bottomIntensity); 34 | byteTally += 64.0 / 255.0 * step(centerIntensity, bottomRightIntensity); 35 | byteTally += 128.0 / 255.0 * step(centerIntensity, rightIntensity); 36 | 37 | // TODO: Replace the above with a dot product and two vec4s 38 | // TODO: Apply step to a matrix, rather than individually 39 | 40 | gl_FragColor = vec4(byteTally, byteTally, byteTally, 1.0); 41 | } 42 | `; 43 | 44 | export const GPUImageLocalBinaryPatternFilter = GL.createComponent( 45 | ({children, texelWidth, texelHeight})=>{ 46 | return ( 47 | 51 | {children} 52 | 53 | ); 54 | } 55 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageSingleComponentGaussianBlurFilter.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | import GL from "gl-react"; 5 | import React, { Component } from "react"; 6 | 7 | import { 8 | GPUImageFragShaderPredefineString, 9 | GPUImageFilter 10 | } from '../GPUImageFilter'; 11 | 12 | const GPUImageSingleComponentGaussianBlurFragShaderString = GPUImageFragShaderPredefineString + ` 13 | uniform float u_gaussian_sigma; 14 | uniform float u_texel_width; 15 | uniform float u_texel_height; 16 | 17 | /// Calculate the gaussian blur at given coords 18 | float gaussBlur(vec2 coords) { 19 | int windowSize = 2; 20 | float gaussFilter[25]; 21 | gaussFilter[0] = 2.0; gaussFilter[1] = 4.0; 22 | gaussFilter[2] = 5.0, gaussFilter[3] = 4.0; 23 | gaussFilter[4] = 2.0; 24 | gaussFilter[5] = 4.0; gaussFilter[6] = 9.0; 25 | gaussFilter[7] = 12.0, gaussFilter[8] = 9.0; 26 | gaussFilter[9] = 4.0; 27 | gaussFilter[10] = 5.0; gaussFilter[11] = 12.0; 28 | gaussFilter[12] = 15.0, gaussFilter[13] = 12.0; 29 | gaussFilter[14] = 5.0; 30 | gaussFilter[15] = 4.0; gaussFilter[16] = 9.0; 31 | gaussFilter[17] = 12.0, gaussFilter[18] = 9.0; 32 | gaussFilter[19] = 4.0; 33 | gaussFilter[20] = 2.0; gaussFilter[21] = 4.0; 34 | gaussFilter[22] = 5.0, gaussFilter[23] = 4.0; 35 | gaussFilter[24] = 2.0; 36 | 37 | int offset = 0; 38 | float color = 0.0; 39 | vec4 auxColor = vec4(0.0); 40 | /// Loop through the window and calculate the convolution 41 | for (int y = -windowSize; y <= windowSize; y++) { 42 | for (int x = -windowSize; x <= windowSize; x++) { 43 | auxColor = texture2D(u_texture_0, coords + vec2(float(x) * u_texel_width, float(y) * u_texel_height)); 44 | color += auxColor.r * gaussFilter[offset]; 45 | offset += 1; 46 | } 47 | } 48 | 49 | return color; 50 | } 51 | 52 | void main() { 53 | float mid = gaussBlur(v_texCoord) * u_gaussian_sigma; 54 | gl_FragColor = vec4(mid, mid, mid, 1.0); 55 | } 56 | `; 57 | 58 | export const GPUImageSingleComponentGaussianBlurFilter = GL.createComponent( 59 | ({children, texelWidth, texelHeight, sigma})=>{ 60 | return ( 61 | 68 | {children} 69 | 70 | ); 71 | } 72 | ); -------------------------------------------------------------------------------- /framework/Filters/Effects/GPUImageToonFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageToonFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | uniform float u_threshold; 18 | uniform float u_quantizationLevels; 19 | void main() { 20 | float bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).r; 21 | float topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).r; 22 | float topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).r; 23 | float bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).r; 24 | float leftIntensity = texture2D(u_texture_0, v_texCoord_l).r; 25 | float rightIntensity = texture2D(u_texture_0, v_texCoord_r).r; 26 | float bottomIntensity = texture2D(u_texture_0, v_texCoord_b).r; 27 | float topIntensity = texture2D(u_texture_0, v_texCoord_t).r; 28 | 29 | vec4 texColor = texture2D(u_texture_0, v_texCoord); 30 | 31 | float x = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity; 32 | float y = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity; 33 | float magnitude = length(vec2(x, y)); 34 | vec3 posterizedImageColor = floor((texColor.rgb * u_quantizationLevels) + 0.5) / u_quantizationLevels; 35 | float test = 1.0 - step(u_threshold, magnitude); 36 | 37 | gl_FragColor = vec4(posterizedImageColor * test, texColor.z); 38 | } 39 | `; 40 | 41 | export const GPUImageToonFilter = GL.createComponent( 42 | ({children, texelWidth, texelHeight, levels, threshold})=>{ 43 | return ( 44 | 52 | {children} 53 | 54 | ); 55 | }, 56 | { 57 | defaultProps: { 58 | threshold: 0.2, 59 | levels: 10.0, 60 | } 61 | } 62 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageThresholdEdgeDetectionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageThresholdEdgeDetectionFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | uniform float u_edgeStrength; 18 | uniform float u_threshold; 19 | void main() { 20 | float bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).r; 21 | float topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).r; 22 | float topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).r; 23 | float bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).r; 24 | float leftIntensity = texture2D(u_texture_0, v_texCoord_l).r; 25 | float rightIntensity = texture2D(u_texture_0, v_texCoord_r).r; 26 | float bottomIntensity = texture2D(u_texture_0, v_texCoord_b).r; 27 | float topIntensity = texture2D(u_texture_0, v_texCoord_t).r; 28 | float centerIntensity = texture2D(u_texture_0, v_texCoord).r; 29 | 30 | //float x = -bottomLeftIntensity - 2.0 * leftIntensity - topLeftIntensity + bottomRightIntensity + 2.0 * rightIntensity + topRightIntensity; 31 | //float y = -topLeftIntensity - 2.0 * topIntensity - topRightIntensity + bottomLeftIntensity + 2.0 * bottomIntensity + bottomRightIntensity; 32 | float x = centerIntensity - topIntensity + bottomIntensity - centerIntensity; 33 | float y = centerIntensity - leftIntensity + rightIntensity - centerIntensity; 34 | 35 | float magnitude = step(u_threshold, length(vec2(x, y)) * u_edgeStrength); 36 | 37 | gl_FragColor = vec4(vec3(magnitude), 1.0); 38 | } 39 | `; 40 | 41 | export const GPUImageThresholdEdgeDetectionFilter = GL.createComponent( 42 | ({children, texelWidth, texelHeight, edgeStrength, threshold})=>{ 43 | return ( 44 | 52 | {children} 53 | 54 | ); 55 | }, 56 | { 57 | defaultProps: { 58 | edgeStrength: 1.0, 59 | threshold: 0.25, 60 | } 61 | } 62 | ); -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImage3x3ConvolutionFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImage3x3ConvolutionFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | uniform mediump mat3 u_convolutionMatrix; 18 | void main() { 19 | mediump vec3 bottomLeftColor = texture2D(u_texture_0, v_texCoord_lb).rgb; 20 | mediump vec3 topRightColor = texture2D(u_texture_0, v_texCoord_rt).rgb; 21 | mediump vec3 topLeftColor = texture2D(u_texture_0, v_texCoord_lt).rgb; 22 | mediump vec3 bottomRightColor = texture2D(u_texture_0, v_texCoord_rb).rgb; 23 | mediump vec3 leftColor = texture2D(u_texture_0, v_texCoord_l).rgb; 24 | mediump vec3 rightColor = texture2D(u_texture_0, v_texCoord_r).rgb; 25 | mediump vec3 bottomColor = texture2D(u_texture_0, v_texCoord_b).rgb; 26 | mediump vec3 topColor = texture2D(u_texture_0, v_texCoord_t).rgb; 27 | mediump vec4 centerColor = texture2D(u_texture_0, v_texCoord); 28 | 29 | mediump vec3 convolution = vec3(0.0); 30 | convolution += topLeftColor * u_convolutionMatrix[0][0]; 31 | convolution += topColor * u_convolutionMatrix[0][1]; 32 | convolution += topRightColor * u_convolutionMatrix[0][2]; 33 | convolution += leftColor * u_convolutionMatrix[1][0]; 34 | convolution += centerColor.rgb * u_convolutionMatrix[1][1]; 35 | convolution += rightColor * u_convolutionMatrix[1][2]; 36 | convolution += bottomLeftColor * u_convolutionMatrix[2][0]; 37 | convolution += bottomColor * u_convolutionMatrix[2][1]; 38 | convolution += bottomRightColor * u_convolutionMatrix[2][2]; 39 | 40 | gl_FragColor = vec4(convolution, centerColor.a); 41 | } 42 | `; 43 | 44 | export const GPUImage3x3ConvolutionFilter = GL.createComponent( 45 | ({children, texelWidth, texelHeight, convolutionMatrix})=>{ 46 | return ( 47 | 54 | {children} 55 | 56 | ); 57 | }, 58 | { 59 | defaultProps: { 60 | convolutionMatrix: [0.0, 0.0, 0.0, 61 | 0.0, 1.0, 0.0, 62 | 0.0, 0.0, 0.0], 63 | } 64 | } 65 | ); -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout. 54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details. 55 | -dontwarn android.text.StaticLayout 56 | 57 | # okhttp 58 | 59 | -keepattributes Signature 60 | -keepattributes *Annotation* 61 | -keep class okhttp3.** { *; } 62 | -keep interface okhttp3.** { *; } 63 | -dontwarn okhttp3.** 64 | 65 | # okio 66 | 67 | -keep class sun.misc.Unsafe { *; } 68 | -dontwarn java.nio.file.* 69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 70 | -dontwarn okio.** 71 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageHueBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageHueBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | const vec3 W = vec3(0.3, 0.59, 0.11); 13 | mediump vec3 clipColor(mediump vec3 c) { 14 | float l = dot(c, W); 15 | float n = min(min(c.r, c.g), c.b); 16 | float x = max(max(c.r, c.g), c.b); 17 | if (n < 0.0) { 18 | c.rgb = l + ((c.rgb - l) * l) / (l - n); 19 | } 20 | //vec3 if_n_lowthen_0 = l + ((c.rgb - l) * l) / (l - n); 21 | //c.rgb = mix(if_n_lowthen_0, c.rgb, step(0.0, n)); 22 | 23 | if (x > 1.0) { 24 | c.rgb = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 25 | } 26 | //vec3 if_x_bigthen_1 = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 27 | //c.rgb = mix(if_x_bigthen_1, c.rgb, step(x, 1.0)); 28 | return c; 29 | } 30 | mediump vec3 setLum(mediump vec3 c, float l) { 31 | float d = l - dot(c, W); 32 | c += vec3(d); 33 | return clipColor(c); 34 | } 35 | float sat(mediump vec3 c) { 36 | float n = min(min(c.r, c.g), c.b); 37 | float x = max(max(c.r, c.g), c.b); 38 | return x - n; 39 | } 40 | float mid(mediump float cmin, mediump float cmid, mediump float cmax, float s) { 41 | return ((cmid - cmin) * s) / (cmax - cmin); 42 | } 43 | mediump vec3 setSat(mediump vec3 c, float s) { 44 | if (c.r > c.g) { 45 | if (c.r > c.b) { 46 | if (c.g > c.b) { 47 | /* g is mid, b is min */ 48 | c.g = mid(c.b, c.g, c.r, s); 49 | c.b = 0.0; 50 | } else { 51 | /* b is mid, g is min */ 52 | c.b = mid(c.g, c.b, c.r, s); 53 | c.g = 0.0; 54 | } 55 | c.r = s; 56 | } else { 57 | /* b is max, r is mid, g is min */ 58 | c.r = mid(c.g, c.r, c.b, s); 59 | c.b = s; 60 | c.r = 0.0; 61 | } 62 | } else if (c.r > c.b) { 63 | /* g is max, r is mid, b is min */ 64 | c.r = mid(c.b, c.r, c.g, s); 65 | c.g = s; 66 | c.b = 0.0; 67 | } else if (c.g > c.b) { 68 | /* g is max, b is mid, r is min */ 69 | c.b = mid(c.r, c.b, c.g, s); 70 | c.g = s; 71 | c.r = 0.0; 72 | } else if (c.b > c.g) { 73 | /* b is max, g is mid, r is min */ 74 | c.g = mid(c.r, c.g, c.b, s); 75 | c.b = s; 76 | c.r = 0.0; 77 | } else { 78 | c = vec3(0.0); 79 | } 80 | return c; 81 | } 82 | void main() { 83 | vec4 base = texture2D(u_texture_0, v_texCoord); 84 | vec4 overlay; 85 | if (u_texture_1_samplingScale > 1.0) { 86 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 87 | } else { 88 | overlay = texture2D(u_texture_1, v_texCoord); 89 | } 90 | gl_FragColor = vec4(base.rgb * (1.0 - overlay.a) + setLum(setSat(overlay.rgb, sat(base.rgb)), dot(base.rgb, W)) * overlay.a, base.a); 91 | } 92 | `; 93 | 94 | export const GPUImageHueBlendFilter = GL.createComponent( 95 | ({ children, input2nd, input2ndScale}) => { 96 | return ( 97 | 101 | {children} 102 | 103 | ); 104 | }, { 105 | defaultProps: { 106 | input2ndScale: 1.0, 107 | } 108 | } 109 | ); -------------------------------------------------------------------------------- /example/ios/example/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /framework/Filters/Blends/GPUImageSaturationBlendFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageTwoInputFragShaderPredefineString, 8 | GPUImageTwoInputFilter, 9 | } from '../GPUImageTwoInputFilter'; 10 | 11 | const GPUImageSaturationBlendFragShaderString = GPUImageTwoInputFragShaderPredefineString + ` 12 | const vec3 W = vec3(0.3, 0.59, 0.11); 13 | mediump vec3 clipColor(mediump vec3 c) { 14 | float l = dot(c, W); 15 | float n = min(min(c.r, c.g), c.b); 16 | float x = max(max(c.r, c.g), c.b); 17 | if (n < 0.0) { 18 | c.rgb = l + ((c.rgb - l) * l) / (l - n); 19 | } 20 | //vec3 if_n_lowthen_0 = l + ((c.rgb - l) * l) / (l - n); 21 | //c.rgb = mix(if_n_lowthen_0, c.rgb, step(0.0, n)); 22 | 23 | if (x > 1.0) { 24 | c.rgb = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 25 | } 26 | //vec3 if_x_bigthen_1 = l + ((c.rgb - l) * (1.0 - l)) / (x - l); 27 | //c.rgb = mix(if_x_bigthen_1, c.rgb, step(x, 1.0)); 28 | return c; 29 | } 30 | mediump vec3 setLum(mediump vec3 c, float l) { 31 | float d = l - dot(c, W); 32 | c += vec3(d); 33 | return clipColor(c); 34 | } 35 | float sat(mediump vec3 c) { 36 | float n = min(min(c.r, c.g), c.b); 37 | float x = max(max(c.r, c.g), c.b); 38 | return x - n; 39 | } 40 | float mid(mediump float cmin, mediump float cmid, mediump float cmax, float s) { 41 | return ((cmid - cmin) * s) / (cmax - cmin); 42 | } 43 | mediump vec3 setSat(mediump vec3 c, float s) { 44 | if (c.r > c.g) { 45 | if (c.r > c.b) { 46 | if (c.g > c.b) { 47 | /* g is mid, b is min */ 48 | c.g = mid(c.b, c.g, c.r, s); 49 | c.b = 0.0; 50 | } else { 51 | /* b is mid, g is min */ 52 | c.b = mid(c.g, c.b, c.r, s); 53 | c.g = 0.0; 54 | } 55 | c.r = s; 56 | } else { 57 | /* b is max, r is mid, g is min */ 58 | c.r = mid(c.g, c.r, c.b, s); 59 | c.b = s; 60 | c.r = 0.0; 61 | } 62 | } else if (c.r > c.b) { 63 | /* g is max, r is mid, b is min */ 64 | c.r = mid(c.b, c.r, c.g, s); 65 | c.g = s; 66 | c.b = 0.0; 67 | } else if (c.g > c.b) { 68 | /* g is max, b is mid, r is min */ 69 | c.b = mid(c.r, c.b, c.g, s); 70 | c.g = s; 71 | c.r = 0.0; 72 | } else if (c.b > c.g) { 73 | /* b is max, g is mid, r is min */ 74 | c.g = mid(c.r, c.g, c.b, s); 75 | c.b = s; 76 | c.r = 0.0; 77 | } else { 78 | c = vec3(0.0); 79 | } 80 | return c; 81 | } 82 | void main() { 83 | vec4 base = texture2D(u_texture_0, v_texCoord); 84 | vec4 overlay; 85 | if (u_texture_1_samplingScale > 1.0) { 86 | overlay = texture2D(u_texture_1, fract(v_texCoord * u_texture_1_samplingScale)); 87 | } else { 88 | overlay = texture2D(u_texture_1, v_texCoord); 89 | } 90 | gl_FragColor = vec4(base.rgb * (1.0 - overlay.a) + setLum(setSat(base.rgb, sat(overlay.rgb)), dot(base.rgb, W)) * overlay.a, base.a); 91 | } 92 | `; 93 | 94 | export const GPUImageSaturationBlendFilter = GL.createComponent( 95 | ({ children, input2nd, input2ndScale}) => { 96 | return ( 97 | 101 | {children} 102 | 103 | ); 104 | }, { 105 | defaultProps: { 106 | input2ndScale: 1.0, 107 | } 108 | } 109 | ); -------------------------------------------------------------------------------- /framework/Filters/ImageProcessing/GPUImageColorLocalBinaryPatternFilter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import GL from "gl-react"; 4 | import React, { Component } from "react"; 5 | 6 | import { 7 | GPUImageFragShaderPredefineString, 8 | GPUImageFilter 9 | } from '../GPUImageFilter'; 10 | import { 11 | GPUImage3x3TextureSamplingFragShaderPredefine, 12 | GPUImage3x3TextureSamplingFilter 13 | } from '../GPUImage3x3TextureSamplingFilter'; 14 | 15 | const GPUImageColorLocalBinaryPatternFragShaderString = GPUImageFragShaderPredefineString + 16 | GPUImage3x3TextureSamplingFragShaderPredefine + ` 17 | void main() { 18 | lowp vec3 bottomLeftIntensity = texture2D(u_texture_0, v_texCoord_lb).rgb; 19 | lowp vec3 topRightIntensity = texture2D(u_texture_0, v_texCoord_rt).rgb; 20 | lowp vec3 topLeftIntensity = texture2D(u_texture_0, v_texCoord_lt).rgb; 21 | lowp vec3 bottomRightIntensity = texture2D(u_texture_0, v_texCoord_rb).rgb; 22 | lowp vec3 leftIntensity = texture2D(u_texture_0, v_texCoord_l).rgb; 23 | lowp vec3 rightIntensity = texture2D(u_texture_0, v_texCoord_r).rgb; 24 | lowp vec3 bottomIntensity = texture2D(u_texture_0, v_texCoord_b).rgb; 25 | lowp vec3 topIntensity = texture2D(u_texture_0, v_texCoord_t).rgb; 26 | lowp vec3 centerIntensity = texture2D(u_texture_0, v_texCoord).rgb; 27 | 28 | lowp float rByteTally = 1.0 / 255.0 * step(centerIntensity.r, topRightIntensity.r); 29 | rByteTally += 2.0 / 255.0 * step(centerIntensity.r, topIntensity.r); 30 | rByteTally += 4.0 / 255.0 * step(centerIntensity.r, topLeftIntensity.r); 31 | rByteTally += 8.0 / 255.0 * step(centerIntensity.r, leftIntensity.r); 32 | rByteTally += 16.0 / 255.0 * step(centerIntensity.r, bottomLeftIntensity.r); 33 | rByteTally += 32.0 / 255.0 * step(centerIntensity.r, bottomIntensity.r); 34 | rByteTally += 64.0 / 255.0 * step(centerIntensity.r, bottomRightIntensity.r); 35 | rByteTally += 128.0 / 255.0 * step(centerIntensity.r, rightIntensity.r); 36 | 37 | lowp float gByteTally = 1.0 / 255.0 * step(centerIntensity.g, topRightIntensity.g); 38 | gByteTally += 2.0 / 255.0 * step(centerIntensity.g, topIntensity.g); 39 | gByteTally += 4.0 / 255.0 * step(centerIntensity.g, topLeftIntensity.g); 40 | gByteTally += 8.0 / 255.0 * step(centerIntensity.g, leftIntensity.g); 41 | gByteTally += 16.0 / 255.0 * step(centerIntensity.g, bottomLeftIntensity.g); 42 | gByteTally += 32.0 / 255.0 * step(centerIntensity.g, bottomIntensity.g); 43 | gByteTally += 64.0 / 255.0 * step(centerIntensity.g, bottomRightIntensity.g); 44 | gByteTally += 128.0 / 255.0 * step(centerIntensity.g, rightIntensity.g); 45 | 46 | lowp float bByteTally = 1.0 / 255.0 * step(centerIntensity.b, topRightIntensity.b); 47 | bByteTally += 2.0 / 255.0 * step(centerIntensity.b, topIntensity.b); 48 | bByteTally += 4.0 / 255.0 * step(centerIntensity.b, topLeftIntensity.b); 49 | bByteTally += 8.0 / 255.0 * step(centerIntensity.b, leftIntensity.b); 50 | bByteTally += 16.0 / 255.0 * step(centerIntensity.b, bottomLeftIntensity.b); 51 | bByteTally += 32.0 / 255.0 * step(centerIntensity.b, bottomIntensity.b); 52 | bByteTally += 64.0 / 255.0 * step(centerIntensity.b, bottomRightIntensity.b); 53 | bByteTally += 128.0 / 255.0 * step(centerIntensity.b, rightIntensity.b); 54 | 55 | // TODO: Replace the above with a dot product and two vec4s 56 | // TODO: Apply step to a matrix, rather than individually 57 | 58 | gl_FragColor = vec4(rByteTally, gByteTally, bByteTally, 1.0); 59 | } 60 | `; 61 | 62 | export const GPUImageColorLocalBinaryPatternFilter = GL.createComponent( 63 | ({children, texelWidth, texelHeight})=>{ 64 | return ( 65 | 69 | {children} 70 | 71 | ); 72 | } 73 | ); -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /example/ios/example.xcodeproj/xcshareddata/xcschemes/example-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"], 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.example" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile project(':gl-react-native') 130 | compile fileTree(dir: "libs", include: ["*.jar"]) 131 | compile "com.android.support:appcompat-v7:23.0.1" 132 | compile "com.facebook.react:react-native:+" // From node_modules 133 | } 134 | 135 | // Run this once to be able to run the application with BUCK 136 | // puts all compile dependencies into folder libs for BUCK to use 137 | task copyDownloadableDepsToLibs(type: Copy) { 138 | from configurations.compile 139 | into 'libs' 140 | } 141 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [WIP] react-native-GPUImage 2 | 3 | ![](https://img.shields.io/badge/license-MIT-000000.svg) 4 | [![npm](https://img.shields.io/npm/dm/wj-react-native-gpuimage.svg)](https://www.npmjs.com/package/wj-react-native-gpuimage) 5 | [![npm](https://img.shields.io/npm/v/wj-react-native-gpuimage.svg)](https://www.npmjs.com/package/wj-react-native-gpuimage) 6 | ![](https://img.shields.io/badge/platform-react--native-brightgreen.svg) 7 | 8 | GPUImage Component for React Native 9 | 10 | Inspired by [GPUImage](https://github.com/BradLarson/GPUImage) and [GPUImage for Android](https://github.com/CyberAgent/android-gpuimage) 11 | 12 | [SHOWCASE](#user-content-showcase) 13 | 14 | ## DEPENDENCIES 15 | 16 | - React-Native > 0.40 17 | - gl-react 18 | - gl-react-native 19 | 20 | ## DOC 21 | 22 | ### INSTALL 23 | 24 | 1. `npm i gl-react --save` 25 | 2. `npm i gl-react-native --save` 26 | 3. `npm i gl-react-image --save` [optional, but recommended] 27 | 4. `npm i wj-react-native-gpuimage --save` 28 | 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 29 | 30 | ### USAGE 31 | 32 | * BASIC 33 | 34 | ``` 35 | import * as GPUImage from "wj-react-native-gpuimage"; 36 | 37 | ... 38 | 39 | render() { 40 | return ( 41 | 42 | 43 | 47 | 48 | 49 | ); 50 | } 51 | ... 52 | ``` 53 | 54 | * CUSTOM SHADER 55 | 56 | ``` 57 | import * as GPUImage from "wj-react-native-gpuimage"; 58 | ... 59 | render() { 60 | return ( 61 | 62 | 75 | 76 | 77 | ); 78 | } 79 | ... 80 | ``` 81 | 82 | * GROUP 83 | 84 | ``` 85 | import * as GPUImage from "wj-react-native-gpuimage"; 86 | ... 87 | render() { 88 | return ( 89 | 90 | 91 | 92 | 96 | 97 | 98 | 99 | ); 100 | } 101 | ... 102 | ``` 103 | 104 | Check [example](https://github.com/CubeSugar/react-native-GPUImage/tree/master/example) for more details. 105 | 106 | 1. `cd example` 107 | 2. `npm install` 108 | 3. edit *RNGLContext.java* 109 | 4. `react-native run-android` or `react-native run-ios` 110 | 111 | ## NOTE 112 | - vertex shader support for Android 113 | 114 | ``` 115 | // gl-react-native proj 116 | // android/src/main/java/com/projectseptember/RNGL/RNGLContext.java 117 | public void addShader (final Integer id, final ReadableMap config, final Callback onCompile) { 118 | final String frag = config.getString("frag"); 119 | final String name = config.getString("name"); 120 | //shaders.put(id, new GLShaderData(name, STATIC_VERT, frag)); 121 | String vert = STATIC_VERT; 122 | if (config.hasKey("vert")) { 123 | vert = config.getString("vert"); 124 | } 125 | shaders.put(id, new GLShaderData(name, vert, frag)); 126 | if (onCompile != null) { 127 | onCompileCallbacks.put(id, onCompile); 128 | } 129 | } 130 | ``` 131 | 132 | ## SHOWCASE 133 | 134 | ![PixelateEffect](https://github.com/CubeSugar/react-native-GPUImage/blob/master/example/showcase/pixelate.png?raw=true) 135 | ![HalftoonEffect](https://github.com/CubeSugar/react-native-GPUImage/blob/master/example/showcase/halftoon.png?raw=true) 136 | ![PolkaDotEffect](https://github.com/CubeSugar/react-native-GPUImage/blob/master/example/showcase/polkadot.png?raw=true) 137 | ![VignetteEffect](https://github.com/CubeSugar/react-native-GPUImage/blob/master/example/showcase/vignette.png?raw=true) 138 | ![CannyEdgeDetect](https://github.com/CubeSugar/react-native-GPUImage/blob/master/example/showcase/cannyedgedetection.png?raw=true) 139 | 140 | ## PROGRESS 141 | 142 | #### Filters 143 | - [x] GPUImageFilter 144 | - [x] GPUImageTwoInputFilter 145 | - [x] GPUImage3x3TextureSamplingFilter 146 | 147 | #### Color processing 148 | - [x] GPUImageBrightnessFilter 149 | - [ ] GPUImageLevelsFilter 150 | - [ ] GPUImageExposureFilter 151 | - [x] GPUImageContrastFilter 152 | - [x] GPUImageSaturationFilter 153 | - [x] GPUImageGammaFilter 154 | - [x] GPUImageColorMatrixFilter 155 | - [x] GPUImageRGBFilter 156 | - [ ] GPUImageHSBFilter 157 | - [ ] GPUImageHueFilter 158 | - [x] GPUImageColorInvertFilter 159 | - [x] GPUImageGrayscaleFilter 160 | - [x] GPUImageLuminanceThresholdFilter 161 | 162 | #### Image processing 163 | - [x] GPUImage3x3ConvolutionFilter 164 | - [x] GPUImageLocalBinaryPatternFilter 165 | - [x] GPUImageColorLocalBinaryPatternFilter 166 | - [x] GPUImageSobelEdgeDetectionFilter 167 | - [x] GPUImageThresholdEdgeDetectionFilter 168 | - [x] GPUImageDirectionalSobelEdgeDetectionFilter 169 | - [x] GPUImageDirectionalNonMaximumSuppressionFilter 170 | - [x] GPUImageWeakPixelInclusionFilter 171 | - [x] GPUImageCannyEdgeDetectionFilter 172 | 173 | #### Blends 174 | - [x] GPUImageSourceOverBlendFilter 175 | - [x] GPUImageColorBurnBlendFilter 176 | - [x] GPUImageColorDodgeBlendFilter 177 | - [x] GPUImageDarkenBlendFilter 178 | - [x] GPUImageDifferenceBlendFilter 179 | - [x] GPUImageDissolveBlendFilter 180 | - [x] GPUImageExclusionBlendFilter 181 | - [x] GPUImageHardLightBlendFilter 182 | - [x] GPUImageSoftLightBlendFilter 183 | - [x] GPUImageLightenBlendFilter 184 | - [x] GPUImageAddBlendFilter 185 | - [x] GPUImageSubstractBlendFilter 186 | - [x] GPUImageDivideBlendFilter 187 | - [x] GPUImageMultiplyBlendFilter 188 | - [x] GPUImageOverlayBlendFilter 189 | - [x] GPUImageScreenBlendFilter 190 | - [x] GPUImageChromaKeyBlendFilter 191 | - [x] GPUImageAlphaBlendFilter 192 | - [x] GPUImageNormalBlendFilter 193 | - [x] GPUImageColorBlendFilter 194 | - [x] GPUImageHueBlendFilter 195 | - [x] GPUImageSaturationBlendFilter 196 | - [x] GPUImageLuminosityBlendFilter 197 | - [x] GPUImageLinearBurnBlendFilter 198 | - [x] GPUImageMaskFilter 199 | 200 | #### Effects 201 | - [x] GPUImagePixellateFilter 202 | - [x] GPUImagePolarPixellateFilter 203 | - [x] GPUImagePixellatePositionFilter 204 | - [x] GPUImagePolkaDotFilter 205 | - [x] GPUImageHalftoneFilter 206 | - [x] GPUImageCrosshatchFilter 207 | - [x] GPUImageSketchFilter 208 | - [x] GPUImageThresholdSketchFilter 209 | - [x] GPUImageEmbossFilter 210 | - [x] GPUImageToonFilter 211 | - [x] GPUImageVignetteFilter -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Filters 4 | import {GPUImageFilter} from './framework/Filters/GPUImageFilter'; 5 | import {GPUImageTwoInputFilter} from './framework/Filters/GPUImageTwoInputFilter'; 6 | import {GPUImage3x3TextureSamplingFilter} from './framework/Filters/GPUImage3x3TextureSamplingFilter'; 7 | 8 | // Blends 9 | import {GPUImageSourceOverBlendFilter} from './framework/Filters/Blends/GPUImageSourceOverBlendFilter'; 10 | import {GPUImageColorBurnBlendFilter} from './framework/Filters/Blends/GPUImageColorBurnBlendFilter'; 11 | import {GPUImageColorDodgeBlendFilter} from './framework/Filters/Blends/GPUImageColorDodgeBlendFilter'; 12 | import {GPUImageDarkenBlendFilter} from './framework/Filters/Blends/GPUImageDarkenBlendFilter'; 13 | import {GPUImageDifferenceBlendFilter} from './framework/Filters/Blends/GPUImageDifferenceBlendFilter'; 14 | import {GPUImageDissolveBlendFilter} from './framework/Filters/Blends/GPUImageDissolveBlendFilter'; 15 | import {GPUImageExclusionBlendFilter} from './framework/Filters/Blends/GPUImageExclusionBlendFilter'; 16 | import {GPUImageHardLightBlendFilter} from './framework/Filters/Blends/GPUImageHardLightBlendFilter'; 17 | import {GPUImageSoftLightBlendFilter} from './framework/Filters/Blends/GPUImageSoftLightBlendFilter'; 18 | import {GPUImageLightenBlendFilter} from './framework/Filters/Blends/GPUImageLightenBlendFilter'; 19 | import {GPUImageAddBlendFilter} from './framework/Filters/Blends/GPUImageAddBlendFilter'; 20 | import {GPUImageSubtractBlendFilter} from './framework/Filters/Blends/GPUImageSubtractBlendFilter'; 21 | import {GPUImageDivideBlendFilter} from './framework/Filters/Blends/GPUImageDivideBlendFilter'; 22 | import {GPUImageMultiplyBlendFilter} from './framework/Filters/Blends/GPUImageMultiplyBlendFilter'; 23 | import {GPUImageOverlayBlendFilter} from './framework/Filters/Blends/GPUImageOverlayBlendFilter'; 24 | import {GPUImageScreenBlendFilter} from './framework/Filters/Blends/GPUImageScreenBlendFilter'; 25 | import {GPUImageChromaKeyBlendFilter} from './framework/Filters/Blends/GPUImageChromaKeyBlendFilter'; 26 | import {GPUImageAlphaBlendFilter} from './framework/Filters/Blends/GPUImageAlphaBlendFilter'; 27 | import {GPUImageNormalBlendFilter} from './framework/Filters/Blends/GPUImageNormalBlendFilter'; 28 | import {GPUImageColorBlendFilter} from './framework/Filters/Blends/GPUImageColorBlendFilter'; 29 | import {GPUImageHueBlendFilter} from './framework/Filters/Blends/GPUImageHueBlendFilter'; 30 | import {GPUImageSaturationBlendFilter} from './framework/Filters/Blends/GPUImageSaturationBlendFilter'; 31 | import {GPUImageLuminosityBlendFilter} from './framework/Filters/Blends/GPUImageLuminosityBlendFilter'; 32 | import {GPUImageLinearBurnBlendFilter} from './framework/Filters/Blends/GPUImageLinearBurnBlendFilter'; 33 | import {GPUImageMaskFilter} from './framework/Filters/Blends/GPUImageMaskFilter'; 34 | 35 | // Color 36 | import {GPUImageGrayscaleFilter} from './framework/Filters/ColorProcessing/GPUImageGrayscaleFilter'; 37 | import {GPUImageColorInvertFilter} from './framework/Filters/ColorProcessing/GPUImageColorInvertFilter'; 38 | import {GPUImageLuminanceThresholdFilter} from './framework/Filters/ColorProcessing/GPUImageLuminanceThresholdFilter'; 39 | import {GPUImageBrightnessFilter} from './framework/Filters/ColorProcessing/GPUImageBrightnessFilter'; 40 | import {GPUImageContrastFilter} from './framework/Filters/ColorProcessing/GPUImageContrastFilter'; 41 | import {GPUImageSaturationFilter} from './framework/Filters/ColorProcessing/GPUImageSaturationFilter'; 42 | import {GPUImageGammaFilter} from './framework/Filters/ColorProcessing/GPUImageGammaFilter'; 43 | import {GPUImageColorMatrixFilter} from './framework/Filters/ColorProcessing/GPUImageColorMatrixFilter'; 44 | import {GPUImageRGBFilter} from './framework/Filters/ColorProcessing/GPUImageRGBFilter'; 45 | 46 | // Effects 47 | import {GPUImagePixelateFilter} from './framework/Filters/Effects/GPUImagePixelateFilter'; 48 | import {GPUImagePixelatePositionFilter} from './framework/Filters/Effects/GPUImagePixelatePositionFilter'; 49 | import {GPUImagePolarPixelateFilter} from './framework/Filters/Effects/GPUImagePolarPixelateFilter'; 50 | import {GPUImagePolkaDotFilter} from './framework/Filters/Effects/GPUImagePolkaDotFilter'; 51 | import {GPUImageHalftoneFilter} from './framework/Filters/Effects/GPUImageHalftoneFilter'; 52 | import {GPUImageCrosshatchFilter} from './framework/Filters/Effects/GPUImageCrosshatchFilter'; 53 | import {GPUImageSketchFilter} from './framework/Filters/Effects/GPUImageSketchFilter'; 54 | import {GPUImageThresholdSketchFilter} from './framework/Filters/Effects/GPUImageThresholdSketchFilter'; 55 | import {GPUImageEmbossFilter} from './framework/Filters/Effects/GPUImageEmbossFilter'; 56 | import {GPUImageToonFilter} from './framework/Filters/Effects/GPUImageToonFilter'; 57 | import {GPUImageVignetteFilter} from './framework/Filters/Effects/GPUImageVignetteFilter'; 58 | 59 | // Image 60 | import {GPUImage3x3ConvolutionFilter} from './framework/Filters/ImageProcessing/GPUImage3x3ConvolutionFilter'; 61 | import {GPUImageSobelEdgeDetectionFilter} from './framework/Filters/ImageProcessing/GPUImageSobelEdgeDetectionFilter'; 62 | import {GPUImageThresholdEdgeDetectionFilter} from './framework/Filters/ImageProcessing/GPUImageThresholdEdgeDetectionFilter'; 63 | import {GPUImageSingleComponentGaussianBlurFilter} from './framework/Filters/ImageProcessing/GPUImageSingleComponentGaussianBlurFilter'; 64 | import {GPUImageDirectionalSobelEdgeDetectionFilter} from './framework/Filters/ImageProcessing/GPUImageDirectionalSobelEdgeDetectionFilter'; 65 | import {GPUImageDirectionalNonMaximumSuppressionFilter} from './framework/Filters/ImageProcessing/GPUImageDirectionalNonMaximumSuppressionFilter'; 66 | import {GPUImageWeakPixelInclusionFilter} from './framework/Filters/ImageProcessing/GPUImageWeakPixelInclusionFilter'; 67 | import {GPUImageCannyEdgeDetectionFilter} from './framework/Filters/ImageProcessing/GPUImageCannyEdgeDetectionFilter'; 68 | import {GPUImageLocalBinaryPatternFilter} from './framework/Filters/ImageProcessing/GPUImageLocalBinaryPatternFilter'; 69 | import {GPUImageColorLocalBinaryPatternFilter} from './framework/Filters/ImageProcessing/GPUImageColorLocalBinaryPatternFilter'; 70 | 71 | export { 72 | GPUImageFilter, 73 | GPUImageTwoInputFilter, 74 | GPUImage3x3TextureSamplingFilter, 75 | 76 | GPUImageSourceOverBlendFilter, 77 | GPUImageColorBurnBlendFilter, 78 | GPUImageColorDodgeBlendFilter, 79 | GPUImageDarkenBlendFilter, 80 | GPUImageDifferenceBlendFilter, 81 | GPUImageDissolveBlendFilter, 82 | GPUImageExclusionBlendFilter, 83 | GPUImageHardLightBlendFilter, 84 | GPUImageSoftLightBlendFilter, 85 | GPUImageLightenBlendFilter, 86 | GPUImageAddBlendFilter, 87 | GPUImageSubtractBlendFilter, 88 | GPUImageDivideBlendFilter, 89 | GPUImageMultiplyBlendFilter, 90 | GPUImageOverlayBlendFilter, 91 | GPUImageScreenBlendFilter, 92 | GPUImageChromaKeyBlendFilter, 93 | GPUImageAlphaBlendFilter, 94 | GPUImageNormalBlendFilter, 95 | GPUImageColorBlendFilter, 96 | GPUImageHueBlendFilter, 97 | GPUImageSaturationBlendFilter, 98 | GPUImageLuminosityBlendFilter, 99 | GPUImageLinearBurnBlendFilter, 100 | GPUImageMaskFilter, 101 | 102 | GPUImageGrayscaleFilter, 103 | GPUImageColorInvertFilter, 104 | GPUImageLuminanceThresholdFilter, 105 | GPUImageBrightnessFilter, 106 | GPUImageContrastFilter, 107 | GPUImageSaturationFilter, 108 | GPUImageGammaFilter, 109 | GPUImageColorMatrixFilter, 110 | GPUImageRGBFilter, 111 | 112 | GPUImagePixelateFilter, 113 | GPUImagePixelatePositionFilter, 114 | GPUImagePolarPixelateFilter, 115 | GPUImagePolkaDotFilter, 116 | GPUImageHalftoneFilter, 117 | GPUImageCrosshatchFilter, 118 | GPUImageSketchFilter, 119 | GPUImageThresholdSketchFilter, 120 | GPUImageEmbossFilter, 121 | GPUImageToonFilter, 122 | GPUImageVignetteFilter, 123 | 124 | GPUImage3x3ConvolutionFilter, 125 | GPUImageSobelEdgeDetectionFilter, 126 | GPUImageThresholdEdgeDetectionFilter, 127 | GPUImageSingleComponentGaussianBlurFilter, 128 | GPUImageDirectionalSobelEdgeDetectionFilter, 129 | GPUImageDirectionalNonMaximumSuppressionFilter, 130 | GPUImageWeakPixelInclusionFilter, 131 | GPUImageCannyEdgeDetectionFilter, 132 | GPUImageLocalBinaryPatternFilter, 133 | GPUImageColorLocalBinaryPatternFilter, 134 | } 135 | --------------------------------------------------------------------------------