WebGL-Shader入门（1.着色器语言GLSL ES数据类型介绍与使用）
GLSL ES数据类型介绍与使用 1. GLSL ES介绍2. 变量定义3. 变量类型3.1 基本类型3.1.1 基本类型的介绍3.1.2 基本类型的赋值和类型转换 3.2 矢量3.2.1 矢量类型介绍3.2.2 矢量构造和赋值 3.3 矩阵...
WebGL-Shader入门（2.着色器语言GLSL ES矢量和矩阵的访问与运算）
矢量类型和矩阵类型变量的访问与运算 1. 序2. 矢量的访问2.1 单一分量访问2.2 分量组合使用2.3 分量聚合作为左值使用 3. 矩阵的访问4. 矢量与矩阵支持的运算符5. 矢量与矩阵的运算5.1 矢量和数...
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
着色器语言的限定词 1. 序2 参数限定词3 存储限定词4 精度限定词 1. 序 GLSL ES 中提供了三类限定词(又称限定字或限定符，都是一回事，本文统称为限定词)，参数限定词、存储...
WebGL-Shader入门（4.着色器语言GLSL ES函数定义与流程控制）
函数定义与流程控制 1. 函数定义1.1 函数结构1.2 规范声明 2 流程控制2.1 if语句2.2 for语句2.3 continue、break语句2.4 discard语句 1. 函数定义 1.1 函数结构 GLSL ES 的函数定义与C语言接近&...
WebGL-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）
GLSL ES 内置变量和内置函数 1. 内置变量1.1 gl_PointSize1.2 gl_Position1.3 gl_FragColor1.4 gl_FragCoord1.5 gl_PointCoord 2. 内置函数2.1 通用函数2.2 角度和三角函数2.3 指数函数2.4 几何...
WebGL-Shader入门（6.着色器语言GLSL ES 预处理指令和宏定义）
GLSL ES 预处理指令宏定义 1. 预处理指令1.1 `#if`1.2 `#ifdef`1.3 `#ifndef` 2. 宏定义 1. 预处理指令 预处理指令用来在着色器程序真正编译之前对代码进行预处...
使用VBO、IBO创建彩色甜圈圈（WebGL进阶01）
使用VBO、IBO创建彩色甜圈圈 1. demo效果2. 实现要点2.1 初始化顶点信息2.2 向着色器传值2.3 注册鼠标拖拽事件 3. demo代码 1. demo效果 2. 实现要点 2.1 初始化顶点信息 如上图绘制甜圈圈的思...
三维模型平行光照射实现（WebGL进阶02）
三维模型平行光照射实现 1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理 3. 实现要点3.1 顶点着色器3.2 相关矩阵计算 4. demo代码 1. demo效果 上图是平行光照射下效果 上图...
三维模型环境光照射实现（WebGL进阶03）
三维模型环境光照射实现 1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色 4. demo代码 1. demo效果 上图是平行光照射下效果 上图是平行光+环境光照射...
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现 1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值 4. demo代码 1. demo效果 2. 反射光介绍 反射光分为漫反射和镜面反射，平行光属于慢反射。...
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使用点光源照明（WebGL进阶06）
使用点光源照明 1. demo效果2. 点光源介绍3. 实现要点3.1 片元着色器中计算点光源3.2 准备绘制物体的数据3.3 绘制物体 4. demo代码 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源...