#sec-1

Computer Graphics · Chapter 5 · 02

投影、视见体与成像

同一场景如何生成正交或透视图像？从Projection Matrix到屏幕。

投影类型观察体透视除法MVPViewport

第5章 · 观察　｜　40分钟独立教学单元　｜　WebGL2 / Reveal.js

#sec-2-1

Bridge-in · MED × CG

同一相机，为什么会得到两种不同图像？

观察相同的骨骼与植入物三维模型：一张保持平行线关系，一张更接近人眼的近大远小。

【R05-05 固定视角的正交与透视对照】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。画一组经过简化的三维医学骨骼与植入物/方盒模型，左侧正交投影，右侧透视投影。两边使用同一相机位置和朝向、相同物体布局、同一视口大小；突出“远处同尺寸物体在正交下等大，在透视下变小”。要可严格比较，不用摄影照片。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

#sec-2-2

Prediction

相机参数不变，成像方式可以改变吗？

相同模型、相同Eye/At/Up，如果只切换投影方式，哪项可能改变？

A. 物体的几何顶点数据B. 图像中物体的相对尺寸和空间感C. 相机的世界位置

答案：B　投影矩阵决定从相机坐标到裁剪空间的映射。

问题：哪一种适合显示空间深度，哪一种适合固定方向上的几何比较？

#sec-2-3

Connection

观察矩阵解决“从哪看”，投影矩阵解决“怎样成像”

模型位置 M→相机视角 V→投影方式 P→裁剪/NDC→屏幕图像

View Matrix · V

决定相机坐标系中的几何位置和方向。

Projection Matrix · P

决定投影规律，并将所需视见体映射到规范裁剪空间。

#sec-3-1

Projection Taxonomy

两大类投影，而非许多互不相关的投影

【R05-06 经典投影分类总览】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。画严谨的计算机图形学经典投影分类示意，顶端分为“平行投影”和“透视投影”。平行侧三个极简立方体小图：多视图正交、轴测、斜投影；透视侧三个极简方盒/建筑框架小图：一点、两点、三点透视。突出分类关系，不推导公式，严格保持16:9简洁留白。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

计算机观察中，经典图形的差异还来自对象、相机和投影面的相对关系。

#sec-3-2

Classical Views

正视、侧视、轴测：为什么没有近大远小？

多视图正交

视线与投影面垂直，采用多个观察方向辅助理解三维形体。

轴测和斜投影

仍属于平行投影；通过改变视线或投影方向，在一张图中显示多个表面。

平行投影线 ⇒ 相同方向上的尺度不随深度而改变

注意：二维正交投影一般不能保留三维空间任意方向的真实长度；只能在相应的投影平面或经过校准的方向上比较尺寸。

#sec-3-3

Application Choice

医学三维模型应该选择哪一种投影？

正交投影

适合固定方向的结构对照、构件排列及某些测量辅助显示。

透视投影

更直观体现前后、距离和空间深度，适合三维浏览与交互。

CLASS DISCUSSION

在器械定位检查界面中，为什么可能需要让用户在两种投影之间切换？

强调二者互补，不将“透视更真实”等同于“所有医学应用都更准确”。

#sec-4-1

Orthographic Projection

正交投影：投影线与投影平面垂直

在平行投影的一种常用情形中，所有投影线互相平行且垂直于投影平面。

【R05-07 正交投影原理】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。极简三维几何原理图：一张竖直投影平面、两个位于不同深度但大小相同的立方体、四五条方向平行且垂直投影面的蓝色投影线；在投影面上画出同样尺寸的轮廓。显著标注投影线互相平行。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

#sec-4-2

View Volume

正交观察体是一个长方体

【R05-08 正交观察体六个边界】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。绘制正交摄像机的矩形长方体观察体，左/右/上/下/近/远六个面使用浅青蓝细线；相机Eye在外侧，朝负Z方向，明确near与far是正的距离参数。让投影线保持平行。旁边只画一个部分超出观察体的立方体以说明裁剪。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

观察体与视口不是同一概念：前者决定场景中哪些区域进入成像，后者决定图像映射到屏幕的哪里。

#sec-4-3

Normalization

为什么要把任意观察体映射到规范立方体？

不同程序和模型可以使用不同世界单位；GPU裁剪和后续处理需要统一的规范范围。

视空间范围 [l,r]→平移 + 缩放→规范范围 [−1,1]

x_ndc = 2(x − l)/(r − l) − 1这里以正交投影的X分量为例说明；Y、Z按相应边界映射。

课堂快速代入：x=l时得到−1；x=r时得到1；中点对应0。

#sec-4-4

WebGL API · ortho

用六个参数构造正交投影矩阵

