# visual

**Repository Path**: leoamazing/visual

## Basic Information

- **Project Name**: visual
- **Description**: 数据可视化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-01-22
- **Last Updated**: 2023-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webgl, Threejs

## README

# 数据可视化-WebGL

### WebGL 介绍

1. WebGL 的起源
2. WebGL 程序的结构

### WebGL 基础知识

1. 刷底色
2. webgl 坐标系
3. webgl 画一个点

### js 与着色器间的数据传输

1. js 控制顶点位置
2. webgl 同步绘图原理
3. 鼠标控制点位
4. js 修改顶点颜色
5. 鼠标绘制随机颜色的点
6. 绘制圆点

### 绘制图形

1. 三维模型绘图
2. 绘制多个点
3. 绘制图形
4. 绘制矩形
5. Buffer 缓冲区异步绘制
6. 封装多边形对象
7. 鼠标画线
8. 鼠标画多线
9. 图形转面

### 矩阵变换

1. 平移
2. 旋转
3. 缩放
4. 矩阵

### 矩阵复合变换

1. 矩阵相乘
2. 变换规律
3. 视图矩阵
4. 模型矩阵

### 颜色与纹理

1. 多 attribute 变量
2. 彩色三角形
3. 纹理
4. 纹理合成
5. 跨域图像做贴图
6. 视频贴图

### 世界坐标和本地坐标

1. 基本概念
2. 世界坐标系和本地坐标系点位关系

### 深入认知三维世界

1. 用位移矩阵做实验
2. 位移法则
3. 缩放法则
4. 旋转法则

### 旋转法则深度探索

1. 顶点绕单轴逆时针旋转
2. 欧拉旋转
3. 四元数

### 正交投影矩阵

1. 裁剪空间
2. 正交投影矩阵的实现原理
3. 正交投影矩阵的代码实现
4. 正交投影矩阵解决 webgl 图形拉伸问题

### 视图矩阵

1. 视图位移
2. 扩展-matrixWorld 详解
3. 扩展-逆矩阵
4. 视图旋转

### 透视投影矩阵

1. 基础知识
2. 认识透视投影矩阵
3. 计算透视投影矩阵
4. three.js 里的透视投影矩阵
5. 透视投影矩阵牛刀小试

### 投影矩阵、视图矩阵和模型矩阵共冶一炉

1. 投影视图矩阵
2. 投影视图矩阵乘以模型矩阵

### 正交相机轨道控制器

1. 正交相机的位移轨道
2. 正交相机的缩放轨道
3. 正交相机的旋转轨道
4. 轨迹球旋转

### 透视相机轨道控制器

1. 透视相机的位移轨道
2. 透视相机的缩放轨道
3. 透视相机的旋转轨道

### 封装相机轨道对象

1. 轨道控制器的封装
2. 轨道控制器的实例化

### 顶点索引

1. 顶点索引概念
2. 彩色立方体

### 多着色器

1. 多着色器绘图
2. 多着色器动画

### 基于 webgl 的轻量级架构

1. 几何体 Geo
2. 材质 Mat
3. 三维对象 Obj3D
4. 场景对象 Scene

### 认识光

1. 光照对物体的影响
2. 光源
3. 反射光

### 着色

1. 光线与着色点法线的夹角
2. 光线的衰减
3. 漫反射
4. 镜面反射
5. 环境反射
6. Blinn-Phong 反射模型

### 着色频率

1. 法线
2. 认识着色频率
3. 球体
4. Flat 逐三角形着色
5. Gouraud 逐顶点着色
6. Phong-逐片元着色

### 光源类型

1. 筒灯
2. 锥形灯
3. 扩展-泉

### 帧缓冲区

1. 帧缓冲区的概念
2. 帧缓冲区的代码实现
3. 帧缓冲区的显示
4. 帧缓冲区里的深度测试

### 投影

1. 投影的概念
2. 投影的代码实现
3. 提高深度数据的精度
4. 帧缓冲区的封装

### 纹理映射

1. 等距圆柱投影
2. VR
3. 线条的纹理映射