webGL

深度测试 前面的专题里，我们已经讲过： 裁剪 透视除法 NDC 视口变换 光栅化 裁切测试 模板测试 这一篇终于来到 3D 渲染里一个真正绕不开的主题： 如果你刚接触 WebGL，几乎一定遇到过这些问

圆形遮罩 先别背 API 如果你是第一次学模板测试，我建议先不要急着记： gl.colorMask gl.stencilMask gl.stencilFunc gl.stencilOp 因为一上来就

裁切测试 前面的专题里，我们已经一路讲过： 裁剪，Clipping 透视除法 NDC 视口变换 光栅化 到了这里，很多人会在 WebGL API 里又看到一个名字很像的东西： 这时候就很容易懵： 这个

核心定义 光栅化，Rasterization，就是把“几何图元”变成“屏幕上的片元”的过程。 更直白一点说： 前面阶段处理的是点、线、三角形这种几何对象 光栅化处理的是“这个三角形到底覆盖了哪些屏幕位

--- theme: v-green highlight: vs2015 --- # 核心结论 - `NDC` 变成屏幕像素坐标，本质上就是做一次`视口变换`，`Viewport Transform

核心定义 NDC，Normalized Device Coordinates，中文一般叫标准化设备坐标。 它是 GPU 在裁剪空间之后、屏幕坐标之前的一个中间坐标空间。 你可以把它理解成：GPU 把所

裁剪到底在裁什么 学 WebGL 3D 的时候，很多人都会反复看到一个词： 裁剪。 教程里经常会说： 顶点先进入裁剪空间 GPU 会做裁剪 裁剪之后再做透视除法 但很多人其实并没有真正搞明白： 裁剪到

核心结论 计算出 gl_FragColor 之后，并不代表这个颜色一定会显示到屏幕上。 GPU 后面还会经过一串逐片元操作，Per-Fragment Operations，只有通过这些步骤，这个片元才

核心流程 GPU 后续会继续走完整的图形管线，大致顺序是： 图元装配 裁剪 透视除法 视口变换 光栅化 片元着色 各种测试与混合 写入帧缓冲 如果把它串成一句话，就是： 1. 图元装配 顶点着色器是“

核心作用 投影矩阵，Projection Matrix，作用是把摄像机坐标系里的点，变换到裁剪空间。 它决定的是“怎么看”里的最后一步规则，不是物体的位置，也不是相机朝向。 它主要控制这几件事： 视野

核心定义 视图矩阵，View Matrix，作用是把顶点从世界坐标系变换到摄像机坐标系。 它回答的问题不是“物体在哪”，而是“从摄像机视角看，这个世界是什么样子”。 在 WebGL 顶点着色器里，常见

核心定义 模型矩阵，Model Matrix，作用是把模型的顶点从局部坐标系变换到世界坐标系。 它回答的是 3 个问题：物体放在哪里、朝向哪里、有多大。 在 WebGL 顶点着色器里，常见写法是： 这

从 WebGL 的渲染链路来拆解矩阵：先解释它是什么、为什么必须有，再把模型矩阵、视图矩阵、投影矩阵和它们的相乘顺序串起来。 核心概念 在 WebGL 里，矩阵可以理解成一种“批量描述空间变换的表格”

无框架原生 WebGL 入门：从平面点阵到可旋转的 3D 点云 前 7 篇我们一直在逐步扩展 WebGL 的基础能力： 画出第一个点 把位置传给 GPU 把颜色传给 GPU 用 uniform 传共享

无框架原生 WebGL 入门：点击画布动态添加点 前六篇我们一直在做一件事： 先把一组准备好的数据交给 GPU，再一次性绘制出来。 这条路线非常适合入门，因为你可以先把 WebGL 最核心的几个知识点

无框架原生 WebGL 入门：让每个点拥有不同的大小 上一篇我们已经从“画一个点”正式进入了“批量绘制多个点”的阶段。 当时我们已经能做到： 一次传入多个顶点位置 一次传入多组顶点颜色 用一次 dra

无框架原生 WebGL 入门：一次绘制多个点 上一篇我们已经完成了一件非常关键的事： 用 uniform 从 JavaScript 控制点大小。 到第四篇为止，这个小系列已经把 WebGL 初学阶段最

无框架原生 WebGL 入门：用 uniform 从 JavaScript 控制点大小 上一篇我们已经把颜色从 JavaScript 传进了着色器，并建立起了这样一条完整链路： 到那一步，我们已经接触

无框架原生 WebGL 入门：把颜色从 JavaScript 传进着色器 上一篇我们已经完成了一件很关键的事： 把点的位置从 JavaScript 传给了 GPU。 当时我们第一次建立起了这条数据通路

无框架原生 WebGL 入门：把点坐标从 JavaScript 传给 GPU 上一篇我们完成了 WebGL 的第一个最小闭环：在屏幕中间绘制一个红色点。 那一篇有一个非常重要的特点：点的位置是直接写死