#sec-1

Computer Graphics · Chapter 2 · 01

从固定功能到可编程 GPU

为什么现代图形程序要用“数据 + 程序”与 GPU 对话？

Data

Shader Program

→

GPU

→

Image

#sec-2-1

Bridge-in · 0–4 min

三十年视觉革命：变的不只是“更快”

1996 · Quake

现代实时渲染

关键变化之一：GPU 从固定功能设备逐步演化为可编程并行计算设备。

#sec-2-2

Chapter case

第二章贯穿问题：5000 个位置数据，怎样变成 Sierpinski 镂垫？

CPU / JavaScript

生成 5000 个位置

↓

整理成 GPU 可接收的数据

打开本章 Demo：Sierpinski 镂垫

GPU / WebGL

接收数据

↓

执行 Shader

↓

绘制到 Canvas

预测90 s

CPU 与 GPU 之间至少需要约定哪些东西？先写三个关键词。

#sec-2-3

Learning goals

本课只解决三个问题

为什么API会演化？

从“机器替你决定”到“开发者控制”。

现代编程模型是什么？

Data + Program 是核心。

WebGL在哪里？

浏览器中的现代GPU图形接口。

#sec-3-1

Pre-assessment · 8–14 min

如果让你设计一个“绘图 API”

方案 A · 保姆式

drawSphere({
  position:[0,0,0],
  radius:1.0,
  color:[1,0,0],
  lighting:true
});

简单，但功能由API预先决定。

方案 B · DIY式

buffer = createBuffer(data);
shader = createShader(code);
setBuffer(buffer);
setShader(shader);
draw();

灵活，但需要理解数据与GPU程序。

小组讨论3 min

从“易学、灵活、可扩展、性能、开发者控制力”五个维度比较 A/B。

#sec-3-2

Key question

如果GPU厂商没有预先想到你要实现的效果呢？

答案不是继续增加更多“固定按钮”，而是：让核心处理过程可编程。

Configure Machine

→

Program the Machine

现代GPU的关键思想：开发者提供数据，也提供处理数据的程序。

#sec-4-1

Evolution · 14–20 min

固定功能流水线：告诉GPU“做什么”

Fixed Function

大量处理规则由 API / 硬件预先规定
程序主要“打开、关闭、配置”现成功能
容易使用，但难以突破预设模型

#sec-4-2

Programmable pipeline

可编程流水线：告诉GPU“如何算”

Programmable

应用程序负责准备数据
Shader 决定顶点和片元怎样处理
同一硬件可实现卡通、体积、材质等大量效果

#sec-4-3

Visual effects

为什么“可编程”带来了创造力？

Toon · 卡通渲染

Volumetric · 体积光

NPR · 非真实感

共同点：它们不再受限于单一固定的“标准外观”。

#sec-4-4

History · Extension

从专用硬件到可编程GPU：只看关键节点

阶段	关键变化	对编程的意义
早期	CPU承担大量绘制计算	图形能力受通用处理器限制
专用图形硬件	逐步把光栅化、几何处理移到专用硬件	形成图形流水线
可编程Shader	顶点/片元阶段开放给开发者编程	固定功能 → 可编程
统一Shader与GPGPU	大量通用并行核心	图形与通用GPU计算逐渐融合
实时光追/AI加速	增加专用求交、矩阵/AI能力	现代渲染呈现混合架构

#sec-4-5

Rendering mode · Extension

即时模式与保有模式：为什么要减少 CPU↔GPU 往返？

Immediate Mode

每次绘制都从应用程序逐项提交顶点/状态。

CPU调用和数据传输开销大

Retained / Buffer-based

把顶点数组批量上传并保存在GPU资源中，重复绘制时直接复用。

更适合现代GPU高吞吐

#sec-4-6

OpenGL evolution · Extension

版本变迁

OpenGL 2.x

引入GLSL，可编程Shader成为标准能力。

OpenGL 3.x

逐步弱化/移除旧立即模式与大量固定功能接口。