const projectionMatrix = mat4.create();
mat4.ortho(projectionMatrix,
  left, right, bottom, top, near, far);

P_ortho 的作用

将选定的长方体观察范围映射为规范裁剪范围。

与View的区别

改变ortho的边界不会自动改变eye/at/up或相机方向。

这里使用gl-matrix函数签名；near/far与默认相机沿负Z方向的约定保持一致。

#sec-5-1

Perspective Projection

透视投影：投影线汇聚于一个中心

【R05-09 从针孔相机到透视投影】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。绘制简洁针孔相机/虚拟相机几何侧视图：左侧投影中心COP，中间垂直成像平面，右侧两个距离不同但高度相同的物体；多条射线都经过COP，投影平面上远物体像较小。可以把成像平面放在COP前方以避免倒像讨论。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

同一条深度方向上，物体越远，投影缩小越明显；正交投影没有这种透视性变化。

#sec-5-2

Similarity of Triangles

近大远小来自相似三角形

相机位于原点、沿负Z方向看，在z = −f平面投影。由相似三角形可得到：

x′ = f · x/(−z)　　y′ = f · y/(−z)

近处：z=−2

取f=1、x=1，则x′=0.5。

远处：z=−4

取f=1、x=1，则x′=0.25。

学生应能解释：分母随距离增加，投影后的坐标幅度变小。

#sec-5-3

Homogeneous Coordinates

非线性透视关系，为什么仍可用矩阵？

三维点的齐次表示→4×4 投影矩阵→裁剪坐标 (x_c,y_c,z_c,w_c)→除以 w_c

x_ndc = x_c/w_c，y_ndc = y_c/w_c

透视投影矩阵利用齐次分量表示深度相关的变换；真正的除法由顶点着色器之后的流水线阶段完成。

#sec-5-4

Perspective Frustum

透视观察体是截头锥体（视锥体）

【R05-10 透视视锥体与近远裁剪面】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。计算机图形学视锥体Frustum几何示意，虚拟相机位于左端，向右打开四条边界射线，近裁剪矩形和远裁剪矩形分别用青色细框和蓝灰细框表示，标清垂直视角fovy与near/far正距离，在右侧小框注明aspect=宽/高，整体极简、准确、无三角函数推导。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

不把视锥体理解为真实光线追踪空间；这里是栅格化管线用来决定可见范围的几何体。

#sec-5-5

Perspective Parameters

四个参数，分别控制取景和裁剪

参数	含义	改变后的典型效果
fovy	垂直视角	变大 → 视野更广、物体通常更小
aspect	宽高比	决定水平与垂直显示范围比例
near	近裁剪距离	太近的几何可能被裁剪
far	远裁剪距离	太远的几何可能被裁剪

mat4.perspective(projectionMatrix,
  Math.PI / 4, canvas.width / canvas.height,
  0.1, 100.0);

gl-matrix中fovy单位是弧度；通常要求0 < near < far。

#sec-5-6

Prediction Before Demo

预测：FOV、near与相机后退是否相同？

固定相机、模型、视口大小，把fovy由45°增至90°，图中物体通常怎样变化？

A. 更大B. 更小，同时视野范围更宽C. 大小不变，只改变遮挡关系

答案：B　FOV越大，相同角度范围内屏幕单位对应越少。

接下来用相同模型和相机，分开修改参数验证，避免一次调整多个变量。

#sec-6-1

Interactive Demo

D05-02 · 正交与透视投影显微镜

D05-02 · 教学实验台 WebGL2 + Canvas 2D + 原生三维数学

正交与透视投影交互显微镜

相机和模型不变，只改变投影矩阵。直观观察正交长方体与透视视锥体的形态变化，实时验证近大远小与裁剪机制。

🔹 三重视角联动：外部三维观察体、中间真实渲染高度实测与右侧完整投影参数控制

🔹 顶点不可变性：场景中两只立方体顶点 Buffer 永久保持不变，仅更新投影矩阵 P

🔹 坐标显微镜：实时跟踪计算点在裁剪空间 (Clip) 与透视除法后的 NDC 坐标

▶ 启动交互 Demo：正交与透视投影显微镜 ↗

课堂观察任务 4 min

带着问题观察与验证

正交 vs 透视切换：观察两只严格同尺寸立方体在正交下的等高显示（1:1）与透视下的近大远小差异。
视场角 fovy 调节：在透视模式下逐步减小 fovy，观察视锥体变窄时屏幕物体如何被“拉近放大”。
Near/Far 边界裁剪：增大 near 使其切入近处物体，或缩小 far 使远处物体消失，确认被裁剪不是遮挡。
数学与 NDC 检验：展开“坐标显微镜”，观察透视除法中 \(w = -z\) 如何将远近坐标压缩映射至 NDC。

