WebGL入门

WebGL是OpenGL和JavaScript的绑定，它允许在Web浏览器中渲染2D和3D图形。WebGL的主要优势在于硬件加速，通过直接调用GPU来实现高效的图形渲染。

为什么WebGL快?

传统Canvas 2D绘图过程:

• CPU计算每个像素的颜色
• 将计算结果存入内存
• 从内存传输到显示器显示

WebGL渲染过程:

• 直接调用GPU进行并行计算
• 计算结果直接存入显存
• 从显存直接输出到显示器

基础数学知识

坐标系统

WebGL使用右手坐标系:

• X轴: 水平方向
• Y轴: 垂直方向
• Z轴: 垂直屏幕方向

WebGL坐标范围: [-1, 1]，超出此范围的内容不会被渲染。

线性代数基础

两个核心概念:

向量(Vector)

• 可表示3D空间中的点
• 包含方向和长度
• 可进行加减乘除运算

矩阵(Matrix)

• 存储变换规则
• 实现平移、旋转、缩放等变换
• 矩阵之间可以相乘组合变换

渲染管线(Pipeline)

渲染管线是WebGL图形渲染的核心流程:

顶点处理(Vertex Processing)

• Model变换:确定物体本身的变换
• View变换:确定摄像机视角
• Projection变换:确定投影方式(透视/正交)

图元装配(Primitive Assembly)

• 将顶点组装成三角形
• 确定三角形的连接关系

光栅化(Rasterization)

• 将顶点数据转换为像素数据
• 确定每个像素是否需要着色

片元处理(Fragment Processing)

• 计算每个像素的最终颜色
• 存入帧缓冲区(Frame Buffer)

着色器(Shader)

着色器是在GPU上执行的程序:

顶点着色器(Vertex Shader)

• 处理顶点数据
• 实现顶点变换

片元着色器(Fragment Shader)

• 处理像素数据
• 决定像素的最终颜色

Three.js重要概念

Three.js是基于WebGL的3D库，主要概念:

Camera(摄像机)

• PerspectiveCamera: 透视摄像机，产生近大远小效果
• OrthographicCamera: 正交摄像机，不会产生透视效果

Geometry(几何体)

• 定义物体的形状
• 由多个三角形组成

Material(材质)

• 定义物体的外观
• 包含颜色、纹理等属性

Mesh(网格)

• Geometry和Material的组合
• 表示一个完整的3D物体

React Three Fiber

React Three Fiber (R3F) 是 Three.js 的 React 渲染器，它让我们能用 React 的方式来写 Three.js 代码。

// Three.js 原生代码
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({color: 'blue'})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// React Three Fiber 代码

// 基础场景容器
<Canvas>
  {/* // 3D对象 */}
  <mesh>
  {/* 形状 */}
  <boxGeometry />
  {/* 材质 */}
  <meshBasicMaterial color="blue" />
 </mesh>
</Canvas>

参考资料