OpenGL ES GLSL滤镜实现(2)
01
—
原图GLSL 实现
顶点着色器代码:
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}片元着色器代码
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
02
—
黑白滤镜
黑白滤镜顶点着色器代码:
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
黑白滤镜片元着色器代码
思路:
1. 获取原始图片纹素颜色值
2. 将rgb通道的颜色相加再除以3，再作为rgb通道的值
3.将计算所得颜色值赋值给内建变量gl_FragColor
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture,TextureCoordsVarying);
float color = (mask.r + mask.g + mask.b) /3.0;
vec4 tempColor =vec4(color,color,color,1.0);
gl_FragColor = tempColor;
}
03
—
暖色滤镜
暖色滤镜顶点着色器代码:
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
暖色滤镜片元着色器代码
思路:
1. 获取原始图片纹素颜色值
2. 将rgb通道的颜色添加相应的红色/绿色值，再作为rgb通道的值
3.将计算所得颜色值赋值给内建变量gl_FragColor
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture,TextureCoordsVarying);
gl_FragColor= mask + vec4(0.2, 0.2, 0.0, 0.0);
}04
—
冷色滤镜
冷色滤镜顶点着色器代码:
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
冷色滤镜片元着色器代码
思路:
1. 获取原始图片纹素颜色值
2. 将rgb通道的颜色添加相应的蓝色值，再作为rgb通道的值
3.将计算所得颜色值赋值给内建变量gl_FragColor
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture,TextureCoordsVarying);
gl_FragColor= mask + vec4(0.0, 0.0, 0.3, 0.0);
}著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-06-25，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 HelloCode开发者学习平台 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