OpenGL ES / WebGL

围绕可编程流水线构建更精简的接口。

历史的主线不是版本号，而是：把更多算法从API固定功能移到开发者Shader中。

#sec-5-1

Core model · 20–24 min

现代图形编程的两个核心元素

DATABuffer / Resource顶点位置、颜色、纹理、矩阵、时间……

PROGRAMShader告诉GPU怎样处理顶点和片元。

→

GPUParallel Execution对大量顶点/片元并行执行。

→

OUTPUTFramebuffer生成最终图像。

#sec-5-2

Participatory classification

Data / Program / State

几何与属性

顶点坐标
颜色
纹理坐标

GPU程序

Vertex Shader
Fragment Shader
自定义光照算法

运行时数据/状态

变换矩阵
时间
Viewport / Depth Test

#sec-6-1

API family · 24–29 min

API 演进家族：OpenGL → OpenGL ES → WebGL

01 · Desktop

OpenGL

面向桌面端图形应用的标准 API，功能全面庞大，建立了现代可编程图形管线的基石。

02 · Embedded / Mobile

OpenGL ES

针对移动端与嵌入式设备裁剪精简的规范，剥离冗余固定功能，全面转向纯 Shader 可编程处理。

03 · Browser / Web

WebGL / WebGL 2

基于 OpenGL ES 引入 HTML5 Canvas，使 JavaScript 能够直接调用 GPU 进行无插件硬件加速渲染。

核心理解

这一家族演进的主线：并非简单的平台迁移，而是将算法与控制权从硬件固定功能彻底交还给开发者 Shader。

#sec-6-2

WebGL vs OpenGL

核心思想相同，运行环境不同

维度	WebGL	原生 OpenGL	共同核心
语言	JavaScript + GLSL ES	C/C++ + GLSL	可编程流水线 Buffer Shader Draw Call
平台	浏览器	原生应用
窗口/输入	HTML / Browser	平台窗口库
部署	URL即可运行	通常需要本地构建

#sec-7-1

API landscape · 29–33 min

现代API继续把更多控制权交给开发者

OpenGL

高层状态式API

Vulkan

显式资源与命令管理

Metal / D3D12

现代低开销GPU API

WebGPU

Web上的现代GPU编程模型

API组织会变化，但本课程首先学习的核心不会变：数据、Shader、GPU资源和绘制流水线。

#sec-7-2

Course position

为什么本课程仍从 WebGL 2 开始？

适合教学

可以直接观察经典GPU流水线
概念与教材、实验资源一致
浏览器部署简单

可迁移

Buffer / Shader / Pipeline 概念可迁移到 WebGPU
后续理解 Vulkan / Metal 也有基础
重点是原理，不是背 API

#sec-8-1

AI learning · 33–37 min

让 AI 用生活类比解释 Fixed vs Programmable

Prompt

“请用一个生活中的例子解释固定功能流水线与可编程流水线。”

你的任务

指出类比成立的两点
指出类比失效的一点
补充专业表述

AI类比纠错3 min

例如AI可能说“微波炉 vs 自己做饭”。问：GPU是否真的完全没有固定功能硬件？

#sec-9-1

Post-assessment · 37–39 min

两道判断，检查核心思想

Q1

现代图形API最重要的变化，是“GPU变快了”。

判断并说明：性能提升与编程模型变化是不是同一件事？

Q2

WebGL 与 OpenGL 的核心图形编程思想完全无关。

用 Data / Shader / Buffer 三个词说明。

#sec-9-2

Summary

本课总结：从“按钮”到“程序”

API取舍

简单封装与灵活控制之间存在权衡。

核心变革

固定功能 → 可编程流水线。

核心模型

Data + Program

课程载体

WebGL 2 用来学习现代图形学原理。

#sec-9-3

Exit ticket · 39–40 min

填三个空格

Data → ________　　Program → ________　　GPU执行 → ________

提交1 min

再写一句：为什么现代API看起来比固定功能API更复杂，却更有价值？