排序
WebGL入门-WebGL常用API说明详解
WebGL常用API说明 1.设置背景色 gl.clearColor()2.清空绘图区 gl.clear()3.绘制操作 gl.drawArrays()4. attribute变量4.1 获取attribute变量地址 gl.getAttribLocation()4.2 给attribute变量传...
2年前
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体
通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
2年前
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动
通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上，通过上下左右键调整视图矩阵的...
2年前
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
2年前
WebGL入门(四十三)-WebGL加载OBJ-MTL三维模型
WebGL加载OBJ-MTL三维模型 1. demo效果2. 相关知识点2.1 OBJ文件内容说明2.2 解析OBJ文件过程2.3 MTL文件内容说明2.4 准备绘图需要的缓冲区对象2.4 加载完成数据写入缓冲区对象 3. demo代码 1. ...
2年前
WebGL入门(四十二)-使用（FBO）实现阴影效果
使用（FBO）实现阴影效果 1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除 3. demo代码 1. demo效果 2. 相关知识点 ...
2年前
WebGL入门(三十)-利用层次模型实现机械臂模拟动画
利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图，实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
2年前
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
2年前
WebGL入门(十一)-通过矩阵实现图形(三角形)的动画
通过矩阵相现图形的动画 1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码 1.动画效果展示 第一个动画效果，是在动画处理函数中不断旋转的效果 第二个动画效果，是复合变换动...
2年前
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
2年前
WebGL入门(三十六)-HUD（平视显示器）实现
HUD（平视显示器）实现 1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息 3.demo代码 1. demo效果 如上图，在三维场景中叠...
2年前
WebGL入门(三十八)-绘制透明三维物体，通过α混合绘制透明三角形
通过α混合绘制透明三角形 1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc() 3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混...
2年前