Question

我为我的应用程序查看了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,
  };
}

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

如何在此添加叠加图像贴纸？甚至叠加文字。有任何想法如何实现这一点??

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

0 个答案: