This blog is a bit outdated, and uses gl-react-native 1.3. I highly recommend checking out https://github.com/gre/gl-react-image-effects which was inspired by this post and uses gl-react-native 2.*!
Instagram is a fantastic app and a great concept to model after for learning fragment shaders. We won’t get too deep into fragment shaders but I’ll take a little bit about what they are and point you to some resources.
There are some fantastic resources on basic concepts of fragment shaders, check them out below. Much of the fragment shader code we’ll write is taken from there and or slightly modified! I am not an expert on this stuff, I’m just playing around.
- GL React documentation: https://projectseptemberinc.gitbooks.io/gl-react/content/
- Great explanation of fragment shader effects: https://github.com/yulu/GLtext
- Some Instagram fragment shader pre-sets: https://github.com/yulu/Instagram_Filter/tree/master/res/raw
- More Instagram pre-sets however they’re in CSS: http://una.im/CSSgram/
What are we building