先了解一个矩阵库twgl/m4
是一个4x4 矩阵数学转换函数的库
-
normalize(a, dst)
- 将一个向量除以它的欧几里得长度,归一化后返回
- 参数"a"是一个vec3(三维向量)
- 参数"dst"是用来接收结果的,如果不传,则创建一个新的
-
identity(dst)
- 创建一个n × n 的单位矩阵
- 参数"dst"是用来接收结果的,如果不传,则返回一个新的n × n 的单位矩阵
-
translate(m, v, dstopt)
- 将给定的 4×4 矩阵转换为给定的向量 v
- 返回已转换的矩阵
-
rotateX(m, angleInRadians, dstopt)
- 将给定的4 × 4矩阵绕x轴旋转给定的角度。
- rotateY(m, angleInRadians, dstopt)
- 将给定的4 × 4矩阵绕y轴旋转给定的角度。
-
perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dstopt)
- 在给定视锥体的角度高度、纵横比以及近剪裁平面和远剪裁平面的情况下,计算 4×4 透视转换矩阵。参数定义沿负 z 方向延伸的视锥体。给定的角度是平截体的垂直角度,水平角度确定以产生给定的纵横比。参数 near 和 far 是到 near 和 far 剪切平面的距离。请注意,near 和 far 不是 z 坐标,而是沿负 z 轴的距离
let texUnit = 6;
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
gl.uniform1i(diffuseLoc, texUnit);
texUnit = 3;
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, decalTexture);
gl.uniform1i(decalLoc, texUnit);
gl.uniform3fv(lightDirLoc, m4.normalize([1, 5, 8]));
const projection = m4.perspective(
60 * Math.PI / 180, // fov
gl.canvas.clientWidth / gl.canvas.clientHeight, // aspect
0.1, // near
10, // far
);
gl.uniformMatrix4fv(projectionLoc, false, projection);
// draw center cube
let modelView = m4.identity();
modelView = m4.translate(modelView, 0, 0, -4);
modelView = m4.xRotate(modelView, 0.5);
modelView = m4.yRotate(modelView, 0.5);
gl.uniformMatrix4fv(modelViewLoc, false, modelView);
gl.uniform4fv(diffuseMultLoc, [0.7, 1, 0.7, 1]);
gl.drawElements(
gl.TRIANGLES,
36, // num vertices to process
gl.UNSIGNED_SHORT, // type of indices
0, // offset on bytes to indices
);
// draw left cube
modelView = m4.identity();
modelView = m4.translate(modelView, -3, 0, -4);
modelView = m4.xRotate(modelView, 0.5);
modelView = m4.yRotate(modelView, 0.8);
gl.uniformMatrix4fv(modelViewLoc, false, modelView);
gl.uniform4fv(diffuseMultLoc, [1, 0.7, 0.7, 1]);
gl.drawElements(
gl.TRIANGLES,
36, // num vertices to process
gl.UNSIGNED_SHORT, // type of indices
0, // offset on bytes to indices
);
// draw right cube
modelView = m4.identity();
modelView = m4.translate(modelView, 3, 0, -4);
modelView = m4.xRotate(modelView, 0.6);
modelView = m4.yRotate(modelView, -0.6);
gl.uniformMatrix4fv(modelViewLoc, false, modelView);
gl.uniform4fv(diffuseMultLoc, [0.7, 0.7, 1, 1]);
gl.drawElements(
gl.TRIANGLES,
36, // num vertices to process
gl.UNSIGNED_SHORT, // type of indices
0, // offset on bytes to indices
);
设置纹理单元和绑定纹理
- let texUnit = 6; gl.activeTexture(gl.TEXTURE0 + texUnit);
- 定义一个纹理单元编号为 6。然后使用 activeTexture函数激活纹理单元 TEXTURE0
+
6,这表示后续对纹理的操作将针对这个特定的纹理单元进行
- 定义一个纹理单元编号为 6。然后使用 activeTexture函数激活纹理单元 TEXTURE0
- gl.bindTexture(gl.TEXTURE_2D, checkerTexture);
- 将之前创建的棋盘格纹理(checkerTexture)绑定到当前激活的纹理单元上
- gl.uniform1i(diffuseLoc, texUnit);
- 通过 diffuseLoc(之前获取的统一变量位置)设置片元着色器中的纹理采样器对应的纹理单元编号为 6。这样片元着色器就知道从哪个纹理单元获取基本颜色纹理。
设置光照方向
- gl.uniform3fv(lightDirLoc, m4.normalize([1, 5, 8]));
- 通过 lightDirLoc(之前获取的统一变量位置)设置片元着色器中的光照方向为经过归一化处理后的向量
[
1, 5, 8]
。这将影响片元着色器中的光照计算。
- 通过 lightDirLoc(之前获取的统一变量位置)设置片元着色器中的光照方向为经过归一化处理后的向量
设置投影矩阵
- const projection = m4.perspective(60 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 10);
- 创建一个透视投影矩阵。参数分别为视野角度(60 度转换为弧度)、画布的宽高比、近裁剪平面距离(0.1)和远裁剪平面距离(10)。
- gl.uniformMatrix4fv(projectionLoc, false, projection);
- 通过 projectionLoc(之前获取的统一变量位置)将创建的投影矩阵上传到顶点着色器中的 projection统一变量,用于将顶点从视图空间转换到裁剪空间
绘制立方体
- let modelView = m4.identity();
- 创建一个初始的模型视图矩阵为单位矩阵。
- modelView = m4.translate(modelView, 0, 0, -4);
- 对模型视图矩阵进行平移操作,将立方体沿 Z 轴负方向移动 -4 个单位,确定其在世界空间中的位置。
- modelView = m4.xRotate(modelView, 0.5) 和 modelView = m4.yRotate(modelView, 0.5);
- 分别绕 X 轴和 Y 轴旋转模型视图矩阵,旋转角度分别为 0.5。
- gl.uniformMatrix4fv(modelViewLoc, false, modelView)
- 通过 modelView(之前获取的统一变量位置)将更新后的模型视图矩阵上传到顶点着色器中的 modelView 统一变量,用于将顶点从模型空间转换到视图空间。
- gl.uniform4fv(diffuseMultLoc, [0.7, 1, 0.7, 1]);
- 设置片元着色器中的 diffuseMultLoc(基本颜色纹理缩放因子)为
[
0.7, 1, 0.7, 1]
,用于调整中心立方体的颜色。
- 设置片元着色器中的 diffuseMultLoc(基本颜色纹理缩放因子)为
- gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
- 使用索引缓冲中的数据绘制三角形,绘制模式为
gl.TRIANGLES
,处理 36 个顶点索引,索引数据类型为无符号短整型,偏移量为 0。这将绘制出中心的立方体
- 使用索引缓冲中的数据绘制三角形,绘制模式为
左边和右边立方体绘制也是同样的道理,左边立方体沿着X轴负方向移动了3个单位长度,右边立方体沿着X轴正方向移动了3个单位长度。
完结撒花!!!我们了解其渲染过程即可,更多是编辑顶点着色器和片元着色器的内容,对webgl封装较好的上层应用库有threejs和babylonjs。大家可自行尝试