💡 核心法则：投影矩阵定义了“可视范围的几何体”和“如何将三维几何映射到二维规范视口”。

【D05-02 双投影与视见体交互实验台】独立交互HTML制作提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。制作独立运行HTML教学Demo，不引入额外库，保持16:9白底、深蓝/青蓝、简洁大字号。左侧三维场景显示两只相同立方体或简单医疗模型、固定相机和动态观察体；中间显示正交/透视投影结果；右侧提供投影切换、fovy、aspect、near、far及正交边界控制。每一步显示被裁剪、仍可见和最终投影的区别，可选显示裁剪空间、透视除法后NDC数值；内置恢复默认按钮。具有Prediction→Operation→Observation→Explanation区域。制作完成后将占位符替换为链接或iframe，并保留本页课堂操作要求。

教学重点是观察中间状态，确认“投影选择”和“相机位置”是两类不同参数。

#sec-6-2

Demo Operations

三轮参数实验：一次只改一个因素

1固定相机与模型，切换正交/透视：比较不同深度同尺寸物体。

2固定其余参数，增大fovy：观察物体在画面中变小。

3逐步增大near或缩小far：观察部分几何消失的边界。

在第三轮特别询问：被裁剪掉，是否等于被前面的物体遮挡？答案：不是。

#sec-6-3

Complete Viewing Pipeline

从三维对象到屏幕：现在把整条链连接起来

【R05-11 第五章完整MVP与屏幕成像流程】插图生成提示词：16:9横向大学计算机图形学教学示意图，1600×900适配，白色或极浅灰白底，正式极简科学信息图风格；深蓝、蓝灰、青蓝为主色，少量绿色标正确、少量琥珀色标关注；中文大字号印刷体，清晰线条，轻微圆角框与箭头，留白充分；每图只表达一个核心机制，适合80人教室投影；不要照片、卡通、暗色背景、炫光、密集文字。简洁大学图形学WebGL2观察流水线流程图，左到右层级：对象坐标、Model Matrix、世界坐标、View Matrix、相机坐标、Projection Matrix、裁剪坐标、Clip / Perspective Divide、NDC、Viewport、屏幕像素。节点上用M、V、P小标记；使用两行错位流程或适度分组避免过密；突出本章新增V和P，背景白色。生成素材后替换当前media-placeholder，保留本页说明与动画次序。

p_clip = P · V · M · p_model

第三章窗口坐标/NDC的交互处理与第五章渲染方向相反，注意坐标流向。

#sec-6-4

Minimal Vertex Shader

WebGL2：在顶点着色器中形成裁剪坐标

#version 300 es
in vec4 aPosition;
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;

void main() {
  gl_Position = uProjectionMatrix *
                uViewMatrix * uModelMatrix * aPosition;
}

gl_Position输出齐次裁剪空间坐标；透视除法和视口变换由后续图形流水线完成。

#sec-6-5

Clipping ≠ Occlusion

“看不到”有两种不同原因

超出视见体 → 裁剪

几何不在投影定义的可见范围内，即使前方没有其他物体也可能被裁剪。

位于后方 → 遮挡

处于视见体内的表面可能被其他表面挡住，通常利用深度测试解决。

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

本节只建立区分；背面剔除、深度精度、阴影贴图等列为教材延伸。

#sec-7-1

Medical Transfer

回到医学三维模型查看器：如何选择？

看清结构的相对空间位置

选择合适的相机朝向与透视投影，便于观察前后和深度。

固定视向下进行形状比较

选择正交投影，结合合适的坐标标定与观察方向。

TRANSFER

模型几何不变；若界面允许“绕模型旋转观察”和“正交/透视切换”，分别需要更新哪一种矩阵？

参考：绕模型观察主要改变V；改变投影类型主要改变P。对于轨道相机，有时也可等效地转模型，但概念职责须分清。

#sec-7-2

Summary

第五章知识闭环：三种矩阵，各负其责

MModel：模型在世界中的位置、方向、比例。

VView：相机位置与方向，世界 → 相机。

PProjection：投影类型、视见体及裁剪坐标。

Object → M → World → V → Eye → P → Clip → NDC → Screen

本章最重要的成果：把第四章的矩阵能力转化为完整可控的三维观察过程。

#sec-7-3

Exit Ticket

Exit Ticket · 两个概念判断

问题1：为什么透视投影中远处物体看起来更小？

提示：相似三角形、深度z与透视除法。

问题2：一块多边形完全在far之外，与它位于另一块多边形后面，有什么本质区别？

提示：视见体裁剪 vs 深度遮挡。

课后探究：同一几何场景中切换两种投影，截屏并用三句话解释视觉差异。