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)
我想实现该示例以及图像中的一些贴纸。
如何在其中添加叠加图像(如贴纸)?甚至覆盖文字。关于它的任何想法如何做到这一点?
归档时间: |
|
查看次数: |
328 次 |
最近记录: |