为什么说 WebGL 是 2D API，而不是 3D API？

Question

根据 HTML5 Rocks 的说法，WebGL 实际上是 2D API，而不是 3D API。 他们为什么这么说，这是什么意思？

我们可以在 WebGL 顶点着色器和片段着色器中指定 X、Y、Z 坐标。 我无法理解 2D 和 3D 图形 API 之间的区别。 你能解释为什么他们说这是一个 2D API？

Answer 1

WebGL 实际上是一个 2D API，而不是一个 3D API。 这是什么意思？

这意味着你应该停止听任何网站或人告诉你的。 当人们说这样愚蠢的事情时，最好忽略它们并转向更合理的教程/信息/讨论。

您当然可以在纯 2D 方面使用 WebGL。 您可以将 2D 位置传递给顶点着色器。 您可以完全关闭深度测试。 等等。 但是顶点着色器的输出是一个4D 齐次坐标，即使你的 W 是 1 并且你的 Z 是 0。所以渲染系统将执行它通常为 3D 场景所做的所有 3D 数学运算。

是的，光栅化基本上是一个 2D 过程，深度测试是一种“黑客”，可以去除隐藏的表面。 但是所有基于光栅化的渲染都是如此。 D3D、OpenGL、GLIDE 和每个软件光栅化器也将是这种逻​​辑的“2D API”。

如果所有这些都是 2D API，那么该声明就毫无意义。 它将 OpenGL/D3D 置于与 SDL 和 Direct2D 等实际“2D API”相同的级别。 然而，那些“2D API”根本无法进行 3D 渲染（或者不是没有实质性的痛苦）。

因此，该声明既在事实上不正确，又具有令人难以置信的误导性。 谁说这不值得你花时间或注意力。

来自评论：

最初编写此“WebGL 是 2D”内容的人已经屈尊解释了他的推理，因此我将在此处解决这些问题。

让我们使用他对 API 维度的定义。 他的确切报价是：

你给了他们 3D 数据，没有别的，他们给了你一个 3D 显示。 OpenGL ES 2.0 是一个 2D api。 您必须自己提供所有 3D 到 2D 数学转换。

由此，我们可以推断出“3D API”的意思是“‘你’将 3D 值输入其中以导致 3D 渲染发生的 API”。 类似地，“2D API”意味着“'你'将 2D 值输入其中以导致 2D 渲染发生的 API。”

让我们假设“你”不仅仅意味着从缓冲区对象中获取的值的维度。 “您”是指您可以直接控制的每一段代码，包括您的着色器。 好的。 所以“你”，对于 WebGL，在顶点着色器的末尾停止。 因此，WebGL 开始处理顶点着色器输出。

顶点着色器的输出是一个 4D 齐次坐标。 我猜这个论点是 4D 齐次坐标在某种程度上与 2D 坐标相同。 即使它显然不是，因为它还有 2 个组件，并且您对它们进行的各种数学运算非常不同。

我会让您决定是否要将 4D 齐次坐标视为与 2D 坐标相同。

相反，我将看看WebGL如何处理 4D 输出。 它是否将其转换为二维坐标？ OpenGL 规范说不。

来自OpenGL ES 2.0 ，第 2.12 节，作品集第 44 页：

顶点着色器执行产生一个顶点坐标gl_Position ，它被假定为在剪辑坐标中。 对剪辑坐标进行透视划分以生成标准化的设备坐标，然后进行视口转换以将这些坐标转换为窗口坐标（见图 2.4）。

剪辑坐标是由 x、y、z 和 w 坐标（按此顺序）组成的四维齐次向量。 如果顶点的剪辑坐标是：

(x _c , y _c , z _c , w _c )

那么顶点的归一化设备坐标是

(x _d , y _d , z _d ) = (x _c /w _c , y _c /w _c , z _c /w _c )

标准化设备坐标空间有 3 个分量。 因此它不是一个二维空间。 但是后来的转变呢？

好吧，来自同一规范的第 2.12.1 节（对开页 44-45）：

视口变换由视口的高度和宽度以像素为单位，对_X和P _Y，分别与它的中心（O _X，邻_Y）（也以像素为单位）来确定。 顶点的窗口坐标 (x _w , y _w , z _w ) 由下式给出

x _w = (p _x /2)x _d + o _x

y _w = (p _y /2)y _d + o _y

z _w = ((f - n)/2)z _d + (n + f)/2

所以是的，即使是窗口空间也是一个 3D 坐标系。 窗口空间是 OpenGL 在其计算中使用的最终空间； 窗口空间直接进入光栅化器。 这就是渲染出来的。

因此，根据 OpenGL ES 2.0 规范，在整个渲染管道中没有任何东西可以转换为纯2D 空间。

