排序
WebGL-Shader入门（2.着色器语言GLSL ES矢量和矩阵的访问与运算）
矢量类型和矩阵类型变量的访问与运算 1. 序2. 矢量的访问2.1 单一分量访问2.2 分量组合使用2.3 分量聚合作为左值使用 3. 矩阵的访问4. 矢量与矩阵支持的运算符5. 矢量与矩阵的运算5.1 矢量和数...
点燃火柴
WebGL入门(四十二)-使用（FBO）实现阴影效果
使用（FBO）实现阴影效果 1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除 3. demo代码 1. demo效果 2. 相关知识点 ...
点燃火柴
WebGL入门(三十)-利用层次模型实现机械臂模拟动画
利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图，实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
点燃火柴
shader编程-RayMarching与SDF结合开始三维探索（WebGL-Shader开发基础07）
RayMarching与SDF结合开始三维探索 1. 初识RayMarching2. 实现过程2.1 光线步进函数2.2 获取物体表面距离2.3 计算光照阴影2.4 物体表面距离计算 3 demo运行结果4 demo代码 1. 初识RayMarching ...
点燃火柴
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
点燃火柴
WebGL入门(十一)-通过矩阵实现图形(三角形)的动画
通过矩阵相现图形的动画 1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码 1.动画效果展示 第一个动画效果，是在动画处理函数中不断旋转的效果 第二个动画效果，是复合变换动...
点燃火柴
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影...
点燃火柴
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效果 如上图，在三维场景中叠...
点燃火柴
WebGL三维模型实现Phong着色（WebGL进阶05）
WebGL三维模型实现Phong着色 1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色 3. 实现要点4. demo代码 1. demo效果 2. Phong着色与Gouraud 着色 通过前面几篇文章，...
点燃火柴
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现 1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值 4. demo代码 1. demo效果 2. 反射光介绍 反射光分为漫反射和镜面反射，平行光属于慢反射。...
点燃火柴
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
着色器语言的限定词 1. 序2 参数限定词3 存储限定词4 精度限定词 1. 序 GLSL ES 中提供了三类限定词(又称限定字或限定符，都是一回事，本文统称为限定词)，参数限定词、存储...
点燃火柴
使用shader绘制线、线段、曲线（WebGL-Shader开发基础01）
使用shader绘制线、线段、曲线 0.序1. 绘制线1.1 绘制水平线1.1.1 根据判断条件着色绘制1.1.2 使用step函数绘制1.1.3 使用smoothstep函数绘制 1.2 绘制垂直线1.3绘制斜线1.3.1使用step函数绘制1...
点燃火柴
