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

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

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

在WebGL中，没有任何东西要求对世界进行3d建模、创建相机、设置灯光等。最后，渲染器只关注点、线和三角形，其4个坐标与

| w*x相关|
WebGL实际上是一个2D API，而不是3D API。这是什么意思

这意味着你应该停止听任何网站或人告诉你的。当人们说这种愚蠢的话时，最好不要理会它们，转而进行更合理的教程/信息/讨论

您当然可以使用纯二维术语的WebGL。可以将二维位置传递给顶点着色器。您可以完全关闭深度测试。等等但顶点着色器的输出是a，即使W为1，Z为0。因此，渲染系统将完成它通常对3D场景所做的所有3D数学运算

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

如果它们都是2D API，那么该语句就毫无意义。它将OpenGL/D3D与实际的“2D API”（如SDL和Direct2D）放在同一个级别上。然而，那些“2D API”根本无法进行3D渲染（或者说，如果没有实质性的痛苦的话）

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

从评论中：

最初写这篇“WebGL是2D”文章的人屈尊解释了他的推理，所以我将在这里阐述这些观点

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

你给了他们3D数据，其他什么都没有，他们给了你一个3D显示。OpenGLES2.0是一个2D api。您必须自己提供所有三维到二维的数学转换

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

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

顶点着色器的输出是4D齐次坐标。我猜这个论点是4D齐次坐标在某种程度上与2D坐标相同。尽管它显然不是，因为它有两个以上的组件，你对它们所做的各种数学运算是非常不同的

<> P>我会让你决定是否要考虑一个4D的齐次坐标与2D坐标相同。
相反，我将看看WebGL如何处理4D输出。是否将其转换为二维坐标？OpenGL规范说没有

摘自，第2.12节，对开本第44页：

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

剪辑坐标是由x，y，
z、 和w坐标（按该顺序）。如果顶点的剪辑坐标为：

（xc、yc、zc、wc）

然后顶点的标准化设备坐标为

（xd，yd，zd）=（xc/wc，yc/wc，zc/wc）

规范化设备坐标空间有3个组件。因此，它不是二维空间。但是以后的转换呢

根据同一规范第2.12.1节（对开本第44-45页）：

视口变换由视口的宽度和高度（分别以像素为单位px和py）及其中心（ox，oy）（也以像素为单位）确定。顶点的窗口坐标（xw，yw，zw）由

xw=（px/2）xd+ox

yw=（py/2）yd+oy

zw=（（f-n）/2）zd+（n+f）/2

所以是的，即使是窗口空间也是一个三维坐标系。窗口空间是OpenGL在其计算中使用的最终空间；窗口空间直接指向光栅化器。这就是渲染的内容

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

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

因此，根据他的定义，WebGL不是2D API

QED.
WebGL是一种Raseration API而不是3D API。您必须为其提供投影坐标。这在许多方面与画布没有什么不同。它只是更快。让我们比较一下

这是画布上的3D


常数立方=[
-1, -1, -1,
1, -1, -1,
1,  1, -1,
-1,  1, -1,
-1, -1,  1,
1, -1,  1,
1,  1,  1,
-1,  1,  1,
];
常数指数=[
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”）；
函数渲染（时间）{
时间*=0.001；
常数标度=2；
clearRect（0，0，canvas.width，canvas