gl-react和gl-react-native多个图像(如贴纸)

Gre*_*gle 5 glsl reactjs react-native

我查看gl-react了我的应用程序的示例项目,并实现了此代码,效果很好。

import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;
uniform float contrast, saturation, brightness;
const vec3 L = vec3(0.2125, 0.7154, 0.0721);
void main() {
  vec4 c = texture2D(t, uv);
    vec3 brt = c.rgb * brightness;
    gl_FragColor = vec4(mix(
    vec3(0.5),
    mix(vec3(dot(brt, L)), brt, saturation),
    contrast), c.a);
}
`
  }
});

export const Saturate = ({ contrast, saturation, brightness, children }) =>
  <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />;

export default class Example extends Component {
  render() {
    return (
    <Surface width={480} height={300}>
      <Saturate {...this.props}>
        {{image: "https://i.imgur.com/uTP9Xfr.jpg"}}
        {/* Add overlay stickers or image */}
      </Saturate>
    </Surface>
    );
  }
  static defaultProps = {
    contrast: 1,
    saturation: 1,
    brightness: 1,
  };
}
Run Code Online (Sandbox Code Playgroud)

我想实现该示例以及图像中的一些贴纸。

如何在其中添加叠加图像(如贴纸)?甚至覆盖文字。关于它的任何想法如何做到这一点?