计算机图形学

简介

计算机图形学(computer graphics) 只计算机上创建或操纵图像的任何内容，包括动画图像。

绘画与绘图

计算机屏幕上呈现的图像由像素组成。屏幕由 像素(pixels) 的矩阵网格组成，排列成行和列。

每个像素只能显示一中颜色，其中颜色由三个8位数字指定，分别给出红、绿和蓝的级别。

屏幕上所有像素的颜色值都存储在一个称为 帧缓冲区(frame buffer) 的大型内存块中。假如屏幕每秒重绘许多次，因此几乎在帧缓冲区中的颜色值更改后，屏幕上像素的颜色就会更改以匹配。

以这种方式使用的计算机屏幕是 光栅图形(raster graphics) 的基本模型。

图像的创建方式有两种主要类型：

🌇 光栅图形（Raster Graphics）

• 由像素网格组成，每个像素有颜色值。
• 存储在帧缓冲区 中，用于现代屏幕显示。
• 适合复杂图像（如照片）。
• 常见格式：GIF、PNG、JPEG、WebP。
• 放大后会失真（出现像素块）。
• 图像由像素颜色构成，修改后原始结构丢失（如画树遮住房子，擦掉树后房子不会重现）。

📐 矢量图形（Vector Graphics）

• 由几何形状（线、圆、矩形等）描述。
• 图像存储为形状列表（显示列表），适合结构化图形（如蓝图、图表）。
• 数据量小、分辨率无关（放大不失真）。
• 常见格式：SVG（可缩放矢量图形） 。
• 可编辑性强（如移动、缩放形状）。
• SVG 是基于 XML 的矢量图形标准，适合网页图标和图形元素。

历史背景

• 早期计算机使用适量显示器，通过电子束直接绘制图形。
• 后来光栅显示器变快、变便宜，成为主流，因其适合所有类型图像。

🎨 图像编辑工具对比

工具类型	特点
绘画程序（如 Photoshop、GIMP）	基于像素，适合自由绘图和照片编辑
绘图程序（如 Illustrator、Inkscape）	基于矢量形状，适合精确图形设计和编辑

📂 文件格式区别

文件格式	类型	特点
GIF	光栅	支持动画，最多256色
PNG	光栅	支持透明，无损压缩
JPEG	光栅	有损压缩，适合照片
WebP	光栅	支持有损/无损，压缩率高
SVG	矢量	可缩放、基于 XML，适合网页图形

三维图像的要素

1. 3D 图形的本质是“几何建模”

   • 3D 图像由一组几何对象组成（如点、线段、三角形等），称为几何基元（Geometric Primitives）
   • 复杂模型通过组合基本形状构建（如车轮 → 汽车 → 场景）。
   • 使用 分层建模（Hierarchical Modeling） 构建可复用组件。
   • 几何变换（Transformations） 控制物体的：缩放（Scaling）、旋转（Rotation）、平移（Translation）

2. 外观：材质与纹理

   • 材质（Material） 决定物体表面如何与光交互（颜色、光泽、透明度等）。
   • 纹理（Texture） 是一种特殊的材质属性，常用于在表面上贴图（如图像、凹凸效果）。
   • 材质 + 光照 = 物体最终视觉效果

3. 光照（Lighting）

   • 3D 场景必须设置光源。
   • 光源有位置、方向、颜色、强度等属性。
   • 光与材质相互作用，影响最终显示效果。

4. 视图与投影：从 3D 到 2D

   • 将 3D 场景“拍摄”成 2D 图像，称为 投影（Projection）
   • 设置“虚拟相机”的参数：观察位置（Camera Position）、观察方向（Look At）、上方向（Up Direction）
   • 最终生成的图像是一个二维像素网格

5. 光栅化与渲染

   • 光栅化（Rasterization）：将几何形状转换为像素图像的过程。
   • 渲染（Rendering）：整个从 3D 场景生成 2D 图像的过程，包括：几何处理、材质与光照计算、投影、光栅化。

6. 动画（Animation）

   • 动画是一系列连续变化的图像帧
   • 可以改变物体的位置、大小、材质、视角等
   • 使用关键帧或物理引擎实现动态效果

硬件与软件

软件

使用的软件是OpenGL（Open Graphics Library） 是一个用于 2D/3D 图形编程的跨平台图形 API。

最初由 Silicon Graphics 公司于 1992 年发布。

支持现代大多数设备：PC、手机、浏览器（WebGL）、游戏主机等。

Open GL被设计为一个“客户端/服务器”系统，服务器负责控制计算机的显示并执行图形计算，执行客户端发出的命令。

• CPU 是客户端 ：发出 OpenGL 命令。
• GPU 是服务器 ：接收命令并执行绘图操作。
• 数据通过“通信通道”从 CPU 发送到 GPU。

OpenGL 的发展演进：

版本	关键改进
OpenGL 1.0 ~ 1.4	固定功能管线，顶点逐个发送
OpenGL 1.1	引入顶点数组（减少传输次数），纹理对象
OpenGL 1.5	引入 VBO（Vertex Buffer Object）→ 数据存储在 GPU 显存中
OpenGL 2.0	引入 GLSL，支持编写运行在 GPU 上的程序（着色器）
OpenGL 3.0+	移除旧版固定管线，完全转向可编程管线

着色器（Shader）的引入

着色器是运行在 GPU 上的小型程序。主要类型：

• 顶点着色器（Vertex Shader）：对每个顶点进行变换和属性处理。
• 片段着色器（Fragment Shader）：对每个像素进行颜色计算（也叫像素着色器）。

优势：

• 高度灵活：开发者可以自定义光照、材质、特效等。
• 高效：直接在 GPU 上运行，充分利用其并行性。

不同平台上的Open GL变种：

名称	描述
OpenGL ES	用于嵌入式系统（如手机和平板）
WebGL	浏览器中的 OpenGL ES 子集，依赖 GLSL ES
Vulkan / Metal / Direct3D / WebGPU	更现代、更底层、更高性能的图形 API（但更复杂）

渲染管线从“固定”到“可编程”

类型	特点
固定功能渲染管线（Fixed Function Pipeline）	使用内置函数处理光照、纹理等（简单但不灵活）
可编程渲染管线（Programmable Pipeline）	使用顶点 + 片段着色器自定义图形效果（灵活强大）

硬件

需要用到的硬件是 GPU（Graphics Processing Unit），这是因为：

• 早期图形由 CPU 处理 → 性能差、速度慢。
• 现代计算机使用专用硬件 GPU（Graphics Processing Unit） 来处理图形任务。
• GPU 特点：并行计算能力极强 （成百上千个核心）、专为图形任务优化、拥有独立显存（VRAM），访问速度快。

GPU 如何实现高性能？

大量并行处理器：可同时处理多个顶点或像素。 数据局部性：数据存储在显存中，GPU访问更快。 适合图形任务的架构：虽然单核弱于CPU，但胜在并发量大。