WebGL入门

WebGL入门(三十)-利用层次模型实现机械臂模拟动画-卡核

WebGL入门(三十)-利用层次模型实现机械臂模拟动画

利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图,实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
点燃火柴的头像-卡核点燃火柴
8775668
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失-卡核

WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失

三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上,通过上下键调整正投影矩阵参数far的值,通过左右键调整正投影...
点燃火柴的头像-卡核点燃火柴
7860557
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体-卡核

WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体

通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
点燃火柴的头像-卡核点燃火柴
7362751
WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转-卡核

WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转

通过旋转矩阵实现图形的旋转 1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值 4.demo代码 1.旋转效果...
点燃火柴的头像-卡核点燃火柴
450558
WebGL入门(二十九)-逐片元处理点光源光照效果-卡核

WebGL入门(二十九)-逐片元处理点光源光照效果

逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图,图二为逐片元处理点光源的效果,与...
点燃火柴的头像-卡核点燃火柴
5751786
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动-卡核

WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动

通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上,通过上下左右键调整视图矩阵的...
点燃火柴的头像-卡核点燃火柴
8774737
WebGL入门(三十九)-透明与不透明物体共存,绘制透明面和不透明面的立方体-卡核

WebGL入门(三十九)-透明与不透明物体共存,绘制透明面和不透明面的立方体

绘制透明面和不透明面的立方体 1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后 2. 透明与不透明共存2.1 透明与不透明共存...
点燃火柴的头像-卡核点燃火柴
5074911
WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移-卡核

WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移

通过平移矩阵实现图形的平移 1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值 4.demo代码 1.平...
点燃火柴的头像-卡核点燃火柴
4710244
WebGL入门(二十八)-物体坐标变换时光照计算,立方体动画旋转时点光源计算处理-卡核

WebGL入门(二十八)-物体坐标变换时光照计算,立方体动画旋转时点光源计算处理

立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图,立方体旋转时点光源照射在指定的位置上的效果,照射...
点燃火柴的头像-卡核点燃火柴
8949393