WebGL 是一个 API，您可以将 4D 齐次坐标输入其中。 WebGL 绝不会执行任何“3D 到 2D 数学转换”，用户也不会。 没有人在 WebGL 中的任何一点将任何内容转换为 2D 坐标。 2D 值不通过 2D 管道馈送； 4D 值通过 3D 管道馈送。

因此，按照他自己的定义，WebGL 不是 2D API。

QED。

Answer 2

在我看来（作为拥有 15 年以上 3D 图形经验的游戏开发人员），gman 将 WebGL 描述为 2D API 充其量是高度误导性的，我倾向于认为这是完全错误的。 Nicol Bolas 在他的回答中指出了大部分原因，但对我来说，关键是一旦你从 gman 在他的画布/WebGL 示例中使用的线框图形移动到纹理，就不可能获得正确渲染的 3D 场景如果 WebGL 没有在顶点着色器的输出中提供 z 和 w 信息，并且如果它在光栅化期间没有使用它们来获得透视正确的插值并使用 z 缓冲区执行隐藏表面去除，则三角形。

gman 真正想要表达的观点是，WebGL 不像旧的古老 3D 图形 API 那样是一个固定功能的 3D 图形 API，而是具有可编程管道。 然而，所有现代 3D 图形 API 都是如此（Direct3D 8、9、10、11；OpenGL 2.0 及更高版本；您可以在 PS3、PS4、Wii U 等控制台上找到的专有 API……）。 它们的工作方式基本相同：顶点着色器输出齐次坐标，光栅化器使用 z 和 w 信息正确插入投影到 2D 图像的 3D 三角形，并使用 z 缓冲区执行隐藏表面去除。 这与没有 z 和 w 坐标、没有透视校正插值的概念以及没有用于隐藏表面去除的 z 缓冲区的 2D API 非常不同。 要在像画布这样的 2D API 中正确渲染纹理三角形的 3D 场景，您需要自己在软件中实现所有这些。

[更新] 在他的一篇文章中， gman 或多或少交替使用“API”和“库”。 我认为这两个术语没有明确和完善的定义，但我认为对术语的不同理解可能会导致这里的一些分歧。

Khronos 描述了 WebGL：

WebGL™ 是一种为 Web 设计的即时模式 3D 渲染 API。

我认为这是一个准确的描述。 “API”的一个常用含义是定义的软件接口，用于访问底层硬件或操作系统服务，是指面向公众的软件接口，而不是任何特定实现。 从这个意义上说，所有旨在访问 3D 图形硬件的主流现代 API 都可以被视为低级“立即模式 3D 渲染 API”。 我将包括 OpenGL、OpenGL ES、WebGL、Direct3D 和在此类别中的控制台上找到的专有 API。

业界将所有这些称为“3D API”是正常的，因为它们旨在提供对主要功能是渲染 3D 图形的 GPU 的访问，并且它们公开了支持该功能的低级功能（透视正确插值和 z - 光栅化过程中基于缓冲区的隐藏表面去除、各向异性纹理过滤、某些情况下的细分硬件等）以及对 3D 管道的可编程部分（顶点、像素、几何着色器、外壳和域着色器等）进行编程的方法。 ）。

我倾向于认为“库”与“API”的含义略有不同。 像three.js这样的东西将自己描述为“库”而不是“API”：

Three.js 是一个使 WebGL - 浏览器中的 3D - 非常容易的库。 虽然原始 WebGL 中的简单立方体会生成数百行 Javascript 和着色器代码，但 Three.js 等价物只是其中的一小部分。

虽然这两个术语没有硬性和快速的定义，但我倾向于认为库更多地指的是功能的特定实现，并暗示可能比直接 API 更高级的辅助功能。

其他更高级别的 3D“库”可能将自己描述为“引擎”或“框架”，例如

OGRE（面向对象的图形渲染引擎）是一种以 C++ 编写的面向场景的灵活 3D 引擎，旨在使开发人员能够更轻松、更直观地使用硬件加速 3D 图形生成应用程序。

有一大堆功能不是旧式固定功能“API”的一部分，例如 2.0 之前的 OpenGL 或 DX8 DirectX 之前，但如果您只想渲染一些 3D 对象而不需要详细了解 3D 图形，则非常有用 - 例如场景图、加载和渲染带有附加材料的模型的功能、对灯光和阴影的高级支持等，但这并不是像 Direct3D 或 WebGL 这样的低级 3D“API”的目标。 这不是他们试图解决的问题。 我可以看到尝试将这一点传达给只想在浏览器中呈现一些 3D 对象的新手会有什么用处，但我不认为声称 WebGL 是“2D API”是一种有用或准确的方式来解决这个问题.

