├── .babelrc ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── App.js ├── README.md ├── _config.yml ├── app.json ├── package.json ├── preview.gif ├── src ├── App.js ├── components │ ├── Draggable.js │ ├── StickerPicker.js │ └── emojis.js ├── filters │ ├── Amaro.js │ ├── Brannan.js │ ├── Earlybird.js │ ├── F1977.js │ ├── Hefe.js │ ├── Hudson.js │ ├── Inkwell.js │ ├── Lokofi.js │ ├── LordKelvin.js │ ├── Nashville.js │ ├── Normal.js │ ├── Rise.js │ ├── Sierra.js │ ├── Sutro.js │ ├── Toaster.js │ ├── Valencia.js │ ├── Walden.js │ └── XproII.js ├── images │ ├── photo1.jpg │ ├── photo2.jpg │ └── photo3.jpg └── resources │ ├── 1977blowout.png │ ├── 1977map.png │ ├── amaroMap.png │ ├── blackboard1024.png │ ├── brannanBlowout.png │ ├── brannanContrast.png │ ├── brannanLuma.png │ ├── brannanProcess.png │ ├── brannanScreen.png │ ├── earlyBirdCurves.png │ ├── earlybirdBlowout.png │ ├── earlybirdMap.png │ ├── earlybirdOverlayMap.png │ ├── edgeBurn.png │ ├── hefeGradientMap.png │ ├── hefeMap.png │ ├── hefeMetal.png │ ├── hefeSoftLight.png │ ├── hudsonBackground.png │ ├── hudsonMap.png │ ├── inkwellMap.png │ ├── kelvinMap.png │ ├── lomoMap.png │ ├── nashvilleMap.png │ ├── overlayMap.png │ ├── riseMap.png │ ├── sierraMap.png │ ├── sierraVignette.png │ ├── softLight.png │ ├── sutroCurves.png │ ├── sutroEdgeBurn.png │ ├── sutroMetal.png │ ├── toasterColorShift.png │ ├── toasterCurves.png │ ├── toasterMetal.png │ ├── toasterOverlayMapWarm.png │ ├── toasterSoftLight.png │ ├── valenciaGradientMap.png │ ├── valenciaMap.png │ ├── vignetteMap.png │ ├── waldenMap.png │ └── xproMap.png └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['airbnb', 'plugin:flowtype/recommended', 'plugin:react/recommended'], 3 | plugins: ['flowtype', 'react', 'react-native'], 4 | parserOptions: { 5 | ecmaVersion: 2016, 6 | sourceType: 'module', 7 | ecmaFeatures: { 8 | jsx: true 9 | } 10 | }, 11 | env: { 12 | es6: true, 13 | node: true 14 | }, 15 | rules: { 16 | 'comma-dangle': 0, 17 | 'no-use-before-define': 0, 18 | 'quote-props': 1, 19 | 'react/jsx-no-bind': 1, 20 | 'react/require-default-props': 0, 21 | 'react/prefer-stateless-function': 1, 22 | 'padded-blocks': 0, 23 | 'no-shadow': 1, 24 | 'no-return-assign': 1, 25 | 'no-case-declarations': 1, 26 | 'react-native/no-unused-styles': 1, 27 | 'react-native/split-platform-components': 1, 28 | 'no-underscore-dangle': 0, 29 | 'global-require': 0, 30 | 'import/no-unresolved': 1, 31 | 'no-param-reassign': 0, 32 | 'no-mixed-operators': 0, 33 | 'consistent-return': 1, 34 | 'react/no-multi-comp': 1, 35 | 'no-confusing-arrow': 0, 36 | 'react/jsx-filename-extension': 0, 37 | 'react/forbid-prop-types': 0, 38 | 'no-console': 0 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /.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.48.0 48 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /.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 | 55 | # custom 56 | .expo 57 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './src/App'; 3 | 4 | export default class AppContainer extends React.Component { 5 | 6 | render() { 7 | return ( 8 | 9 | ); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Testing GL shaders 2 | 3 | This project is a [React Native](https://github.com/facebook/react-native) + [GLv3 alpha](https://github.com/gre/gl-react/tree/master/packages/gl-react-native) + [Expo](https://docs.expo.io/versions/v18.0.0/index.html) mashup to create a somewhat Instagram-like MVP with image filtering & stickers. 4 | 5 | **Preview:** 6 | 7 | ![alt text](./preview.gif "Preview") 8 | 9 | ## Trying it out 10 | 11 | To see it in action, just follow these steps 12 | 13 | ```sh 14 | git clone https://github.com/kelset/react-native-glshaders-testing.git 15 | ``` 16 | 17 | ```sh 18 | cd react-native-glshaders-testing 19 | ``` 20 | 21 | ```sh 22 | npm i 23 | ``` 24 | 25 | (*note: please make sure you are running npm v4*) 26 | 27 | ```sh 28 | exp start 29 | ``` 30 | 31 | And then scan the QR code with the [Expo app](https://expo.io/). 32 | 33 | ## Current issues 34 | 35 | Hopefully step by step they will get solved. 36 | 37 | 1. It's really slow 38 | 1. On Android, the Save image works in a fancy way. If I add a sticker it actually shows the image. 39 | 40 | ## Troubleshooting 41 | 42 | Apparently, to make it work, there are some things to sort out: 43 | 44 | 1. First thing to do is to follow what said in this StackOverflow [answer](https://stackoverflow.com/questions/27095077/how-do-i-use-toolsoverridelibrary-in-a-build-gradle-file) but write this `tools:overrideLibrary="fr.greweb.rngl"` 45 | 1. based on this [issue](https://github.com/facebook/react-native/issues/3976) here the way to fix it is to install Android's NDK `r10e`, downloadable from [here](https://developer.android.com/ndk/downloads/older_releases.html). 46 | 1. And also adding [this](https://github.com/michel-kraemer/gradle-download-task/issues/58#issuecomment-240358283) is necessary. 47 | 1. Temp [fix](https://github.com/gre/gl-react/pull/120/files) for GL -- can't make it work anymore, I'll stick to iOS simulator atm 48 | 1. Need to use `npm@4.6.1` to make it work with Expo properly 49 | 1. `gl-react-native` doesn't work when attached to the debugger 50 | 51 | ## Acknowledgments 52 | 53 | The work of this project is mostly a merge of these awesome projects by some awesome people: 54 | 55 | 1. instagram like [filters](https://github.com/stoffern/gl-react-instagramfilters) 56 | 1. sticker fanciness, inspired by [Jani's work](https://github.com/jevakallio/react-native-snap-demo) 57 | 1. able to save images, via [`react-native-view-shot`](https://github.com/gre/react-native-view-shot) 58 | 1. this fork from [Brent](https://github.com/brentvatne) that managed to make it work with Expo 59 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GlTesting", 3 | "displayName": "GlTesting", 4 | "expo": { 5 | "slug": "gl-testing", 6 | "privacy": "public", 7 | "sdkVersion": "18.0.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GlTesting", 3 | "version": "0.0.1", 4 | "private": true, 5 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 6 | "scripts": { 7 | "start": "react-native-scripts start", 8 | "eject": "react-native-scripts eject", 9 | "android": "react-native-scripts android", 10 | "ios": "react-native-scripts ios", 11 | "test": "node node_modules/jest/bin/jest.js --watch" 12 | }, 13 | "jest": { 14 | "preset": "jest-expo" 15 | }, 16 | "dependencies": { 17 | "expo": "^18.0.1", 18 | "gl-react": "^3.6.0", 19 | "gl-react-expo": "^3.6.0", 20 | "gl-react-native": "^3.6.0", 21 | "prop-types": "^15.5.10", 22 | "react": "16.0.0-alpha.12", 23 | "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.2.tar.gz" 24 | }, 25 | "devDependencies": { 26 | "babel-eslint": "^7.2.1", 27 | "eslint": "^3.19.0", 28 | "eslint-config-airbnb": "^15.0.1", 29 | "eslint-plugin-flowtype": "^2.34.1", 30 | "eslint-plugin-import": "^2.6.1", 31 | "eslint-plugin-jsx-a11y": "^6.0.2", 32 | "eslint-plugin-react": "^7.0.1", 33 | "eslint-plugin-react-native": "^2.3.2", 34 | "jest-expo": "~18.0.0", 35 | "react-native-scripts": "0.0.40", 36 | "react-test-renderer": "16.0.0-alpha.12" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/preview.gif -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity, Modal } from 'react-native'; 3 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 4 | 5 | import { Surface } from 'gl-react-expo'; 6 | import { takeSnapshotAsync } from 'expo'; 7 | 8 | import StickerPicker from './components/StickerPicker'; 9 | 10 | import Amaro from './filters/Amaro'; 11 | import Brannan from './filters/Brannan'; 12 | import Earlybird from './filters/Earlybird'; 13 | import F1977 from './filters/F1977'; 14 | import Hefe from './filters/Hefe'; 15 | import Hudson from './filters/Hudson'; 16 | import Inkwell from './filters/Inkwell'; 17 | import Lokofi from './filters/Lokofi'; 18 | import LordKelvin from './filters/LordKelvin'; 19 | import Nashville from './filters/Nashville'; 20 | import Normal from './filters/Normal'; 21 | import Rise from './filters/Rise'; 22 | import Sierra from './filters/Sierra'; 23 | import Sutro from './filters/Sutro'; 24 | import Toaster from './filters/Toaster'; 25 | import Valencia from './filters/Valencia'; 26 | import Walden from './filters/Walden'; 27 | import XproII from './filters/XproII'; 28 | 29 | const filtersArray = [ 30 | 'amaro', 31 | // 'brannan', 32 | 'earlybird', 33 | // 'f1977', 34 | // 'hefe', 35 | // 'hudson', 36 | 'inkwell', 37 | // 'lokofi', 38 | // 'lordkelvin', 39 | // 'nashville', 40 | // 'normal', 41 | // 'rise', 42 | 'sierra', 43 | // 'sutro', 44 | 'toaster', 45 | // 'valencia', 46 | 'walden' 47 | // 'xproII' 48 | ]; 49 | 50 | const filtersComponents = { 51 | amaro: Amaro, 52 | brannan: Brannan, 53 | earlybird: Earlybird, 54 | f1977: F1977, 55 | hefe: Hefe, 56 | hudson: Hudson, 57 | inkwell: Inkwell, 58 | lokofi: Lokofi, 59 | lordkelvin: LordKelvin, 60 | nashville: Nashville, 61 | normal: Normal, 62 | rise: Rise, 63 | sierra: Sierra, 64 | sutro: Sutro, 65 | toaster: Toaster, 66 | valencia: Valencia, 67 | walden: Walden, 68 | xproII: XproII 69 | }; 70 | 71 | export default class App extends React.PureComponent { 72 | constructor() { 73 | super(); 74 | this.state = { 75 | image: resolveAssetSource(require('./images/photo1.jpg')), 76 | selectedFilter: 'none', 77 | sticker: false, 78 | modalVisible: false, 79 | imagePreview: '' 80 | }; 81 | } 82 | 83 | changeFilter = (filter) => { 84 | this.setState({ 85 | selectedFilter: filter 86 | }); 87 | }; 88 | 89 | changePicture = (image) => { 90 | this.setState({ 91 | image 92 | }); 93 | }; 94 | 95 | changeSticker = () => { 96 | this.setState({ 97 | sticker: !this.state.sticker 98 | }); 99 | }; 100 | 101 | closeModal = () => { 102 | this.setState({ 103 | imagePreview: '', 104 | modalVisible: false 105 | }); 106 | }; 107 | 108 | saveImage = () => { 109 | takeSnapshotAsync(this.snapArea, { 110 | result: 'file', 111 | format: 'jpeg', 112 | quality: 0.8 113 | }).then( 114 | (uri) => { 115 | console.log('Image saved to', uri); 116 | this.setState({ imagePreview: uri, modalVisible: true }); 117 | }, 118 | error => console.error('Oops, snapshot failed', error) 119 | ); 120 | }; 121 | 122 | showBigImage = (selectedFilter, image) => { 123 | if (selectedFilter !== 'none') { 124 | const FilteredComponent = filtersComponents[selectedFilter]; 125 | 126 | return ( 127 | 128 | 129 | 130 | {image} 131 | 132 | 133 | 134 | {selectedFilter} 135 | 136 | { 139 | this.setState({ selectedFilter: 'none' }); 140 | }} 141 | > 142 | Reset 143 | 144 | 145 | ); 146 | } 147 | 148 | return ( 149 | 150 | 151 | 152 | (no filter) 153 | 154 | 155 | ); 156 | }; 157 | 158 | filterPreviewList = image => 159 | ( 160 | 161 | {filtersArray.map((filter) => { 162 | const FilteredComponent = filtersComponents[filter]; 163 | 164 | return ( 165 | { 169 | this.changeFilter(filter); 170 | }} 171 | > 172 | 173 | 174 | {image} 175 | 176 | 177 | 178 | {filter} 179 | 180 | 181 | ); 182 | })} 183 | 184 | ); 185 | 186 | renderModal = () => 187 | ( {}} 192 | > 193 | 194 | 195 | This is what you obtained 196 | 197 | 198 | 199 | 200 | 201 | 202 | { 204 | this.closeModal(); 205 | }} 206 | > 207 | Hide Modal 208 | 209 | 210 | 211 | ); 212 | 213 | render() { 214 | const { image, sticker, selectedFilter } = this.state; 215 | 216 | return ( 217 | 218 | {this.renderModal()} 219 | 220 | 229 | { 231 | this.changePicture(resolveAssetSource(require('./images/photo1.jpg'))); 232 | }} 233 | style={styles.photoPickerTextContainer} 234 | > 235 | Photo #1 236 | 237 | { 239 | this.changePicture(resolveAssetSource(require('./images/photo2.jpg'))); 240 | }} 241 | style={styles.photoPickerTextContainer} 242 | > 243 | Photo #2 244 | 245 | { 247 | this.changePicture(resolveAssetSource(require('./images/photo3.jpg'))); 248 | }} 249 | style={styles.photoPickerTextContainer} 250 | > 251 | Photo #3 252 | 253 | 254 | 255 | { 259 | this.snapArea = snapArea; 260 | }} 261 | > 262 | 263 | {this.showBigImage(selectedFilter, image)} 264 | 265 | 266 | 267 | 268 | 269 | Pick a filter 270 | 271 | 272 | {this.filterPreviewList(image)} 273 | 274 | 275 | 284 | { 292 | this.saveImage(); 293 | }} 294 | > 295 | Save image 296 | 297 | 298 | { 306 | this.changeSticker(); 307 | }} 308 | > 309 | 310 | {sticker ? 'Close' : 'Add sticker'} 311 | 312 | 313 | 314 | 315 | ); 316 | } 317 | } 318 | 319 | const styles = StyleSheet.create({ 320 | container: { 321 | flex: 1, 322 | backgroundColor: '#F5FCFF' 323 | }, 324 | welcome: { 325 | fontSize: 15, 326 | textAlign: 'center', 327 | margin: 10 328 | }, 329 | photoPickerTextContainer: { 330 | borderColor: 'lightgray', 331 | borderLeftWidth: 1, 332 | borderRightWidth: 1, 333 | flex: 0.3, 334 | justifyContent: 'center' 335 | }, 336 | modalContainer: { 337 | borderColor: 'lightgray', 338 | borderWidth: 1, 339 | flex: 0.1, 340 | justifyContent: 'center' 341 | }, 342 | imageContainer: { 343 | flex: 0.7, 344 | alignItems: 'center', 345 | justifyContent: 'center' 346 | }, 347 | previewContainer: { 348 | padding: 10, 349 | alignItems: 'center', 350 | justifyContent: 'center' 351 | }, 352 | singleImage: { 353 | width: 250, 354 | height: 250 355 | }, 356 | previewImage: { 357 | width: 65, 358 | height: 65 359 | }, 360 | baseText: { 361 | textAlign: 'center' 362 | }, 363 | modalText: { 364 | textAlign: 'center', 365 | fontSize: 16 366 | } 367 | }); 368 | -------------------------------------------------------------------------------- /src/components/Draggable.js: -------------------------------------------------------------------------------- 1 | // original source: https://github.com/jevakallio/react-native-snap-drag/blob/master/index.js 2 | 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { Animated, PanResponder } from 'react-native'; 6 | 7 | const YES = () => true; 8 | // const NO = (evt, gestureState) => false; 9 | 10 | export default class Draggable extends Component { 11 | static propTypes = { 12 | dragStarted: PropTypes.func, 13 | dragEnded: PropTypes.func, 14 | xLocked: PropTypes.bool, 15 | yLocked: PropTypes.bool, 16 | children: PropTypes.object.isRequired, 17 | style: PropTypes.object 18 | }; 19 | 20 | constructor(props) { 21 | super(props); 22 | 23 | this.state = { 24 | draggable: new Animated.ValueXY(), 25 | dragging: false 26 | }; 27 | 28 | this.panResponder = PanResponder.create({ 29 | onStartShouldSetPanResponder: YES, 30 | onStartShouldSetPanResponderCapture: YES, 31 | onMoveShouldSetPanResponder: YES, 32 | onMoveShouldSetPanResponderCapture: YES, 33 | onPanResponderTerminationRequest: YES, 34 | onShouldBlockNativeResponder: YES, 35 | onPanResponderGrant: () => { 36 | this.state.draggable.extractOffset(); 37 | if (this.props.dragStarted) { 38 | this.props.dragStarted(); 39 | } 40 | }, 41 | onPanResponderMove: Animated.event([ 42 | null, 43 | { dx: this.state.draggable.x, dy: this.state.draggable.y } 44 | ]), 45 | onPanResponderRelease: () => { 46 | if (this.props.dragEnded) { 47 | this.props.dragEnded(true); 48 | } 49 | }, 50 | onPanResponderTerminate: () => { 51 | if (this.props.dragEnded) { 52 | this.props.dragEnded(false); 53 | } 54 | } 55 | }); 56 | } 57 | 58 | render() { 59 | const animated = { 60 | transform: [] 61 | }; 62 | 63 | if (!this.props.xLocked) { 64 | animated.transform.push({ translateX: this.state.draggable.x }); 65 | } 66 | 67 | if (!this.props.yLocked) { 68 | animated.transform.push({ translateY: this.state.draggable.y }); 69 | } 70 | 71 | return ( 72 | 73 | {this.props.children} 74 | 75 | ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/components/StickerPicker.js: -------------------------------------------------------------------------------- 1 | // original source: https://github.com/jevakallio/react-native-snap-emoji 2 | 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { Animated, Text, View, Dimensions, TouchableOpacity, StyleSheet } from 'react-native'; 6 | import Draggable from './Draggable'; 7 | import emojis from './emojis'; 8 | 9 | const window = Dimensions.get('window'); 10 | const size = 80; 11 | 12 | export default class StickerPicker extends Component { 13 | static propTypes = { 14 | children: PropTypes.object.isRequired, 15 | isVisible: PropTypes.bool 16 | }; 17 | 18 | constructor(props) { 19 | super(props); 20 | this.animatedTop = new Animated.Value(-size); 21 | } 22 | 23 | state = { 24 | picked: [] 25 | }; 26 | 27 | // show/hide animation 28 | componentWillReceiveProps({ isVisible }) { 29 | if (!isVisible && this.props.isVisible) { 30 | this.animateTo(-size); 31 | } else if (isVisible && !this.props.isVisible) { 32 | this.animateTo(0); 33 | } 34 | } 35 | 36 | animateTo = (toValue) => { 37 | Animated.spring(this.animatedTop, { toValue }).start(); 38 | }; 39 | 40 | // show picked emoji on the screen 41 | pick = (emoji) => { 42 | this.setState({ 43 | picked: this.state.picked.concat({ 44 | top: window.height / 2 - size, 45 | left: window.width / 2 - size / 2, 46 | size, 47 | emoji 48 | }) 49 | }); 50 | }; 51 | 52 | render() { 53 | const { picked } = this.state; 54 | const { children } = this.props; 55 | return ( 56 | 57 | {children} 58 | {picked.map(({ left, top, emoji }) => 59 | ( 60 | 61 | {emoji} 62 | 63 | ) 64 | )} 65 | 70 | {emojis.map(emoji => 71 | ( { 74 | this.pick(emoji); 75 | }} 76 | style={styles.pickerItem} 77 | > 78 | {emoji} 79 | ) 80 | )} 81 | 82 | 83 | ); 84 | } 85 | } 86 | 87 | const styles = StyleSheet.create({ 88 | container: { 89 | flex: 1, 90 | overflow: 'hidden', 91 | backgroundColor: 'transparent' 92 | }, 93 | picked: { 94 | backgroundColor: 'transparent', 95 | fontSize: size 96 | }, 97 | pickerList: { 98 | flex: 1, 99 | position: 'absolute', 100 | backgroundColor: 'rgba(255, 255, 255, 0.9)', 101 | left: 0, 102 | top: 0, 103 | right: 0, 104 | height: 80 105 | }, 106 | pickerItem: { 107 | height: 80, 108 | width: 80, 109 | alignItems: 'center', 110 | justifyContent: 'center' 111 | }, 112 | pickerItemText: { 113 | fontSize: 50 114 | } 115 | }); 116 | -------------------------------------------------------------------------------- /src/components/emojis.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | '😀', 3 | '🤣', 4 | '😆', 5 | '😋', 6 | '😎', 7 | '😍', 8 | '😜', 9 | '💯', 10 | '⭐️', 11 | '💥', 12 | '🔥', 13 | '🌈', 14 | '❤️', 15 | '👏', 16 | '👍', 17 | '👌' 18 | ]; 19 | -------------------------------------------------------------------------------- /src/filters/Amaro.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Amaro: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying highp vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | void main () { 17 | vec4 texel = texture2D(inputImageTexture, uv); 18 | vec3 bbTexel = texture2D(inputImageTexture2, uv).rgb; 19 | texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, (1.0-texel.r))).r; 20 | texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, (1.0-texel.g))).g; 21 | texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, (1.0-texel.b))).b; 22 | vec4 mapped; 23 | mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .83333)).r; 24 | mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g; 25 | mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .16666)).b; 26 | mapped.a = 1.0; 27 | gl_FragColor = mapped; 28 | }` 29 | } 30 | }); 31 | 32 | const Amaro = ({ children: t }) => 33 | (); 42 | 43 | Amaro.propTypes = { 44 | children: PropTypes.object.isRequired 45 | }; 46 | 47 | export default Amaro; 48 | -------------------------------------------------------------------------------- /src/filters/Brannan.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Brannan: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | uniform sampler2D inputImageTexture5; 17 | uniform sampler2D inputImageTexture6; 18 | mat3 saturateMatrix = mat3( 19 | 1.105150, 20 | -0.044850, 21 | -0.046000, 22 | -0.088050, 23 | 1.061950, 24 | -0.089200, 25 | -0.017100, 26 | -0.017100, 27 | 1.132900); 28 | vec3 luma = vec3(.3, .59, .11); 29 | void main () { 30 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 31 | vec2 lookup; 32 | lookup.y = 0.5; 33 | lookup.x = texel.r; 34 | texel.r = texture2D(inputImageTexture2, lookup).r; 35 | lookup.x = texel.g; 36 | texel.g = texture2D(inputImageTexture2, lookup).g; 37 | lookup.x = texel.b; 38 | texel.b = texture2D(inputImageTexture2, lookup).b; 39 | texel = saturateMatrix * texel; 40 | vec2 tc = (2.0 * uv) - 1.0; 41 | float d = dot(tc, tc); 42 | vec3 sampled; 43 | lookup.y = 0.5; 44 | lookup.x = texel.r; 45 | sampled.r = texture2D(inputImageTexture3, lookup).r; 46 | lookup.x = texel.g; 47 | sampled.g = texture2D(inputImageTexture3, lookup).g; 48 | lookup.x = texel.b; 49 | sampled.b = texture2D(inputImageTexture3, lookup).b; 50 | float value = smoothstep(0.0, 1.0, d); 51 | texel = mix(sampled, texel, value); 52 | lookup.x = texel.r; 53 | texel.r = texture2D(inputImageTexture4, lookup).r; 54 | lookup.x = texel.g; 55 | texel.g = texture2D(inputImageTexture4, lookup).g; 56 | lookup.x = texel.b; 57 | texel.b = texture2D(inputImageTexture4, lookup).b; 58 | lookup.x = dot(texel, luma); 59 | texel = mix(texture2D(inputImageTexture5, lookup).rgb, texel, .5); 60 | lookup.x = texel.r; 61 | texel.r = texture2D(inputImageTexture6, lookup).r; 62 | lookup.x = texel.g; 63 | texel.g = texture2D(inputImageTexture6, lookup).g; 64 | lookup.x = texel.b; 65 | texel.b = texture2D(inputImageTexture6, lookup).b; 66 | gl_FragColor = vec4(texel, 1.0); 67 | }` 68 | } 69 | }); 70 | 71 | const Brannan = ({ children: t }) => 72 | (); 83 | 84 | Brannan.propTypes = { 85 | children: PropTypes.object.isRequired 86 | }; 87 | 88 | export default Brannan; 89 | -------------------------------------------------------------------------------- /src/filters/Earlybird.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Earlybird: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | uniform sampler2D inputImageTexture5; 17 | uniform sampler2D inputImageTexture6; 18 | const mat3 saturate = mat3( 19 | 1.210300, 20 | -0.089700, 21 | -0.091000, 22 | -0.176100, 23 | 1.123900, 24 | -0.177400, 25 | -0.034200, 26 | -0.034200, 27 | 1.265800); 28 | const vec3 rgbPrime = vec3(0.25098, 0.14640522, 0.0); 29 | const vec3 desaturate = vec3(.3, .59, .11); 30 | void main () { 31 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 32 | vec2 lookup; 33 | lookup.y = 0.5; 34 | lookup.x = texel.r; 35 | texel.r = texture2D(inputImageTexture2, lookup).r; 36 | lookup.x = texel.g; 37 | texel.g = texture2D(inputImageTexture2, lookup).g; 38 | lookup.x = texel.b; 39 | texel.b = texture2D(inputImageTexture2, lookup).b; 40 | float desaturatedColor; 41 | vec3 result; 42 | desaturatedColor = dot(desaturate, texel); 43 | lookup.x = desaturatedColor; 44 | result.r = texture2D(inputImageTexture3, lookup).r; 45 | lookup.x = desaturatedColor; 46 | result.g = texture2D(inputImageTexture3, lookup).g; 47 | lookup.x = desaturatedColor; 48 | result.b = texture2D(inputImageTexture3, lookup).b; 49 | texel = saturate * mix(texel, result, .5); 50 | vec2 tc = (2.0 * uv) - 1.0; 51 | float d = dot(tc, tc); 52 | vec3 sampled; 53 | lookup.y = .5; 54 | /* 55 | lookup.x = texel.r; 56 | sampled.r = texture2D(inputImageTexture4, lookup).r; 57 | lookup.x = texel.g; 58 | sampled.g = texture2D(inputImageTexture4, lookup).g; 59 | lookup.x = texel.b; 60 | sampled.b = texture2D(inputImageTexture4, lookup).b; 61 | float value = smoothstep(0.0, 1.25, pow(d, 1.35)/1.65); 62 | texel = mix(texel, sampled, value); 63 | */ 64 | //--- 65 | texel.r = texture2D(inputImageTexture4, vec2(d, (1.0-texel.r))).r; 66 | texel.g = texture2D(inputImageTexture4, vec2(d, (1.0-texel.g))).g; 67 | texel.b = texture2D(inputImageTexture4, vec2(d, (1.0-texel.b))).b; 68 | float value = smoothstep(0.0, 1.25, pow(d, 1.35)/1.65); 69 | //--- 70 | lookup.x = texel.r; 71 | sampled.r = texture2D(inputImageTexture5, lookup).r; 72 | lookup.x = texel.g; 73 | sampled.g = texture2D(inputImageTexture5, lookup).g; 74 | lookup.x = texel.b; 75 | sampled.b = texture2D(inputImageTexture5, lookup).b; 76 | texel = mix(sampled, texel, value); 77 | lookup.x = texel.r; 78 | texel.r = texture2D(inputImageTexture6, lookup).r; 79 | lookup.x = texel.g; 80 | texel.g = texture2D(inputImageTexture6, lookup).g; 81 | lookup.x = texel.b; 82 | texel.b = texture2D(inputImageTexture6, lookup).b; 83 | gl_FragColor = vec4(texel, 1.0); 84 | }` 85 | } 86 | }); 87 | 88 | const Earlybird = ({ children: t }) => 89 | (); 100 | 101 | Earlybird.propTypes = { 102 | children: PropTypes.object.isRequired 103 | }; 104 | 105 | export default Earlybird; 106 | -------------------------------------------------------------------------------- /src/filters/F1977.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | F1977: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | void main () { 15 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 16 | texel = vec3( 17 | texture2D(inputImageTexture2, vec2(texel.r, .16666)).r, 18 | texture2D(inputImageTexture2, vec2(texel.g, .5)).g, 19 | texture2D(inputImageTexture2, vec2(texel.b, .83333)).b); 20 | gl_FragColor = vec4(texel, 1.0); 21 | }` 22 | } 23 | }); 24 | 25 | const F1977 = ({ children: t }) => 26 | (); 33 | 34 | F1977.propTypes = { 35 | children: PropTypes.object.isRequired 36 | }; 37 | 38 | export default F1977; 39 | -------------------------------------------------------------------------------- /src/filters/Hefe.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Hefe: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | uniform sampler2D inputImageTexture5; 17 | uniform sampler2D inputImageTexture6; 18 | void main () { 19 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 20 | vec3 edge = texture2D(inputImageTexture2, uv).rgb; 21 | texel = texel * edge; 22 | texel = vec3( 23 | texture2D(inputImageTexture3, vec2(texel.r, .83333)).r, 24 | texture2D(inputImageTexture3, vec2(texel.g, .5)).g, 25 | texture2D(inputImageTexture3, vec2(texel.b, .16666)).b); 26 | vec3 luma = vec3(.30, .59, .11); 27 | vec3 gradSample = texture2D(inputImageTexture4, vec2(dot(luma, texel), .5)).rgb; 28 | vec3 final = vec3( 29 | texture2D(inputImageTexture5, vec2(gradSample.r, (1.0-texel.r))).r, 30 | texture2D(inputImageTexture5, vec2(gradSample.g, (1.0-texel.g))).g, 31 | texture2D(inputImageTexture5, vec2(gradSample.b, (1.0-texel.b))).b 32 | ); 33 | vec3 metal = texture2D(inputImageTexture6, uv).rgb; 34 | vec3 metaled = vec3( 35 | texture2D(inputImageTexture5, vec2(metal.r, (1.0-texel.r))).r, 36 | texture2D(inputImageTexture5, vec2(metal.g, (1.0-texel.g))).g, 37 | texture2D(inputImageTexture5, vec2(metal.b, (1.0-texel.b))).b 38 | ); 39 | gl_FragColor = vec4(metaled, 1.0); 40 | }` 41 | } 42 | }); 43 | 44 | const Hefe = ({ children: t }) => 45 | (); 56 | 57 | Hefe.propTypes = { 58 | children: PropTypes.object.isRequired 59 | }; 60 | 61 | export default Hefe; 62 | -------------------------------------------------------------------------------- /src/filters/Hudson.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Hudson: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | void main () { 17 | vec4 texel = texture2D(inputImageTexture, uv); 18 | vec3 bbTexel = texture2D(inputImageTexture2, uv).rgb; 19 | texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, (1.0-texel.r))).r; 20 | texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, (1.0-texel.g))).g; 21 | texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, (1.0-texel.b))).b; 22 | vec4 mapped; 23 | mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .83333)).r; 24 | mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g; 25 | mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .16666)).b; 26 | mapped.a = 1.0; 27 | gl_FragColor = mapped; 28 | }` 29 | } 30 | }); 31 | 32 | const Hudson = ({ children: t }) => 33 | (); 42 | 43 | Hudson.propTypes = { 44 | children: PropTypes.object.isRequired 45 | }; 46 | 47 | export default Hudson; 48 | -------------------------------------------------------------------------------- /src/filters/Inkwell.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Inkwell: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | void main () { 15 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 16 | texel = vec3(dot(vec3(0.3, 0.6, 0.1), texel)); 17 | texel = vec3(texture2D(inputImageTexture2, vec2(texel.r, .83333)).r); 18 | gl_FragColor = vec4(texel, 1.0); 19 | }` 20 | } 21 | }); 22 | 23 | const Inkwell = ({ children: t }) => 24 | (); 31 | 32 | Inkwell.propTypes = { 33 | children: PropTypes.object.isRequired 34 | }; 35 | 36 | export default Inkwell; 37 | -------------------------------------------------------------------------------- /src/filters/Lokofi.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Lokofi: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | void main () { 16 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 17 | vec2 red = vec2(texel.r, 0.83333); 18 | vec2 green = vec2(texel.g, 0.5); 19 | vec2 blue = vec2(texel.b, 0.16666); 20 | texel.rgb = vec3( 21 | texture2D(inputImageTexture2, red).r, 22 | texture2D(inputImageTexture2, green).g, 23 | texture2D(inputImageTexture2, blue).b); 24 | vec2 tc = (2.0 * uv) - 1.0; 25 | float d = dot(tc, tc); 26 | texel.r = texture2D(inputImageTexture3, vec2(d, (1.0-texel.r))).r; 27 | texel.g = texture2D(inputImageTexture3, vec2(d, (1.0-texel.g))).g; 28 | texel.b = texture2D(inputImageTexture3, vec2(d, (1.0-texel.b))).b; 29 | gl_FragColor = vec4(texel,1.0); 30 | }` 31 | } 32 | }); 33 | 34 | const Lokofi = ({ children: t }) => 35 | (); 43 | 44 | Lokofi.propTypes = { 45 | children: PropTypes.object.isRequired 46 | }; 47 | 48 | export default Lokofi; 49 | -------------------------------------------------------------------------------- /src/filters/LordKelvin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | LordKelvin: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | void main () { 15 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 16 | vec2 lookup; 17 | lookup.y = .5; 18 | lookup.x = texel.r; 19 | texel.r = texture2D(inputImageTexture2, lookup).r; 20 | lookup.x = texel.g; 21 | texel.g = texture2D(inputImageTexture2, lookup).g; 22 | lookup.x = texel.b; 23 | texel.b = texture2D(inputImageTexture2, lookup).b; 24 | gl_FragColor = vec4(texel, 1.0); 25 | }` 26 | } 27 | }); 28 | 29 | const LordKelvin = ({ children: t }) => 30 | (); 37 | 38 | LordKelvin.propTypes = { 39 | children: PropTypes.object.isRequired 40 | }; 41 | 42 | export default LordKelvin; 43 | -------------------------------------------------------------------------------- /src/filters/Nashville.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Nashville: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | void main () { 15 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 16 | texel = vec3( 17 | texture2D(inputImageTexture2, vec2(texel.r, .83333)).r, 18 | texture2D(inputImageTexture2, vec2(texel.g, .5)).g, 19 | texture2D(inputImageTexture2, vec2(texel.b, .16666)).b); 20 | gl_FragColor = vec4(texel, 1.0); 21 | }` 22 | } 23 | }); 24 | 25 | const Nashville = ({ children: t }) => 26 | (); 33 | 34 | Nashville.propTypes = { 35 | children: PropTypes.object.isRequired 36 | }; 37 | 38 | export default Nashville; 39 | -------------------------------------------------------------------------------- /src/filters/Normal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | 6 | const shaders = Shaders.create({ 7 | Normal: { 8 | frag: GLSL` 9 | precision highp float; 10 | varying vec2 uv; 11 | uniform sampler2D inputImageTexture; 12 | void main () { 13 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 14 | gl_FragColor = vec4(texel, 1.0); 15 | }` 16 | } 17 | }); 18 | 19 | const Normal = ({ children: t }) => 20 | (); 26 | 27 | Normal.propTypes = { 28 | children: PropTypes.object.isRequired 29 | }; 30 | 31 | export default Normal; 32 | -------------------------------------------------------------------------------- /src/filters/Rise.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Rise: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | void main () { 17 | vec4 texel = texture2D(inputImageTexture, uv); 18 | vec3 bbTexel = texture2D(inputImageTexture2, uv).rgb; 19 | texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, (1.0-texel.r))).r; 20 | texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, (1.0-texel.g))).g; 21 | texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, (1.0-texel.b))).b; 22 | vec4 mapped; 23 | mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .83333)).r; 24 | mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g; 25 | mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .16666)).b; 26 | mapped.a = 1.0; 27 | gl_FragColor = mapped; 28 | }` 29 | } 30 | }); 31 | 32 | const Rise = ({ children: t }) => 33 | (); 42 | 43 | Rise.propTypes = { 44 | children: PropTypes.object.isRequired 45 | }; 46 | 47 | export default Rise; 48 | -------------------------------------------------------------------------------- /src/filters/Sierra.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Sierra: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | void main () { 17 | vec4 texel = texture2D(inputImageTexture, uv); 18 | vec3 bbTexel = texture2D(inputImageTexture2, uv).rgb; 19 | texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, (1.0-texel.r))).r; 20 | texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, (1.0-texel.g))).g; 21 | texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, (1.0-texel.b))).b; 22 | vec4 mapped; 23 | mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .83333)).r; 24 | mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g; 25 | mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .16666)).b; 26 | mapped.a = 1.0; 27 | gl_FragColor = mapped; 28 | }` 29 | } 30 | }); 31 | 32 | const Sierra = ({ children: t }) => 33 | (); 42 | 43 | Sierra.propTypes = { 44 | children: PropTypes.object.isRequired 45 | }; 46 | 47 | export default Sierra; 48 | -------------------------------------------------------------------------------- /src/filters/Sutro.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Sutro: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | uniform sampler2D inputImageTexture5; 17 | uniform sampler2D inputImageTexture6; 18 | void main () { 19 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 20 | vec2 tc = (2.0 * uv) - 1.0; 21 | float d = dot(tc, tc); 22 | texel.r = texture2D(inputImageTexture2, vec2(d, (1.0-texel.r))).r; 23 | texel.g = texture2D(inputImageTexture2, vec2(d, (1.0-texel.g))).g; 24 | texel.b = texture2D(inputImageTexture2, vec2(d, (1.0-texel.b))).b; 25 | vec3 rgbPrime = vec3(0.1019, 0.0, 0.0); 26 | float m = dot(vec3(.3, .59, .11), texel.rgb) - 0.03058; 27 | texel = mix(texel, rgbPrime + m, 0.32); 28 | vec3 metal = texture2D(inputImageTexture3, uv).rgb; 29 | texel.r = texture2D(inputImageTexture4, vec2(metal.r, (1.0-texel.r))).r; 30 | texel.g = texture2D(inputImageTexture4, vec2(metal.g, (1.0-texel.g))).g; 31 | texel.b = texture2D(inputImageTexture4, vec2(metal.b, (1.0-texel.b))).b; 32 | texel = texel * texture2D(inputImageTexture5, uv).rgb; 33 | texel.r = texture2D(inputImageTexture6, vec2(texel.r, .83333)).r; 34 | texel.g = texture2D(inputImageTexture6, vec2(texel.g, .5)).g; 35 | texel.b = texture2D(inputImageTexture6, vec2(texel.b, .16666)).b; 36 | gl_FragColor = vec4(texel, 1.0); 37 | }` 38 | } 39 | }); 40 | 41 | const Sutro = ({ children: t }) => 42 | (); 53 | 54 | Sutro.propTypes = { 55 | children: PropTypes.object.isRequired 56 | }; 57 | 58 | export default Sutro; 59 | -------------------------------------------------------------------------------- /src/filters/Toaster.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Toaster: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | uniform sampler2D inputImageTexture4; 16 | uniform sampler2D inputImageTexture5; 17 | uniform sampler2D inputImageTexture6; 18 | void main () { 19 | lowp vec3 texel; 20 | mediump vec2 lookup; 21 | vec2 blue; 22 | vec2 green; 23 | vec2 red; 24 | lowp vec4 tmpvar_1; 25 | tmpvar_1 = texture2D (inputImageTexture, uv); 26 | texel = tmpvar_1.xyz; 27 | lowp vec4 tmpvar_2; 28 | tmpvar_2 = texture2D (inputImageTexture2, uv); 29 | lowp vec2 tmpvar_3; 30 | tmpvar_3.x = tmpvar_2.x; 31 | tmpvar_3.y = tmpvar_1.x; 32 | texel.x = texture2D (inputImageTexture3, tmpvar_3).x; 33 | lowp vec2 tmpvar_4; 34 | tmpvar_4.x = tmpvar_2.y; 35 | tmpvar_4.y = tmpvar_1.y; 36 | texel.y = texture2D (inputImageTexture3, tmpvar_4).y; 37 | lowp vec2 tmpvar_5; 38 | tmpvar_5.x = tmpvar_2.z; 39 | tmpvar_5.y = tmpvar_1.z; 40 | texel.z = texture2D (inputImageTexture3, tmpvar_5).z; 41 | red.x = texel.x; 42 | red.y = 0.16666; 43 | green.x = texel.y; 44 | green.y = 0.5; 45 | blue.x = texel.z; 46 | blue.y = 0.833333; 47 | texel.x = texture2D (inputImageTexture4, red).x; 48 | texel.y = texture2D (inputImageTexture4, green).y; 49 | texel.z = texture2D (inputImageTexture4, blue).z; 50 | mediump vec2 tmpvar_6; 51 | tmpvar_6 = ((2.0 * uv) - 1.0); 52 | mediump vec2 tmpvar_7; 53 | tmpvar_7.x = dot (tmpvar_6, tmpvar_6); 54 | tmpvar_7.y = texel.x; 55 | lookup = tmpvar_7; 56 | texel.x = texture2D (inputImageTexture5, tmpvar_7).x; 57 | lookup.y = texel.y; 58 | texel.y = texture2D (inputImageTexture5, lookup).y; 59 | lookup.y = texel.z; 60 | texel.z = texture2D (inputImageTexture5, lookup).z; 61 | red.x = texel.x; 62 | green.x = texel.y; 63 | blue.x = texel.z; 64 | texel.x = texture2D (inputImageTexture6, red).x; 65 | texel.y = texture2D (inputImageTexture6, green).y; 66 | texel.z = texture2D (inputImageTexture6, blue).z; 67 | lowp vec4 tmpvar_8; 68 | tmpvar_8.w = 1.0; 69 | tmpvar_8.xyz = texel; 70 | gl_FragColor = tmpvar_8; 71 | }` 72 | } 73 | }); 74 | 75 | const Toaster = ({ children: t }) => 76 | (); 87 | 88 | Toaster.propTypes = { 89 | children: PropTypes.object.isRequired 90 | }; 91 | 92 | export default Toaster; 93 | -------------------------------------------------------------------------------- /src/filters/Valencia.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Valencia: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | mat3 saturateMatrix = mat3( 16 | 1.1402, 17 | -0.0598, 18 | -0.061, 19 | -0.1174, 20 | 1.0826, 21 | -0.1186, 22 | -0.0228, 23 | -0.0228, 24 | 1.1772); 25 | vec3 lumaCoeffs = vec3(.3, .59, .11); 26 | void main () { 27 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 28 | texel = vec3( 29 | texture2D(inputImageTexture2, vec2(texel.r, .8333333)).r, 30 | texture2D(inputImageTexture2, vec2(texel.g, .5)).g, 31 | texture2D(inputImageTexture2, vec2(texel.b, .1666666)).b 32 | ); 33 | texel = saturateMatrix * texel; 34 | float luma = dot(lumaCoeffs, texel); 35 | texel = vec3( 36 | texture2D(inputImageTexture3, vec2(luma, (1.0-texel.r))).r, 37 | texture2D(inputImageTexture3, vec2(luma, (1.0-texel.g))).g, 38 | texture2D(inputImageTexture3, vec2(luma, (1.0-texel.b))).b); 39 | gl_FragColor = vec4(texel, 1.0); 40 | }` 41 | } 42 | }); 43 | 44 | const Valencia = ({ children: t }) => 45 | (); 53 | 54 | Valencia.propTypes = { 55 | children: PropTypes.object.isRequired 56 | }; 57 | 58 | export default Valencia; 59 | -------------------------------------------------------------------------------- /src/filters/Walden.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | Walden: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | void main () { 16 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 17 | texel = vec3( 18 | texture2D(inputImageTexture2, vec2(texel.r, .83333)).r, 19 | texture2D(inputImageTexture2, vec2(texel.g, .5)).g, 20 | texture2D(inputImageTexture2, vec2(texel.b, .16666)).b); 21 | vec2 tc = (2.0 * uv) - 1.0; 22 | float d = dot(tc, tc); 23 | texel.r = texture2D(inputImageTexture3, vec2(d, (1.0-texel.r))).r; 24 | texel.g = texture2D(inputImageTexture3, vec2(d, (1.0-texel.g))).g; 25 | texel.b = texture2D(inputImageTexture3, vec2(d, (1.0-texel.b))).b; 26 | gl_FragColor = vec4(texel, 1.0); 27 | }` 28 | } 29 | }); 30 | 31 | const Walden = ({ children: t }) => 32 | (); 40 | 41 | Walden.propTypes = { 42 | children: PropTypes.object.isRequired 43 | }; 44 | 45 | export default Walden; 46 | -------------------------------------------------------------------------------- /src/filters/XproII.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { GLSL, Shaders, Node } from 'gl-react'; 5 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 6 | 7 | const shaders = Shaders.create({ 8 | XproII: { 9 | frag: GLSL` 10 | precision highp float; 11 | varying vec2 uv; 12 | uniform sampler2D inputImageTexture; 13 | uniform sampler2D inputImageTexture2; 14 | uniform sampler2D inputImageTexture3; 15 | void main () { 16 | vec3 texel = texture2D(inputImageTexture, uv).rgb; 17 | vec2 tc = (2.0 * uv) - 1.0; 18 | float d = dot(tc, tc); 19 | texel.r = texture2D(inputImageTexture3, vec2(d, (1.0-texel.r))).r; 20 | texel.g = texture2D(inputImageTexture3, vec2(d, (1.0-texel.g))).g; 21 | texel.b = texture2D(inputImageTexture3, vec2(d, (1.0-texel.b))).b; 22 | texel.r = texture2D(inputImageTexture2, vec2(texel.r, .83333)).r; 23 | texel.g = texture2D(inputImageTexture2, vec2(texel.g, .5)).g; 24 | texel.b = texture2D(inputImageTexture2, vec2(texel.b, .16666)).b; 25 | gl_FragColor = vec4(texel, 1.0); 26 | }` 27 | } 28 | }); 29 | 30 | const XproII = ({ children: t }) => 31 | (); 39 | 40 | XproII.propTypes = { 41 | children: PropTypes.object.isRequired 42 | }; 43 | 44 | export default XproII; 45 | -------------------------------------------------------------------------------- /src/images/photo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/images/photo1.jpg -------------------------------------------------------------------------------- /src/images/photo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/images/photo2.jpg -------------------------------------------------------------------------------- /src/images/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/images/photo3.jpg -------------------------------------------------------------------------------- /src/resources/1977blowout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/1977blowout.png -------------------------------------------------------------------------------- /src/resources/1977map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/1977map.png -------------------------------------------------------------------------------- /src/resources/amaroMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/amaroMap.png -------------------------------------------------------------------------------- /src/resources/blackboard1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/blackboard1024.png -------------------------------------------------------------------------------- /src/resources/brannanBlowout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/brannanBlowout.png -------------------------------------------------------------------------------- /src/resources/brannanContrast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/brannanContrast.png -------------------------------------------------------------------------------- /src/resources/brannanLuma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/brannanLuma.png -------------------------------------------------------------------------------- /src/resources/brannanProcess.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/brannanProcess.png -------------------------------------------------------------------------------- /src/resources/brannanScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/brannanScreen.png -------------------------------------------------------------------------------- /src/resources/earlyBirdCurves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/earlyBirdCurves.png -------------------------------------------------------------------------------- /src/resources/earlybirdBlowout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/earlybirdBlowout.png -------------------------------------------------------------------------------- /src/resources/earlybirdMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/earlybirdMap.png -------------------------------------------------------------------------------- /src/resources/earlybirdOverlayMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/earlybirdOverlayMap.png -------------------------------------------------------------------------------- /src/resources/edgeBurn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/edgeBurn.png -------------------------------------------------------------------------------- /src/resources/hefeGradientMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hefeGradientMap.png -------------------------------------------------------------------------------- /src/resources/hefeMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hefeMap.png -------------------------------------------------------------------------------- /src/resources/hefeMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hefeMetal.png -------------------------------------------------------------------------------- /src/resources/hefeSoftLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hefeSoftLight.png -------------------------------------------------------------------------------- /src/resources/hudsonBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hudsonBackground.png -------------------------------------------------------------------------------- /src/resources/hudsonMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/hudsonMap.png -------------------------------------------------------------------------------- /src/resources/inkwellMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/inkwellMap.png -------------------------------------------------------------------------------- /src/resources/kelvinMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/kelvinMap.png -------------------------------------------------------------------------------- /src/resources/lomoMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/lomoMap.png -------------------------------------------------------------------------------- /src/resources/nashvilleMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/nashvilleMap.png -------------------------------------------------------------------------------- /src/resources/overlayMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/overlayMap.png -------------------------------------------------------------------------------- /src/resources/riseMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/riseMap.png -------------------------------------------------------------------------------- /src/resources/sierraMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/sierraMap.png -------------------------------------------------------------------------------- /src/resources/sierraVignette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/sierraVignette.png -------------------------------------------------------------------------------- /src/resources/softLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/softLight.png -------------------------------------------------------------------------------- /src/resources/sutroCurves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/sutroCurves.png -------------------------------------------------------------------------------- /src/resources/sutroEdgeBurn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/sutroEdgeBurn.png -------------------------------------------------------------------------------- /src/resources/sutroMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/sutroMetal.png -------------------------------------------------------------------------------- /src/resources/toasterColorShift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/toasterColorShift.png -------------------------------------------------------------------------------- /src/resources/toasterCurves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/toasterCurves.png -------------------------------------------------------------------------------- /src/resources/toasterMetal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/toasterMetal.png -------------------------------------------------------------------------------- /src/resources/toasterOverlayMapWarm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/toasterOverlayMapWarm.png -------------------------------------------------------------------------------- /src/resources/toasterSoftLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/toasterSoftLight.png -------------------------------------------------------------------------------- /src/resources/valenciaGradientMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/valenciaGradientMap.png -------------------------------------------------------------------------------- /src/resources/valenciaMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/valenciaMap.png -------------------------------------------------------------------------------- /src/resources/vignetteMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/vignetteMap.png -------------------------------------------------------------------------------- /src/resources/waldenMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/waldenMap.png -------------------------------------------------------------------------------- /src/resources/xproMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kelset/react-native-glshaders-testing/4920d6176d2614e08cdead901bda726190b747d2/src/resources/xproMap.png --------------------------------------------------------------------------------