miklosme/gl-react-color-blending

:art: Color blending for gl-react (Photoshop blend modes)

gl-react-color-blending

Color blending shaders for gl-react and gl-react-expo.

Implementations from jamieowen/glsl-blend.

Check out the example React Native app in the examples folder.

cd examples/color-blending && npm install && npm start

⚠️This is just a collection of shaders, and a gl-react Node component, don't expect an advance project. Before you start using it, check out the component in src/index.js, and make sure you understand what does this project can do for you.

Install

npm install gl-react gl-react-color-blending --save

Usage with gl-react-expo

import { Surface } from 'gl-react-expo';
import ColorBlending from 'gl-react-color-blending';

// ...

<Surface style={{ width: WINDOW_WIDTH, height: 300 }}>
    <ColorBlending
        color={[0.1, 0.9, 0.1, 1]}
        blendMode="blendAdd"
    >
      {{ uri: 'https://i.imgur.com/iPKTONG.jpg' }}
    </ColorBlending>
</Surface>

color: must be a array with the length of 4 (RGBA format). Values must be a real value between 0 and 1.

blendMode is a string, one of the followings:

1. blendAdd
2. blendAverage
3. blendColorBurn
4. blendColorDodge
5. blendDarken
6. blendDifference
7. blendExclusion
8. blendHardLight
9. blendHardMix
10. blendLighten
11. blendLinearBurn
12. blendLinearDodge
13. blendLinearLight
14. blendMultiply
15. blendNegation
16. blendNormal
17. blendOverlay
18. blendPhoenix
19. blendPinLight
20. blendReflect
21. blendScreen
22. blendSoftLight
23. blendSubstract
24. blendSubtract
25. blendVividLight

Other API

import ColorBlending, { blendNames, blendShaderCodes } from 'gl-react-color-blending';

blendNames: Every supported blend mode as an array of strings.

blendShaderCodes: Shader codes in plain text (glsl code). You can inject it to your own shader.

Licence

MIT