graphics-foundations

Graphics Foundations 是一个自成体系、按主题组织的计算机图形学基础学习资源，涵盖数学、渲染管线以及实时与光线追踪图像背后的算法。它源自 UCLA CS 174A（计算机图形学导论，2019–2021）六个学期的讨论课，并已被改写为独立资源；作者声明其并非官方课程材料。 结构与内容 该材料按学习路径组织为13章（编号0–12），建议按顺序阅读。每章开头说明学习目标，借助图示讲解内容，提供演示链接，并以自测题和隐藏答案收尾。 - 第0章：图形学环境搭建与 JavaScript（工具、模块、类、闭包、类型化数组、帧循环） - 第1章：渲染管线与 GLSL（顶点/片元着色器、光栅化、裁剪空间） - 第2章：点、向量与坐标系（仿射空间、齐次坐标和重心坐标、点积与叉积） - 第3章：用三角形建模形状（离散化、索引网格、三角形带、绕序、平面法线与平滑法线） - 第4章：变换（平移、旋转、缩放、剪切、反射；顺序；层次结构；动画） - 第5章：基变换（坐标系、坐标转换、相机作为坐标系） - 第6章：视图与投影（look-at、正交和透视推导、裁剪、z 缓冲） - 第7章：光照与着色（Phong 和 Blinn-Phong 模型、光源类型、平面/高洛德/Phong 着色、法线矩阵） - 第8章：纹理映射（UV 映射、滤波、mipmap、透视校正插值、凹凸/法线/位移贴图） - 第9章：碰撞检测（包围体、分离轴定理、宽相位、时间步进） - 第10章：阴影、镜面与透明（阴影映射、平面镜、alpha 混合、预乘 alpha） - 第11章：光线追踪（光线生成、求交、递归光线、光线树、加速） - 第12章：构建交互式图形项目（规划、计时与状态机、粒子、天空盒、拾取、合成、颜色） 笔记附带两套练习：习题集 I（基础、变换、视图）和习题集 II（光照、纹理、碰撞、光线追踪），每套均有完整解答。前置要求是掌握任意语言的编程以及向量、矩阵、点积和叉积层面的线性代数；第0章涵盖所需的 JavaScript 知识。 演示 各章配有七个交互式浏览器演示，可通过 GitHub Pages 在线站点访问：hello triangle（纯 WebGL）、变换、相机与投影、光照与着色、纹理映射、光线追踪以及包围体。演示 02–07 基于 Garett Ridge 编写的小型教学库 TinyGraphics.js 构建，使用其已发布版本而非内置副本。演示面向支持 WebGL 2 的桌面浏览器。项目提供了一个本地服务器脚本（node tools/serve.mjs），并支持针对 TinyGraphics.js 的本地克隆进行开发。 仓库结构与质量检查 仓库目录包括 notes/、exercises/、figures/（由 tools/figures.py 生成的 SVG 图）、demos/（每个演示一个 HTML 文件及共享辅助代码）和 tools/。值得注意的是，笔记像代码一样被测试：脚本会重新计算笔记和习题中的每个数字结果，检查链接、锚点、图的原创性以及是否包含课程行政信息，在无头 Chromium 中加载每个演示并点击所有控件、截图，并审查数学公式在 github.com 上的渲染效果。fix_math.py 脚本会重写那些在 GitHub 原生 MathML 中渲染不正确的 LaTeX 结构（如 \mathbf、\boxed、\tag、\operatorname）。演示检查需要本地支持 WebGL 2 的 Chromium，并生成截图供人工审阅。 致谢与许可 这些笔记最初是 UCLA CS 174A 的讨论课材料，服务于 Prof. Asish Law 和 Prof. Demetri Terzopoulos 教授的课程；主题选择和顺序遵循这些课程。不包含讲义幻灯片、教科书图表和作业。原始的每周讨论材料仍可在归档标签和各学期的仓库中获取。笔记、习题、图和演示均 © Yunqi Guo，采用 CC BY-NC-ND 4.0 许可：允许阅读、学习以及署名情况下非商业性分享未修改副本，但禁止分发修改版本或商业使用。TinyGraphics.js 是一个独立项目，遵循其自身条款。