Answer 3

好吧，我不知道其他人如何 - 我倾向于接受 Kronos 在他们网站上所说的任何内容。 对我来说似乎很清楚。 ：耸耸肩：

WebGL™ 是一种为 Web 设计的即时模式 3D 渲染 API。 它源自 OpenGL® ES 2.0，并提供类似的渲染功能，但在 HTML 上下文中。 WebGL 被设计为 HTML Canvas 元素的渲染上下文。 HTML Canvas 为网页中的编程渲染提供了目的地，并允许使用不同的渲染 API 执行该渲染。 作为 Canvas 规范一部分描述的唯一此类接口是 2D 画布渲染上下文 CanvasRenderingContext2D。 本文档描述了另一个这样的接口，WebGLRenderingContext，它提供了 WebGL API。

https://www.khronos.org/registry/webgl/specs/1.0/

Answer 4

这是一个观点。

WebGL 没有强制要求在 3d 中建模世界，创建相机，设置灯光等。最后渲染器只关心点、线和三角形，它们的 4 个坐标与|w*x|<w, |w*y|<w, |w*z|<w. 此外，默认情况下，只能将两个坐标 x 和 y 传递给着色器，而框架设置 z=0 和 w=1。

也可以使用 opengl es 来绘制 2d 精灵，而无需担心设置一些投影矩阵。 可以省略 z 缓冲区和 z 坐标的处理，直到需要保持的点为止：|z*w| <= w 表示要渲染的任何内容。

但很明显，API 非常适合渲染 3D 模型并非巧合。

Answer 5

WebGL 是一个光栅 API 而不是 3D api。 您必须为其提供投影坐标。 这许多方面它与 Canvas 没有什么不同。 它只是更快。 我们比较一下。

这是 Canvas 中的 3D

 const cubeVertices = [ -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, ]; const indices = [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7, ]; const canvas = document.querySelector("#c"); const ctx = canvas.getContext("2d"); function render(time) { time *= 0.001; const scale = 2; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(canvas.width / scale, -canvas.height / scale); ctx.lineWidth = scale / canvas.width; ctx.strokeStyle = "black"; const fieldOfView = Math.PI * 0.25; const aspect = canvas.width / canvas.height; const projection = m4.perspective(fieldOfView, aspect, 1, 500); const radius = 5; const eye = [ Math.sin(time) * radius, 2, Math.cos(time) * radius]; const target = [0, 0, 0]; const up = [0, 1, 0]; const camera = m4.lookAt(eye, target, up); const view = m4.inverse(camera); const worldViewProjection = m4.multiply(projection, view); drawLines(cubeVertices, indices, worldViewProjection); ctx.restore(); requestAnimationFrame(render); } requestAnimationFrame(render); function drawLines(cubeVertices, indices, worldViewProjection) { ctx.beginPath(); // // transform points from 3D to 2D. // const points = []; for (let ii = 0; ii < cubeVertices.length; ii += 3) { points.push(m4.transformPoint( worldViewProjection, cubeVertices.slice(ii, ii + 3))); } for (let ii = 0; ii < indices.length; ii += 2) { var p0 = points[indices[ii + 0]]; var p1 = points[indices[ii + 1]]; ctx.moveTo(p0[0], p0[1]); ctx.lineTo(p1[0], p1[1]); } ctx.stroke(); }

 canvas { border: 1px solid red; }

 <!-- just a math lib --> <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script> <canvas id="c"></canvas>

这是 WebGL 中相同的 3D

 const cubeVertices = [ -1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, ]; const indices = [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7, ]; const canvas = document.querySelector('#c'); const gl = canvas.getContext('webgl'); const vs = ` attribute vec4 a_position; uniform mat4 u_worldViewProjection; void main() { // // transform points from 3D to 2D. // gl_Position = u_worldViewProjection * a_position; } `; const fs = ` void main() { gl_FragColor = vec4(0,0,0,1); } `; const program = webglUtils.createProgramFromSources( gl, [vs, fs]); gl.useProgram(program); const positionLoc = gl.getAttribLocation(program, "a_position"); const worldViewProjectionLoc = gl.getUniformLocation(program, "u_worldViewProjection"); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW); gl.enableVertexAttribArray(positionLoc); gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0); const buffer2 = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer2); gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); function render(time) { time *= 0.001; const scale = 4; const fieldOfView = Math.PI * 0.25; const aspect = canvas.width / canvas.height; const projection = m4.perspective(fieldOfView, aspect, 0.0001, 500); const radius = 5; const eye = [ Math.sin(time) * radius, 2, Math.cos(time) * radius]; const target = [0, 0, 0]; const up = [0, 1, 0]; const camera = m4.lookAt(eye, target, up); const view = m4.inverse(camera); const worldViewProjection = m4.multiply(projection, view); gl.uniformMatrix4fv( worldViewProjectionLoc, false, worldViewProjection); gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT, 0); requestAnimationFrame(render); } requestAnimationFrame(render);

 canvas { border: 1px solid red; }

 <!-- just a math lib --> <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script> <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script> <canvas id="c"></canvas>

