WebGL-片元着色器 2.灰度图实现

首发于talkingcoder https://www.talkingcoder.com/article/6372120137297765439

 编辑文章

灰度图

老规矩第一步上 demo 

demo下载地址

灰度图定义

首先我们看看什么叫做灰度图。可能大家会混淆一些东西，比如我们以前的黑白电视机，实际上不是黑白的，而是有灰度的。

灰度图：

灰度图象 灰度图象是指每个像素的信息由一个量化的灰度级来描述的图象，没有彩色信息。通常256个灰度级，用一个字节28比特表示。意思就是说，RGB都是一样的。

黑白图：

黑白图象 是指图象的每个像素只能是黑或白，没有中间的过渡，故又称为２值图象。2 值图像的像素值为0、1

这个才是灰度图，这个是黑白图 

灰度图应用：

图像灰度化处理可以作为图像处理的预处理步骤，为之后的图像分割、图像识别、图像增强、图像分析等上层操作做准备。 用来收集图像信息，主要用作其他操作的预操作。 和原彩色图像相比，灰度图不含色彩信息，仅具有亮度信息，其所含信息量大幅度降低，提高了后续图像处理的速度，并有助于图像特征提取时的梯度计算。因此在天文物理领域中的卫星图像、航空照片、地球观测数据等图像，以及医学领域中的CT影片等图像均采用灰度图。

灰度图实现：

从前端实现角度来看，上面说了这么多，“除了RGB都是一样的”有用其他的都是扯淡。

那么我们现在来理解一下这一句没扯淡的话到底是什么意思。 RGB都一样是什么东西？ 为什么都一样是灰色的？ 怎么做到RGB都一样？

 回答好了这几个问题差不多我们也知道怎么实现了。 首先大家都知道RGB都一样的两种极端情况就是黑和白。在中间的各种RGB相同的情况就是这个灰色，一下回答了两个问题。 第三个问题怎么做到RGB一样，这个就太简单了。

 各种方式，假设颜色为color = vec3(r,g,b)比如将RGB相加取平均值grey = vec3((r+g+b)/3,(r+g+b)/3,(r+g+b)/3)。或者用一个固定的和为1的向量vec3(x,y,z)乘以颜色向量，其中x+y+z =1，这个叫做RGB颜色和YUV颜色空间的转换，其中Y代表亮度Y = xr+yg+z*b。grey = vec3(y,y,y) 下面我们来看看具体实现。

1.获取颜色向量

2.计算灰度值

3.输出灰度颜色

// 获取纹理的颜色
vec4 color = texture2D( texture2, vUv * 1.0 );

//将颜色传递给webgl着色器
vec3 irgb = color.rgb;

// 使用和为1的参数，实现YUV方式的灰度图
vec3 factor = vec3(0.3, 0.3, 0.4);

// 点乘计算灰度值
float lumia = dot(factor,irgb);

//输出回灰度颜色
gl_FragColor = vec4(lumia,lumia,lumia,1.0);

文章现在处于试发布阶段，由于自己很久没写文章，思维逻辑难免出现难以贴近读者的情况，而且也很难以初学者思考的角度去写文章，有难以理解的地方，欢迎大家直接加群151269709反馈问题，thanks。

之所以写这篇简单的文章，是有读者反映直接讲高斯模糊跨度太大的原因，所以先写这篇文章平稳过渡下