卡通着色效果

一、简单介绍

虽然自己学的都比较浅，但是还是想通过文字来记录下。首先先介绍下卡通着色的效果，为什么要进行卡通着色，卡通着色的目的就是为了让被着色物体显得过渡的不要那么的好，明暗交界线很明显。卡通着色也叫做非真实渲染技术，利用卡通着色加上描黑边的效果就可以很好的做出一个动画的任务了，就比如说下面的一个喜羊羊的图片。颜色都很分明的。

卡通着色将一个一维纹理贴图作为查询表，使用纹理贴图中的纯色去填充几何图形。

二、具体实现

使用漫射光照强度也就是视觉空间表面法线和光线方向向量的点乘积，作为纹理坐标添加到一个包含逐渐变亮的颜色表的一维纹理中。漫射光点乘积的值是从没有强度的0.0到最高强度的1.0之间变化的。

顶点着色器程序如下所示

//传入的顶点
attribute vec4 vVertex;
//传入的法线
attribute vec3 vNormal;
//将要传入的纹理坐标也就是漫反射的强度
varying float textureCoordinate;
//光源位置
uniform vec3    vLightPosition;
//模型视图投影矩阵
uniform mat4    mvpMatrix;
//模型视图矩阵
uniform mat4    mvMatrix;
//法线矩阵
uniform mat3    normalMatrix;


void main()
{
   //首先先把法线转换成视觉坐标系下的
    vec3 vEyeNormal = normalMatrix*vNormal;
    
    //这里要先把顶点转换成视觉坐标下的顶点
    vec4 vPosition4 = mvMatrix * vVertex;
    
    //然后把拥有四个分量的顶点转换成三个顶点的分量
    vec3 vPosition3 = vPosition4.xyz/vPosition4.w;
    
    //然后就是计算经过顶点的光源向量
    vec3 vLightDir = normalize(vLightPosition-vPosition3);
    
    //计算漫反射强度
    textureCoordinate = max(0.0,dot(vEyeNormal,vLightDir));
   
    //最后模型视图矩阵和顶点相乘
    gl_Position = mvpMatrix*vVertex;
  
}

片元着色器代码

//首先需要一个采样器去采样纹理
uniform sampler1D colorMap;

//然后从顶点着色器中传入进来的数据
varying float textureCoordinate;

//然后我们需要一个变量来存储颜色
vec4 vFragColor;

void main()
{
    gl_FragColor = texture1D(colorMap,textureCoordinate);
    
}

效果如下所示，这里就是通过了diffuse的漫反射强度把物体变成了很明显的几个色阶