Canvas 和 WebGL 之间的唯一区别是在 Canvas 中我在 JavaScript 中进行了投影，而在 WebGL 中我在着色器中进行了投影。 在这两种情况下，我编写的代码都进行了投影。

在 Canvas 版本中，代码是：

m4.transformPoint(
    worldViewProjection,
    cubeVertices.slice(ii, ii + 3));

在 WebGL 版本中，代码是：

gl_Position = u_worldViewProjection * a_position

API 本身只进行光栅化。 在任何一种情况下，我都必须提供投影代码。 WebGL 中没有任何东西可以做 3D。 只有一个光栅化 api 和 2 个函数，顶点着色器和片段着色器，都是用 GLSL 编写的，我必须提供它们运行得非常快，并包含一个数学库。 在这两种情况下，我仍然需要提供代码来对 API 进行 3D 处理。

WebGL **不是* 3D API

我认为指出这一点很重要。 有各种版本的 OpenGL。 1993 年的原始 OpenGL 是一个 3D api。 你给了它 3D 数据，你告诉它用什么颜色来制作东西，你告诉它各种灯光。 你给了它一个模型矩阵和一个投影矩阵，它为你绘制了 3D。

OpenGL ES 2.0 和 WebGL 摆脱了所有这些。 它们提供了光栅化 API 和着色器，让您可以对硬件进行编程。 但是由您来编写所有预测。 您必须从 3D 计算投影坐标。 你有计算光照方程、颜色和所有其他的。

这使得 WebGL 和 OpenGL ES 2.0 可以说比旧的固定函数 OpenGL 更难，但同时也使它们更加灵活。 如果您对进行所有这些转换和数学计算感到自在，或者如果您不介意学习它，那就跳进去去做吧。 如果您不习惯做所有事情，那么有很多 WebGL 3D 库可以为您完成。

对于那些声称 WebGL 是一个 3D 库的人，让我们尝试一个思想游戏。

这是一个物理库box2d.js 。 你给它形状、质量和力，它会为你计算物理。 如果它真的只是一个数学库，而你必须自己提供所有的物理方程，你还会称它为物理库吗？ 物理库必须提供物理知识，否则就不是物理库。 类似地，称为 3D 库的东西必须提供 3D 知识，否则它就不是 3D 库。

OpenGL 1.0 是一个 3D 库。 你给了它 3D 位置、顶点颜色、灯光，它会为你绘制 3D。 您不需要任何 3D 知识。 另一方面，WebGL 不提供任何 3D 知识。 你必须知道如何做 3D 投影，你必须知道如何采样纹理，你必须知道如何进行光照计算。 它不再是一个 3D 库，它只是一个光栅化 API。 称其为 3D 库是谎言，对那些真正寻找 3D 库（即提供 3D 的库）的人来说是一种伤害。

称它为 2D 库可能有点夸张，但称其为 3D 库是错误的。

这是关于它的另一篇文章。

Answer 6

哇，你的问题太棒了！ 你让所有这些大师像上次战斗一样战斗 Oo

好吧，也许您还想阅读具有 1 年 WebGL 经验并且几乎没有 OpenGL 编程技能的人的答案，所以让我们这样做吧！ :)

首先，我必须说一些我还没有在那里读过的东西，我觉得它很重要。 @gman 说：

API 提供了一个解决方案，因此您个人没有这些知识。

嗯，我真的不同意这个说法。 API 提供了一些解决方案，但这并不意味着您不需要这些知识。

现在回到你的问题，正如你所说：

我们可以在 webGL 顶点着色器和片段着色器中指定 x,y,z 坐标。 我无法理解 2D 和 3D 图形 API 之间的区别。

正如其他人所说，您可以在着色器中指定（我认为您甚至必须指定） gl_Position ，它是 4D 矢量。 之前，只有 javascript 和一些分离的 gpu。 然后出现带有新选项的 WebGL。 WebGL 本身没有为3D 行为提供任何解决方案，但它带来了在着色器中指定gl_Position选项。

我计算新的选择，而不仅仅是完整的解决方案。 所以我认为这个问题也是关于什么 API 真正适合你。 为我？ 在这种情况下，它带来了通过着色器制作 3D 应用程序的可能性。 所以它是3D API。

我希望它有帮助...