GL-реагировать и GL-реагировать-родной нескольких изображений, таких как наклейки - PullRequest
0 голосов
/ 07 мая 2018

Я посмотрел пример проекта 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,
  };
}

Я хочу реализовать этот пример вместе с некоторыми наклейками на изображении.

Как добавить в это изображение оверлей, например стикер? Или даже наложение текста. Любая идея о том, как это сделать ??

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...