WebGL 编程指南

简介

此项目用来记录《WebGL 编程指南》的学习案例，采用了常用的技术栈如：Vue3、TypeScript、Vue-Router、Ant-Design-Vue、TWGL.js。

ps:本项目采用WebGL2技术进行案例实现,有些示例代码并不是很完美,后续会优化~

项目开发

# 克隆项目
git clone https://github.com/1225348331/WebGL-Examples.git

# 进入项目目录
cd WebGL-Examples

# 安装依赖(推荐使用yarn安装)
yarn install

# 启动服务
yarn run dev

章节列表

- WebGL入门
  - 绘制一个点
  - 通过鼠标点击绘制点
  - 改变点的颜色

- 绘制和变换三角形
  - 绘制多个点
  - 绘制三角形
  - 移动、旋转和缩放

- 高级变换和动画基础
  - 绕某点旋转
  - 动画效果

- 颜色和纹理
  - 彩色三角形
  - 单张图片贴图
  - 多张图片贴图

- 三维空间
  - 视图矩阵
  - 投影矩阵_正射矩阵
  - 投影矩阵_透视投影
  - MVP矩阵
  - 深度冲突
  - 绘制立方体

- 光照
  - 平行光
  - 平行光+环境光
  - 点光源光+环境光
  - 逐片元光照
  - 运动中物体的光照

- 其他效果
  - 扩散波纹
  - 绘制格点数据
  - 绘制圆点
  - 光带动画
  - 天气_雪
  - 鼠标控制物体旋转
  - 选中物体
  - 选中一个表面
  - 雾化效果
  - 切换着色器
  - 帧缓冲技术