光照计算

顶点着色器

业务

矩阵变换位置
计算光照公式生成逐顶点颜色
生成/变换纹理坐标

总结：用于执行自定义计算，实施新的变换，照明或者传统的固定功能所不允许的基于顶点的效果。

示例代码

attribute vec4 position;
attribute vec2 textCoordinate;

uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

void main() {
    varyTextCoord = textCoordinate;
    vec4 vPos = position;
    vPos = vPos * rotateMatrix;
    gl_Position = vPos;
}

内建特殊变量

gl_VertexID
gl_InstanceID
gl_Position
gl_PointSize
gl_FrontFacing

内建uniform

struct gl_DepthRangeParameters {
    highp float near; //near z
    highp float far; //near far
    highp float diff; //far - near
}

uniform gl_DepthRangeParameters gl_DepthRange;

内建常量

const mediump int gl_MaxVertexAttribs = 16;
const mediump int gl_MaxVertexUniformVectors = 256;
const mediump int gl_MaxVertexOutputVectors = 16;
const mediump int gl_MaxVertexTexturelmageUnits = 16;
const mediump int gl_MaxCombinedTexturelmageUnits = 32;

矩阵变换

MVP(模型->视图->投影)矩阵变换

片元着色器

业务:

计算颜色
获取纹理值
往像素点中填充颜色值[纹理值/颜色值];

总结:它可以用于图片/视频/图形中每个像素的颜色填充，比如给视频添加滤镜，实际上就是将视频中每个图片的像素点颜色填充进行修改

示例代码

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

内建特殊变量

gl_FragCoord
gl_FrontFacing
gl_PointCoord
gl_FragDepth

内建常量

const mediump int gl_MaxFragmentInputVectors = 15;
const mediump int gl_MaxTextureImageUnits = 16 ;
const mediump int gl_MaxFragmentUniformVectors = 224;
const mediump int gl_MaxDrawBuffers = 4;

多个纹理单元渲染【服务端】

attribute vec2 v_texCoord;

uniform sampler2D s_baseMap;
uniform sampler2D s_SecondMap;

void main() {
    vec4 baseColor;
    vec4 s_SecondColor;
    baseColor = texture(s_baseMap, v_texCoord) ;
    secondColor = texture(s_SecondMap, v_texCoord) ;
    gl_FragColor = baseColor * secondColor;
]

多个纹理单元渲染【客户端】

/ /客户端代码:将各个纹理对象绑定到纹理单元0和1 ,为采样器设置数值,将采集器绑定到对应的纹理单元
glActiveTexutre ( GL_TEXTUREO ) ;
glBindTeture( GL_TEXTURE_2D , baseMapTexId) ;
glUniformli (baseMapTexId, 0) ;

glActiveTexutre (GL_TEXTURE1) ;
glBindTeture (GL_TEXTURE_2D， secondMapTexId) ;
glUniformli ( secondMapTexId,1);

内建函数

常用内建函数	说明
dot :	点乘
cross :	叉乘
texture2D :	用于对纹理采样
normalize :	对一个向量规格化
clamp :	将一个向量固定在一个最小值和最大值之间
pow ()	幂函数(对矢量和标量同样有效，下同)
exp(), log()	指数函数，对数函数
abs ()	绝对值
sqrt()	平方根
max(), min()	最值
ceil()，floor ()	取大于实参的最小整数，取小于实参的最大整数
sin(), cos(), tan()	三角函数
asin(), acos(), atan()	反三角函数
sinh(), cosh() ,tanh ()	双曲正弦，双曲余弦，双曲正切(以及相应的反函数)
length()	向量长度
distance ()	两个向量的距离
dot ()，cross ()	数乘，叉乘
matrixCompMult ()	矩阵对应元素分别相乘
transpose(), determinant() , inverse ()	矩阵的转置，行列式，逆
lessThan(), greaterThan() , equal ()	小于，大于，等于(对实参向量对应位置的每个分量做大小比较，生成布尔向量)