前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenGL ES GLSL滤镜实现(2)

OpenGL ES GLSL滤镜实现(2)

作者头像
CC老师
发布2019-07-30 15:31:58
9910
发布2019-07-30 15:31:58
举报
文章被收录于专栏:HelloCode开发者学习平台

01

原图GLSL 实现

顶点着色器代码:

代码语言:javascript
复制
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

片元着色器代码

代码语言:javascript
复制
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

黑白滤镜

黑白滤镜顶点着色器代码:

代码语言:javascript
复制
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

代码语言:javascript
复制
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

暖色滤镜

暖色滤镜顶点着色器代码:

代码语言:javascript
复制
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

暖色滤镜片元着色器代码

思路:

1. 获取原始图片纹素颜色值

2. 将rgb通道的颜色添加相应的红色/绿色值,再作为rgb通道的值

3.将计算所得颜色值赋值给内建变量gl_FragColor

代码语言:javascript
复制
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

冷色滤镜

冷色滤镜顶点着色器代码:

代码语言:javascript
复制
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

冷色滤镜片元着色器代码

思路:

1. 获取原始图片纹素颜色值

2. 将rgb通道的颜色添加相应的蓝色值,再作为rgb通道的值

3.将计算所得颜色值赋值给内建变量gl_FragColor

代码语言:javascript
复制
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 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档