光照计算

顶点着色器

业务

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

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

示例代码

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() ,<a>tanh ()	双曲正弦，双曲余弦，双曲正切(以及相应的反函数)
length()	向量长度
distance ()	两个向量的距离
dot ()，cross ()	数乘，叉乘
matrixCompMult ()	矩阵对应元素分别相乘
transpose(), determinant() , inverse ()	矩阵的转置，行列式，逆
lessThan(), greaterThan() , equal ()	小于，大于，等于(对实参向量对应位置的每个分量做大小比较，生成布尔向量)