主要结论

• NDC → 屏幕像素坐标，本质上就是一次 视口变换。
• 在 WebGL / OpenGL 中，NDC 的范围是：

  x ∈   y ∈   z ∈ 

• GPU 会把这个标准范围线性映射到你设置的视口矩形：

  gl.viewport;其实，

• 映射后得到的是窗口里的屏幕坐标。老实说，

先把整个链路串起来：

// 从顶点着色器输出到最终像素位置的大致流程：
gl_Position → 除法 → NDC → 视口变换 → 屏幕像素坐标

说到如果写成公式。

# clip space = gl_Position;怎么说呢，# ndc = clip.xyz / clip.w;# screen = viewportTransform;

使用者痛点：为什么要用 gl.viewport？它到底在做什么，说起来，

• 可以理解为：“我要把 NDC 标准区域画到屏幕上的哪个矩形区域。怎么说呢，”
• 说到例如。

// 把整个 NDC 区域映射到画布左下角开始、宽高为 canvas.width × canvas.height 的区域
gl.viewport;

从说明来看，

• NDC 整个标准区间被映射到画布左下角起点。
• w = canvas.width；不过，h = canvas.height。

NDC 到屏幕坐标的主要公式

• 说到设视口为，viewport =
  
• vx: 左下角 X 坐标。
• vy: 左下角 Y 坐标。
• vw: 宽度。
• vh: 高度。

说到主要映射公式，

# X轴:
screenX = vx + * vw / 2;# Y轴:
screenY = vy + * vh / 2;# Z轴:
screenZ = / 2;

主要关注 X 与 Y：

• - 当 x_ndc=-1 时 → screenX=vx 当 x_ndc=+1 时 → screenX=vx+vw。当 x_ndc=0 时 → screenX=vx+vw/2。老实说，同理适用于 y_ndc。话说回来，

注意 WebGL 的窗口坐标原点在左下而 DOM 在左上！

• 在 WebGL/OpenGL 中，是视口左下角；说起来，而浏览器事件、Canvas 2D 等常见的是左上角原点。要记得反向调整，

如果你想和 DOM 坐标对应，还需要再做一次转换：

# 将 WebGL 的 windowY 转成 DOM 原点：
domY_topLeft = canvasHeight - screenY;

完整数值例子

假设画布大小为：canvas.width=800，canvas.height=600；且设置了完整视口：gl.viewport。某个顶点的 NDC 为，按理说，下面一步步算出它在屏幕上的位置：

1. NDC→ScreenX:

Z 渲染深度：

最终窗口坐标是：。如果想要与浏览器鼠标事件对齐，用 domY_topLeft = 600 - 225   .

"横向在右边"。"纵向偏下的位置"——这正是看到图形时所期望的位置。若你手动计算得到完全相反，那么很可能是以下几种情况之一：

• 误把 NDC 范围当作而不是。
''
• 把 Y 转成 DOM 时忘记减去画布高度。'
• gl.viewport 设置错误，例如起始位置与宽高混乱。'
• 没有执行除法导致非线性失真。' '

'

再看几个边界点

**说明** 通过这些例子可以直观看出 NDC 的四个极值分别落在哪个屏幕位置，从而快速定位“为什么我的物体偏移了”。

---

Z 是怎么映射的？

screenZ = / ​‘;

• z_ndc 在 OpenGL 中也是
• 映射后进入 或者更常见的是 用于深度测试。

从举例来看，

NDC 点		>>>>
	=) ← 左下角.
	=) ← 右下角.
	=) ← 左上角.
	=) ← 右上角.
=) ← 中心.

z_ndc	depth
‑１	‑½
‑½	‑¼
‑⅔	?，?

如果你想让深度缓冲更符合浏览器标准，只需用上述 screenZ 映射即可。

---

为什么是线性映射？

• 效果已在 Clip -> NDC 步骤完成——那一步通过除以 w 实现了“远近变小”效果。
• NDC -> Screen 就只是平移、缩放，并不再做任何非线性操作。

这也是为什么很多人误以为“还有”——其实真正的只发生在前面两步。

---

从图形直观理解

想象一个标准正方形。宽高均为两单位，中心位于原点。另一幅图是实际像素矩形，它由 Canvas 或 Viewport 定义。说起来，当我们把前者拉伸并平移到后者时就是简单讲的“ViewPort Transform”。怎么说呢，

---

如果 Viewport 并不是整个画布？

假设 gl.viewport

html // NDC 中心会映射到小视口中心，而不是整个画布中心。

此时公式仍然相同，只是 vx。vy,vw,vh 不再全覆盖画布。

---

为什么这一步对光栅化很关键？

GPU 必须知道三角形顶点在 屏幕 上对应哪些像素，才能：

• 判断三角形覆盖了哪些片元
• 对片元做插值
• 执行片元着色器

Viewport Transform 是进入光栅化前最终定位步骤。

---

和鼠标坐标对照时怎么处理？

js canvas.addEventListener('click',e => { const mouseX = e.offsetX;const mouseY = e.offsetY;})，

WebGL 的窗口坐标基于左下原点，而浏览器事件基于左上原点：

js const glY = canvas.height - mouseY;// 若要转回 NDC： const ndcx = *2)-¹;const ndcy = /canvas.height)*)-¹;

这段代码正好对应之前给出的逆向公式。

---

从屏幕像素坐标反算回 NDC

已知 screenX,screenY 而且知道 Viewport 参数：

js const ndcx = /vw)*² -¹;const ndcy = /vh)*² -¹;

若 Viewport 等同于整个 Canvas，可简化为：

js ndcx =*２‑¹;话说回来，ndcy =/height *-¹;

这类逆推经常用于拾取、射线投射等功能。

---

初学者最容易混淆的五大陷阱

• A.NDC 并不是像素，而是一套标准化坐标系。
'
• B.NDC->Screen 是纯线性变换，不再包含效果。'
• C.WebGL 的窗口原点位于左下；老实说，DOM 常用的是左上，需要翻转 Y。D.gl.viewport 决定了最终落在哪块区域，一旦参数搞错就会出现物体偏移或裁剪异常。不过， '
• E.深度值也会经过类似映射。从变成 或其它深度范围， ' '

'

一句话

将NCD ↔︎ Screen Pixel Coordinates 转换。就是把 范围内的标准化坐标按 gl.viewport 所指定矩形做一次线性缩放和平移，并在必要时将 Y 翻转以匹配浏览器坐标程序。

最关键公式速记版

 …，…..，…，..…，…，…
，..…
，….，…，..
…，…，…，…，…，…，…，…....，…，....
…，…，…，…，…，…，…..
，…，..…..，…，.....…..
，…，.….，…，..............
…，…，...…，….
，…，…，…，…，….
，…，…，…，…，….
...etc...;...and so on...

---

---