WebGL与Three.js

WebGL是在浏览器中渲染3D图形的JavaScript API。Three.js是其上层封装库。

WebGL基础

着色器

• 顶点着色器：处理顶点位置、颜色、纹理坐标
• 片元着色器：处理像素颜色、深度信息

基本图元

点、线、三角形 — 所有图形都由这些图元拼凑

投影

• 正交投影：上帝视角，无近大远小
• 透视投影：符合人眼，近大远小

变换

• 平移：4x4齐次矩阵
• 旋转：三角函数矩阵
• 缩放：对角矩阵

Three.js

• Renderer：渲染器，canvas与程序的桥梁
• Scene：场景容器
• Camera：3D到2D的投影抽象（正交/透视）
• Mesh：网格 = Geometry（形状）+ Material（材质）
• 材质类型：基本材质、Lambert材质、Phong材质
• 光源：环境光、平行光、点光源、聚光灯

用途

1. 酷炫活动页（AFrame、Hilo 3D）
2. 数据可视化（ECharts 3D图表）
3. 游戏、直播视频处理

关联

• 相关概念: 浏览器渲染、设计模式
• 工具: Chrome WebGL Inspector