排序
WebGL入门(三十)-利用层次模型实现机械臂模拟动画
利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图，实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
2年前
WebGL入门(十一)-通过矩阵实现图形(三角形)的动画
通过矩阵相现图形的动画 1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码 1.动画效果展示 第一个动画效果，是在动画处理函数中不断旋转的效果 第二个动画效果，是复合变换动...
2年前
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
2年前
WebGL入门(三十八)-绘制透明三维物体，通过α混合绘制透明三角形
通过α混合绘制透明三角形 1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc() 3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混...
2年前
WebGL入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程
通过片元着色器内置变量gl_FragCoord验证内插过程 1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码 1.demo效果 如上图，这个demo实现一个紫色渐变效果的三角形，通过使...
2年前
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...
2年前
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
2年前
WebGL入门(二十五)-物体变换时光照处理、立方体平移旋转缩放变换时漫反射光照计算、逆转置矩阵
立方体平移旋转缩放时漫反射光照计算 1.demo效果2.相关知识点2.1 物体坐标变换法向量变化2.2 矩阵逆转置 3. demo代码4.后续 1.demo效果 如上，图一为变换前的效果，是贴的上一个dem...
2年前
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上，通过透视投影矩阵创建了左右两排三角形&...
2年前
WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放
通过缩放矩阵实现图形的缩放 1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
2年前
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体
通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
2年前
WebGL入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相...
2年前