按理说，

主要作用

• 投影矩阵把摄像机坐标系里的点变换到裁剪空间。
• 它决定的是“怎么看”里的最终一步规则。不是物体的位置，也不是相机朝向。
• 说到主要控制，
  • 视野范围
  • 近处和远处怎么显示
  • 是否有近大远小
  • 哪些点会被裁剪掉

在顶点着色器里通常是：

gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4;

先建立直觉

• 模型矩阵: 把物体从局部空间放到世界里。
• 视图矩阵: 把世界变到相机空间里。
• 投影矩阵: 把相机空间里的3D点压缩成适合屏幕显示的一套坐标。

You can think of projection matrix as “camera lens rules”. For same scene:

• A wide‑angle lens sees more.
• A telephoto lens sees less.
• The nearer objects appear larger.
• Poisons outside view frustum are not shown.

This is all controlled by projection matrix.

投影矩阵要解决什么问题？

在摄像机空间。一个点仍然是三维的，但屏幕最终是二维的。按理说，图形管线必须做两件事：

• deter which points fall inside visible space;老实说，
. . .

WebGL 常见两种投影方式

• 投影: 有近大远小；更符合人眼和相机，适合游戏、漫游、建筑可视化等场景。

正交投影: 没有近大远小，平行线保持平行；适用于 CAD、编辑器视图、UI 或需要精确尺寸对比的场景。

投影矩阵之后会发生什么？话说回来，

The vertex after applying projection matrix first enters clip space. Then GPU performs a critical step known as perspective division:

NDC = clip.xyz / clip.w

The resulting NDC usually range from on each axis in WebGL/OpenGL systems:

x: y: z:
// WebGL / OpenGL

An additional viewport transform maps this to actual screen pixels.

为什么投影会“近大远小”？

The intuition is that an object farr away appears smaller on screen.

This means x and y cannot be simple linear transforms;y must depend on depth z.

The core idea is:
x' ≈ x / z
y' ≈ y / z
This yields “farr → smaller” effect while closer → larger.

投影由哪些参数决定？

值越大，看到范围越广，感更强

值越小，像长焦镜头。看到范围更窄

常见值的观点是，

°°°

aspect画布宽高比

再看通常是，

const aspect = canvas.clientWidth / canvas.clientHeight;

如果这个值不对，画面会被拉伸

near近平面离相机最近的可见距离

小于这个距离的点会被裁剪掉 必须大于

far远平面离相机最远可见距离

超过这个距离的点会被裁剪掉

你可以把摄像机前方可见空间想成一个截头锥体，即“视锥体”。怎么说呢，再看这个视锥体。

近处有一个矩形面叫近平面

远处有一个更大的矩形面叫远平面

只有落在这两个面的内部才可能被显示。

投影矩阵也是定义这个可见范围。

#FOV# 和 #ASPECT# 如何影响渲染结果？#BOLD#

PROJECTIONMATRIX## 与 ##VIEWMATRIX## 的关系 #BOLD

错误示例的观点是，未更新 aspect

错误示例的观点是。 near <= 0

再看错误示例，near too small

错误示例这方面，far too large

js // ...初始化时使用默认参数... let fov = Math.PI /;// 错误，单位应为弧度而非角度 let aspect = canvas.clientWidth / canvas.clientHeight;let near = .01;// 小于等于零不可用 let far = Infinity;// 太大导致深度精度损失

用 THREE.js 渲染时如果你只想要一个简单效果，可以直接写：

js const camera = new THREE.PerspectiveCamera;按理说，camera.position.set;camera.lookAt);

或者你想手写代码，这样写也没问题：

js function perspective{ const f = Math.tan);const nf =，return new Float32Array( -1,...

对照 Three.js 与 WebGL 投影视角实现

Three.js 的 PerspectiveCamera 内部构造了类似上面的 perspective 函数。而 OrthographicCamera 则对应 orthographic。按理说，如果你习惯使用 three.js 的 API。它们最终都会维护一个 camera.projectionMatrix。只需把该属性传给 GLSL 就能得到一样效果。---

如何验证投影矩阵是否正确？

可以通过以下步骤检查： * 固定 modelMatrix 为单位矩阵；* 固定 viewMatrix 并让摄像头正对原点；* 用简单几何体测试不同 FOV、NEAR/FAR 参数；* 调整后观察渲染结果是否如预期。---

示例代码片段 — 创建投影矩阵函数：

js function perspective{ const f=Math.tan);const nf=，return new Float32Array*nf,-,*nf，]);}

示例代码片段 — 调用并上传至着色器：

js const fov=Math.PI/180*.7;说起来，const aspect=cavas.width/cavas.height;const near=.01;const far=.99999;let projMat=perspective;gl.uniformMatrix4fv;

示例代码片段 — 在顶点着色器中使用：

glsl vertexshader{ attribute vec3 aPosition;uniform mat4 uModelMat;uniform mat4 uViewMat;uniform mat4 iProjectionMat;void main{ glPosition=iProjectionMatuViewMatuModelMat*aPosition+vec4 };} -->