使用threejs实现辉光&大气层效果

        最近想使用threejs实现辉光的特效，在查阅了一些资料之后，不仅实现了辉光的特效，还顺带实现了大气层特效，在写着色器的过程中有了一些理解~

        首要目标：为了实现辉光的着色器，我们把辉光分为几个步骤来实现：

        1.创建两个球体，一个作为原始物体，一个略大一些作为它的辉光。

        2.作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）

        3.将覆盖原始物体的部分丢弃掉

        有了这3点步骤，做起来就会容易很多，这里我着重介绍一下着色器的部分：

        首先是片元着色器

'varying vec3   vVertexWorldPosition;',
'varying vec3  vVertexNormal;',

'varying vec4  vFragColor;',

'void main(){',
'  vVertexNormal  = normalize(normalMatrix * normal);',//将法线转换到视图坐标系中

'  vVertexWorldPosition   = (modelMatrix * vec4(position, 1.0)).xyz;',//将顶点转换到世界坐标系中

'  // set gl_Position',
'  gl_Position    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
'}'

        这里做的事情比较简单，主要就是把法线转换到视图坐标系中和把顶点转换到世界坐标系中，因为在片元着色器中需要用到这两个参数，必须对他们进行一下转换，这里还要说一下的就是OpenGL用的是左乘，也就是顶点左乘矩阵，进行转换（对坐标系转换不熟悉的同学可以看一下我之前总结的文章：http://blog.csdn.net/srk19960903/article/details/77970630）。

        然后是辉光的片元着色器：

'uniform vec3   glowColor;',
'uniform float coeficient;',
'uniform float power;',

'varying vec3  vVertexNormal;',
'varying vec3  vVertexWorldPosition;',

'varying vec4  vFragColor;',

'void main(){',
'  vec3 worldVertexToCamera= cameraPosition - vVertexWorldPosition;', //世界坐标系中顶点位置到相机位置到的距离
'  vec3 viewCameraToVertex    = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;',//视图坐标系中
'  viewCameraToVertex = normalize(viewCameraToVertex);',//规一化
'  float intensity       = coeficient + dot(vVertexNormal, viewCameraToVertex);',
'  if(intensity > 0.55){ intensity = 0.0;}',
'  gl_FragColor      = vec4(glowColor, intensity);',

        这里首先得到了两个向量，一是顶点到相机的向量然后将其转换到视图坐标系中，在进行归一化。二是直接传过来的视图坐标系中的法向量，这时将两个向量进行点乘就可以获得它们夹角的cos值，从圆心到圆边这个角度依次增大，所以乘积依次减小，最后把这个值加上一个常量赋给最终片元的不透明度，从而实现辉光的效果。

        这里的难点主要在于两个：1.将顶点到相机的距离和法向量，统统转换到view坐标系中来计算。

                                                    2.两个向量的乘积所代表的意义，所夹角度的cos值，通过观察cos的函数图像我们可以看出他的变换规律，再根据规律写着色器。

大气层着色器

        既然我们会写从内向外透明度逐渐降低的着色器，那么从外向内透明度逐渐降低的呢~

        还记得在算点积的时候我们用的是那两个向量吗？顶点到摄像机&顶点向外的法向量，嗯，那么我们可以用从摄像机到顶点&顶点向外的法向量来重新算一次！这次由于角度开始就是大于180度的，从球心到球边，cos值从负值到正值进行变换，我们再用一个指数函数的形式来影响它的变换过程，就是这么简单，大气层的着色器就研究出来啦！

         'uniform vec3  glowColor;',
         'uniform float    coeficient;',
         'uniform float    power;',

         'varying vec3 vVertexNormal;',
         'varying vec3 vVertexWorldPosition;',

         'varying vec4 vFragColor;',

         'void main(){',
         ' vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;', //世界坐标系中从相机位置到顶点位置的距离
         ' vec3 viewCameraToVertex    = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',//视图坐标系中从相机位置到顶点位置的距离
         ' viewCameraToVertex = normalize(viewCameraToVertex);',//规一化
         ' float intensity       = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
         ' gl_FragColor      = vec4(glowColor, intensity);',
         '}'//vVertexNormal视图坐标系中点的法向量
//viewCameraToVertex视图坐标系中点到摄像机的距离向量
//dot点乘得到它们的夹角的cos值
//从中心向外面角度越来越小（从钝角到锐角）从cos函数也可以知道这个值由负变正，不透明度最终从低到高

效果如图：

Github:https://github.com/StringKun/ThreeJSGlow-Atmosphere