OpenGL实现图片边缘暗角效果(1)

在进行VR视频播放开发的时候，看到如下一段opengl代码，一开始不知道为什么这样做，会产生什么效果。

首先是创建了一个纹理，该纹理除了边缘为半透明(58/255=0.23)外其它像素都是1：

void createVigTex() {static const int scale = 6;static const int width = 16 * scale;static const int height = 9 * scale;unsigned char buffer[width * height];memset(buffer, 255, sizeof(buffer));for ( int i = 0; i < width; i++ ){buffer[i] = 58;buffer[width*height - 1 - i] = 58;}for ( int i = 0; i < height; i++ ){buffer[i * width] = 58;buffer[i * width + width - 1] = 58;}CreateTexture2D(mTexVig, GL_LUMINANCE, GL_LUMINANCE, width, height, buffer);}

然后使用如下fragment shader来绘制视频：

const char* vigTexFragShader ="uniform sampler2D sampler0;\n"             // video"uniform sampler2D sampler1;\n"             // edge vignette"uniform vec2 resolution;\n""varying vec2 oTexCoord;\n""void main()\n""{\n""   gl_FragColor = texture2D( sampler0, oTexCoord ) *  texture2D( sampler1, oTexCoord );\n""}\n";

最后的效果大致如下，原来就是在图像的边缘出现了一圈阴影，这样可以让视频画面与周围的场景过渡自然，如果不加，则边缘会很尖锐。熟悉opengl的人也大概能明白其中的原理，在绘制时，遮罩纹理sample1的边缘会进行线性插值，值的范围就会变成从0.23~1.0，再与视频图像相乘，就会出现如图这样的渐变阴影效果了。

搜索了一下vignette这个单词，大概是暗角效果的意思，百度百科上有解释：

[暗角一词属于摄影术语。对着亮度均匀景物，画面四角有变暗的现象，叫做“失光”，俗称“暗角”。]

Photoshop上也是有专门的技巧来产生这种效果的：

这不就是遮罩效果吗？在射击游戏中，经常出现的狙击镜效果，跟这个也有点类似，只是边缘是圆形的：

使用上面的shader代码同样能实现这种效果，只需要把纹理替换成一个圆形遮罩的图像就可以了。当然，用不同形状的遮罩纹理就能实现不同的遮罩效果，这种方法具有很大的灵活性。

OpenGL实现图片边缘暗角效果(1)相关推荐

word图片靠右_如何设置word图片边缘透明
我们在用WORD写文档的时候也通常会想法设法把文档做的漂漂亮亮的,比如说好好的排个版面,插入个图片什么的,可是插入的图片边缘颜色太明显,该怎么办呢?下面学习啦给大家分享word设置图片边缘透明的技巧, ...
Android:自定义滚动边缘(EdgeEffect)效果
Android可滚动控件(GridView.ListView.ScrollView等)当用户滚动到头的时候会有个边缘反馈效果,在4.0上默认为Holo蓝色效果. 如果您的App自定义了主题颜色,比如G ...
php 图片处理羽化,PS羽化图片边缘方法
为了让处理的图片更美观,我们抠图之后都会进行边缘的羽化,这样能让图片更好的嵌入另一张图片.那么用PS如何羽化图片边缘?下面小编就为大家详细介绍一下,来看看吧! 步骤 1.打开PS 2.打开准备好的图片 ...
音视频之opengl渲染图片
音视频之opengl绘制三角形音视频之opengl渲染图片音视频之渲染yuv图片首先来看看渲染效果我们先来看看关于纹理的坐标: 他是如下图: 顶点着色器代码:texture_vertext_s ...
html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果
某些时候你可能需要让图片四周带有边缘模糊效果,那么除了PS之外有没有简单的代码实现方法呢?今天我们就使用CSS3的新特性实现图片边缘的模糊效果,首先你需要在图片标签外部套一层DIV标签,其次再为外层D ...
Unity Shader-边缘检测效果（基于颜色，基于深度法线，边缘流光效果，转场效果）
前言周末通关了一个小游戏,流程很短,6个小时左右就通关,但是游戏的画风,视角,玩法都比较新奇,对了,游戏的名字也很奇特<12 Is Better Than 6>(12比6好是有什么梗吗? ...
Asp.net(C#)给图片加上水印效果(转自园上的Seven Eleven)
Asp.net(C#)给图片加上水印效果 private void Btn_Upload_Click(object sender, System.EventArgs e) { ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...

OpenGL实现图片边缘暗角效果(1)

OpenGL实现图片边缘暗角效果(1)相关推荐

最新文章

热门文章