课程简介
计算机图形学研究如何用计算机表示、生成和交互呈现视觉内容。本课程沿着“场景与模型 → 相机与投影 → 绘制流水线 → 屏幕像素”的主线，将数学模型、图形算法、WebGL 编程与视觉结果连接起来，并结合医学可视化等场景理解图形技术的实际用途。
适用对象
面向计算机相关专业三年级学生，也适合希望系统理解实时图形绘制基础的学习者。
课程目标
- 解释虚拟照相机、图形系统和可编程绘制流水线的工作方式；
- 掌握二维与三维几何变换、观察和投影；
- 理解光栅化、可见性、光照着色和纹理映射的核心算法；
- 使用 WebGL 和着色器完成交互式图形程序；
- 能够分析图像质量、实时性与实现复杂度之间的权衡。
先修要求
- 掌握一种程序设计语言及基本调试方法；
- 熟悉向量、矩阵等线性代数基础；
- 了解数组、栈、树等基础数据结构；
- 不要求预先掌握 Web 开发，课程中会结合 WebGL 需要补充 HTML 与 JavaScript 基础。
教学安排
课堂讲授、算法推导、WebGL 编程实验与综合课程设计并重。第 1–7 章及第 12 章为核心内容，第 8、9 章作为扩展内容，用于理解帧缓存高级特性和复杂场景组织方法。
章节目录
- 课程概述：课程基本情况介绍
- 图形系统和模型：成像模型、GPU 与可编程流水线
- 图形学编程：Sierpinski 镂垫、WebGL API、着色器程序与图元属性
- 交互和动画：事件驱动输入、动画渲染循环与对象拾取
- 几何对象和变换：坐标系、仿射变换、齐次坐标、变换级联与四元数
- 观察：相机定位、观察矩阵、平行与透视投影、规范化视见体
- 光照和着色：Phong 光照模型、材质、光源、法向量与片元着色
- 纹理映射：纹理坐标、采样与滤波、环境映射与凹凸贴图
- 使用帧缓存（介绍）：Alpha 混合、FBO 离屏渲染、图像后处理与拾取
- 层级建模方法（介绍）：实例变换、树结构、递归遍历与场景图
- 从几何到像素（教材第 12 章）：裁剪、光栅化、Z-Buffer 与反走样
课件资源
第〇章课程概述以及第一至第四章已发布的课件均可从上方章节目录直接打开，也可在教学资源页按“计算机图形学”筛选。第一章课件中的视频暂以封面图占位，外链就绪后补充。
Demo 与配套代码
以下示例均可直接在浏览器中运行；“源码”链接指向示例使用的主 JavaScript 文件。公共依赖也可在线查看：WebGL 工具、着色器初始化和向量矩阵工具。
第一章：基础图元与颜色
- 三角形：运行 Demo · 查看源码
- 正方形：运行 Demo · 查看源码
- 三角形与正方形：运行 Demo · 查看源码
- 彩色三角形：运行 Demo · 查看源码
- 非连续三角形与正方形：运行 Demo · 查看源码
- 非连续图元（WebGL 2 版本）：运行 Demo · 查看源码
第二章：Sierpinski 镂垫与细分
- 随机点生成二维镂垫：运行 Demo · 查看源码
- 三角形细分生成二维镂垫：运行 Demo · 查看源码
- 彩色二维镂垫：运行 Demo · 查看源码
- 三维镂垫：运行 Demo · 查看源码
- 三角形细分：运行 Demo · 查看源码
第三章：动画与交互
- 自动旋转正方形：运行 Demo · 查看源码
- 用按钮、菜单和键盘控制旋转：运行 Demo · 查看源码
- 用滑块控制旋转速度：运行 Demo · 查看源码
- 单击绘制彩色点：运行 Demo · 查看源码
- 拖动绘制彩色点：运行 Demo · 查看源码
- 单击绘制三角带：运行 Demo · 查看源码
- 两次点击绘制矩形：运行 Demo · 查看源码
- 交互绘制多边形：运行 Demo · 查看源码
第四章：几何对象和变换
- 欧拉角旋转立方体：运行 Demo · 查看源码
- 索引绘制旋转立方体：运行 Demo · 查看源码
- 四元数旋转立方体：运行 Demo · 查看源码
- 跟踪球矩阵旋转：运行 Demo · 查看源码
- 跟踪球四元数旋转：运行 Demo · 查看源码
课件内的“标架与齐次坐标显微镜”和“基本变换矩阵实验台”保留在对应课件中直接启动，不再作为独立 Demo 重复列出。
实验任务
实验将围绕 WebGL 基础、二维与三维变换、观察与投影、光照着色、纹理映射及基础光栅算法逐步展开。每次实验必须按照统一要求完成邮件与课程平台双渠道提交，并检查压缩包命名、目录结构和运行入口。
课程设计
本学期课程设计主题为“纪念”，要求 3～4 人组队，综合运用场景建模、相机、光照、纹理、交互控制与图像输出，完成一个可运行、可演示并包含技术说明的三维应用。指南同时说明阶段任务、提交材料、AI 辅助开发及过程记录要求。
参考资料
- Edward Angel、Dave Shreiner：《Interactive Computer Graphics: A Top-Down Approach with WebGL》；
- Donald Hearn、M. Pauline Baker、Warren Carithers：《Computer Graphics with OpenGL》；
- Khronos WebGL 官方文档及课程讲义。
更新记录
- 2026-10-16：发布第四章前两讲及 5 个 WebGL 2 几何变换 Demo；课件内教学仪器改为仅从对应课件启动。
- 2026-10-03：发布第三章两份在线课件及课件内互动示例，新增按章节整理的第一至第三章 Demo 与配套代码。
- 2026-09-25：发布第二章三份在线课件及配套 WebGL 示例。
- 2026-09-19：发布实验提交规范和课程设计指南，完善课程主页相关说明。
- 2026-09-19：同步 2026 秋季课程结构，发布第〇章课程概述和第一章三份在线课件。
- 2026-03-05：建立课程条目。