WebGL-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）

1. 内置变量

前面的文章中，在着色器程序中你一定会发现有 gl_Position和gl_FragColor 变量，但并没有声明，它们就是WebGL着色器提供的内置变量，WebGL提供了很多内置变量，先来简单列举一下常用内置变量：

1.1 gl_PointSize

内置变量 gl_PointSiz 表示绘制模式为gl.POINTS时，绘制的点的大小。换而言之就是调用gl.drawArrays()绘制图形时的绘制模式是点模式gl.POINTS的时候，才会用到内置变量gl_PointSize。
看一下示例程序是如何使用内置变量gl_PointSize设置绘制的点的大小

//顶点着色器
var VSHADER_SOURCE = '' +
  'void main(){\n' +
  //设置顶点位置(坐标原点)
  '  gl_Position =vec4(0.0,0.0,0.0,1.0);\n' +
  //设置点的大小(20px)
  '  gl_PointSize=20.0;\n' +
  '}\n';

//片元着色器
var FSHADER_SOURCE = '' +
  'void main(){\n' +
  //设置片元颜色(红色)
  ' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
  '}\n';

...
//开始绘制，绘制顶点，从第一个顶点开始绘制，绘制一个顶点
gl.drawArrays(gl.POINTS, 0, 1);

1.2 gl_Position

gl_Position变量表示在逐顶点处理时，当前顶点的坐标，通常在JavaScript程序中会传入一系列的顶点，在顶点着色器中将每个处理完的顶点存放在该gl_Position变量中供片元着色器使用，通过下面这个例子来了解gl_Position如何使用

var VSHADER_SOURCE = '' +
  'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息
  'attribute vec4 a_Color;\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
  'uniform mat4 u_MvpMatrix;\n' + //声明uniform变量u_MvpMatrix，用来存放模型视图投影组合矩阵
  'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息
  'void main(){\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
  '  v_Color = a_Color;\n' + //将顶点颜色信息传给片元着色器，
  '}\n';

1.3 gl_FragColor

gl_FragColor逐片元处理时，当前片元的颜色，通常会在片元着色器中使用，WebGL绘制图形时，经过光栅化处理得到一个个的片元，这时在片元着色器中可以对这些片元逐个处理，处理完成后写入颜色缓冲区供WegGL输出到屏幕上，来看一个逐片元处理漫反射和环境光的例子加深一下理解

//片元着色器
var FSHADER_SOURCE = '' +
  '#ifdef GL_ES\n' +
  ' precision mediump float;\n' + // 设置精度
  '#endif\n' +
  'uniform vec3 u_PointLightColor;\n' + //声明uniform变量u_PointLightColor，用来存放点光源颜色
  'uniform vec3 u_PointLightPosition;\n' + //声明uniform变量u_PointLightPosition，用来存放点光源位置
  'uniform vec3 u_AmbientLightColor;\n' + //声明uniform变量u_AmbientLightColor，用来存放环境光颜色
  'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
  'varying vec3 v_Normal;\n' + //声明varying变量v_Normal，用来接收顶点着色器传送的顶点法向量
  'varying vec3 v_Position;\n' + //声明varying变量v_Position，用来接收顶点着色器传送的顶点坐标
  'void main(){\n' +
  '  vec3 normal = normalize(v_Normal);\n' + //对法线进行归一化处理，因为内插后长度不一定是1.0
  '  vec3 lightDirection = normalize(u_PointLightPosition - v_Position);\n' + //计算点光源照射物体表面的光线方向，并归一化
  '  float nDotL = max(dot(lightDirec