前面一段时间写了三篇关于webgl入门的文章，先是讲了下计算机图形学简介，再是成像原理，以及几何对象和坐标变换，感觉自己讲的不好，讲的不够入门。所以暂时组织一下文章节奏，比如几何对象和坐标转换完全可以拆分下。成像原理完全可以讲一下着色器。
在这个调整的间隙我正在做webgl片元着色器编程，正好记录下来，就当做提前记录下高级技能的学习过程。
因为片元着色器处理的是片元--未来的图像像素--所以片元着色器很大部分的编程技能来源于数字图像处理。正好现在处于整理webgl博客期间，所以有了现在的webgl入门到转行。
一直以来图形图像编程有有一个很强大的功能，直接使用shader编程操作显卡，今天我们就讲讲shader编程里面的数字图像处理技术，今天第0讲讲的就是搭建环境，如何使用three搭建一个webgl的shader编程的环境。其实我是使用webgl里面的一个demo做了少许的更改。
<script id="vertexShaderprocess" type="x-shader/x-vertex">
//传递到片元着色器的变量，后续demo使用，这里无视
uniform vec2 uvScale;
//从纹理着色器传递到片元着色器的纹理坐标
varying vec2 vUv;
//片元着色器的入口函数
void main()
{
//纹理坐标乘以的倍数，在初始化环境我们是1，这是为后续其他demo准备的，暂时无视
vUv = uvScale * uv;
//模型视图矩阵传递给webgl系统，可以暂时无视。
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShaderprocess" type="x-shader/x-fragment">
//传递到片元着色器的时间参数，准备给后续demo的，暂时无视
uniform float time;
//屏幕的坐标分别表示xy轴
uniform vec2 resolution;
//以下两个是传递到片元着色器的雾参数
uniform float fogDensity;
uniform vec3 fogColor;
//传递到片元着色器的噪声纹理
uniform sampler2D texturenoise;
//传递到片元着色器的纹理
uniform sampler2D texture2;
//从顶点着色器传递到片元着色器的纹理坐标
varying vec2 vUv;
void main( void ) {
// 获取噪声纹理
vec4 noise = texture2D( texturenoise, vUv );
// 获取纹理的颜色
vec4 color = texture2D( texture2, vUv * 1.0 );
//将颜色传递给webgl着色器
gl_FragColor = color;
//gl_FragColor = color/(length(1.0-vUv*2.0));
}
</script>
上面两个script标签里面的代码就是着色器，前面的是顶点着色器，后面的是片元着色器。以后的主要编程都是在片元着色器。为了以后方便对比，所以我建了两张图的着色器，一个是未经过任何处理的图片，另外一个是经过处理的图片。
截止到目前为止我们所有的工作都完成了，看看demo的话就是两张一模一样的图片。以后我们就会在有一张图片做图片处理。但是这样结束未免太无趣了，所以在片元着色器的最后被注释的那一句是给大家的彩蛋。大家可以下载demo把最后一句去掉，看看效果。最后一句的意义就是将纹理坐标系的xy从0~1映射到-1~1，中心点是图片的中心然后取图片各个点到中心的距离。然后将这个图片的颜色除以距离，然后因为离中心点越近，距离越小，所以颜色值越大，颜色就越亮。所以出现了一个以图片中心点为中心的光晕。
或者下载下来在服务器看看
著作权归作者Chaos所有 文章发表于2016年09月26日
