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...
WebGL入门(三十八)-绘制透明三维物体，通过α混合绘制透明三角形
通过α混合绘制透明三角形 1. demo效果2. 知识要点2.1 α混合2.2 α混合实现2.3 指定混合 gl.blendFunc() 3. demo代码 1. demo效果 如上图，绘制了前、中、后三个三角形，通过α混...
WebGL-Shader入门（6.着色器语言GLSL ES 预处理指令和宏定义）
GLSL ES 预处理指令宏定义 1. 预处理指令1.1 `#if`1.2 `#ifdef`1.3 `#ifndef` 2. 宏定义 1. 预处理指令 预处理指令用来在着色器程序真正编译之前对代码进行预处...