Layer.js 719 Bytes
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const React = require("react-native");
const GL = require("gl-react-native");

const shaders = GL.Shaders.create({
  layer: {
    frag: `
precision highp float;

varying vec2 uv;
uniform sampler2D t1;
uniform sampler2D t2;

void main () {
  vec4 c1 = texture2D(t1, uv);
  vec4 c2 = texture2D(t2, uv);
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
16
  gl_FragColor = vec4(mix(c1.rgb, c2.rgb, c2.a), c1.a + c2.a);
17 18 19 20 21
}
`
  }
});

22 23
module.exports = GL.createComponent(
  ({ children, ...rest }) => {
24 25 26
    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
    const [t1, t2] = children;
    return <GL.View
Gaëtan Renaudeau's avatar
Gaëtan Renaudeau committed
27
      {...rest}
28 29 30
      shader={shaders.layer}
      uniforms={{ t1, t2 }}
    />;
31 32 33
  },
  {
    displayName: "Layer"
34
  }
35
);