计算机图形学 · D02 已验证输出版 · 第一章 / 第二章

多模型绘制流水线：每一步看见结果

用一个含多个模型的场景，顺着流水线看：相机在哪里、模型怎样互相遮挡、教学裁剪窗口如何保留或舍弃几何、像素最终怎样留下。

离线单文件 · Canvas 教学模拟

① 选择阶段：连续比较输入与输出

降低数值，可模拟屏幕上先已有更近的片元；与模型间遮挡一起观察深度测试。

输入 Input

输出 Output · 本阶段真正产生什么

数据类型与执行位置

课堂观察与提问

任意阶段可调整模型与相机，再观察输入、输出和下方坐标数值怎样同步改变。

② 每一阶段：输入画面 → 输出画面

输入（上一阶段）

输出（当前阶段）

立方体棱锥三角面板当前追踪模型 / 三角形候选片元

演示视口 56 × 34 个教学像素。两幅图的“场景观察视角”和“流水线相机视角”有时不同，以图内标题为准；严禁将前者误认作变换产生的渲染结果。

③ 查数据：选定同一个顶点，追踪坐标变化

默认追踪所选模型的顶点 V0；右侧可在片元阶段单击任意网格，查看该像素的候选片元与深度比较。

模型坐标 → 世界坐标 → 相机坐标 → 裁剪坐标


          

          

            
当前阶段的矩阵 / 图元 / 片元细节

            

          

        

        

          准确性说明：为便于初学者学习，本 Demo
          将典型顶点着色器内部的模型、观察、投影数学运算分成三个观察页。所有计算、几何裁剪、网格化与深度比较均由浏览器
          JavaScript / Canvas 2D 模拟；并非获取真实 WebGL 驱动或 GPU
          的中间执行数据。关闭裁剪或光栅化是教学对照，不代表 WebGL
          中有同名的可关闭开关。观察用的辅助相机不会进入模型的渲染流水线。
        

      

      

        教学使用：第一章关注「不同坐标空间如何产生不同几何结果」与流水线整体；第二章进一步分析矩阵、齐次裁剪、顶点数据、片元生成；其他章节可复用模型旋转、相机与深度测试。