这是我参与「第四届青训营 」笔记创作活动的第15天
WebGL
一些基本概念
- 光栅：指构成图像的像素阵列
- 像素：一个像素对应图像上一个点，它通常保存图像上的某个具体位置的颜色等信息
- 帧缓存：像素信息被存放在帧缓存中，帧缓存是一块内存地址
- CPU：中央处理单元，负责逻辑运算
- GPU：图形处理单元，负责图形计算
- WebGL是OpenGL的子集
CPU像一个管道，一个管道对应CPU的一个核，内核串行处理CPU处理图像渲染任务效率低——>GPU
GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，所有计算可以并行处理。
使用WebGL
轮廓提取/meshing——>光栅化——>帧缓存——>渲染
1. 创建WebGL上下文
2. 创建WebGL Program
shaders
- vertex shader 顶点着色器
- fragment shader 片元着色器
code
create program
3. 将数据存入缓存区
4. 将缓存区数据读取到GPU
5. GPU执行WebGL程序，输出结果
为什么这么difficult
meshing.js
earcut 对多边形进行三角剖分
动画实现
transforms
实例
3D标准模型的四个齐次矩阵
- 投影矩阵 —— 处理坐标系
- 模型矩阵 —— 模型的顶点做线性变换
- 视图矩阵 —— 模拟摄像机，在某位置观察
- 法向量矩阵 —— 法线信息
参考资料
数据可视化基础
- 正确表达数据中的信息而不产生偏差和歧义
- 节省笔墨
- 节省空间
- 消除不必要的“无价值”图形
- 在最短时间内传达最多的信息
分类
- 数据可视化
- 科学可视化
- 信息可视化
可视分析
记录信息 ——> 分析推理 ——> 证实假设 ——> 交流思想
常见的错误可视化
透视失真
引导错觉绿色部分较大
图形实际&数据尺度
视觉预期
错误的数据洞察产生于在图形的某个地方发生的不正确的视觉预期推断
数据上下文
视觉感知
相对判断和视觉假象
格式塔理论
- 就近原则
- 相似原则
- 连续性原则
- 闭合性原则
- 共势原则
- 对称性原则
- 图形与背景关系原则
视觉编码
面向前端的可视化工具
- D3
- Vega
- G2
- ECharts
