Opengl es 如何在WebGL中在xy平面（z=0）上绘制二维形状？

我希望在WebGL中的xy平面z=0上绘制二维形状

我在看报纸

以下是我的drawScene函数：

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);
    mat4.translate(mvMatrix, [2.0, 5.0, -1.0]);

    mvPushMatrix();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);

        mvPopMatrix();
}

squareVertexPositionBuffer和squareVertexColorBuffer是对象的形状和颜色缓冲区

问题在于： mat4.perspective45，gl.viewportWidth/gl.viewportHeight，0.1100.0，pMatrix；和 mat4.translatemvMatrix[2.0,5.0，-1.0]

我希望在z=0平面上绘制对象。 所以当我把它改成 mat4.perspective45，gl.viewportWidth/gl.viewportHeight，0.0，100.0，pMatrix；和 mat4.translatemvMatrix[2.0,5.0,0.0]

屏幕上没有显示任何内容。 为什么会这样

---

另外，我们在WebGL中指定的数字是否以屏幕像素单位转换和存储缓冲区中形状的坐标？

这是因为mat4.perspective中的“近剪裁平面”第三个参数设置为0.1，这意味着前面的任何内容都将被剔除。

这是因为mat4.perspective中的near clipping plane第三个参数设置为0.1，这意味着前面的任何内容都将被剔除。

此外，如果要进行2D渲染器，可能应该禁用深度缓冲区测试。由于您可能希望依靠绘制顺序来确定可见性。

此外，如果您正在进行2D渲染器，则可能应该禁用深度缓冲区测试。因为您可能希望依靠绘制顺序来确定可见性。

如果要进行二维渲染，则不应使用三维数学。摆脱mat4库，做2D数学，所有2D问题都会消失

在WebGL中使用3D math for 2D可以说是OpenGL 1.0遗留下来的旧思想，现在不再是，也不应该被劝阻

这里有一系列文章介绍了如何进行二维计算，包括二维数学库

---

如果要进行二维渲染，则不应使用三维数学。摆脱mat4库，做2D数学，所有2D问题都会消失

在WebGL中使用3D math for 2D可以说是OpenGL 1.0遗留下来的旧思想，现在不再是，也不应该被劝阻

这里有一系列文章介绍了如何进行二维计算，包括二维数学库

---

在我开始回答主要部分之前，为了回答您问题的最后一部分，了解WebGL接收到的数字是如何在屏幕上变成颜色的可能会有所帮助。如果你不介意的话，我已经写了一个详细的答案

透视矩阵不能使用近平面深度0，因为这样做会产生除以0的结果，从而导致矩阵中的NaN值：

                     // fovy, aspect, znear, zfar
m = mat4.perspective(     45,      1,     0, 100);
//=> [NaN, 0, 0, 0, 0, NaN, 0, 0, NaN, NaN, -1, -1, 0, 0, 0, 0]

把近平面想象成照相机镜头的目镜。它离你的眼睛很近，但实际上它不在你的眼睛里，这就是接近0的平面意味着什么

然而，使用一个非零的近似值仅仅是答案的一半。你应该熟悉正交投影，它和透视法有点相反

透视意味着随着对象变得越来越远，它们似乎变得越来越小。这就是给你深度感的东西。使用正交投影矩阵，无论对象离相机有多远或多远，都会绘制相同大小的对象，这使得它们非常适合各种2D操作，即使在3D引擎（如绘制示波器镜头或HUD）中也是如此

值得注意的是，即使使用正交投影，也必须有近平面和远平面，并且对象必须仍然位于它们之间才能可见

大多数矩阵库都具有生成正交投影的功能，而实际使用创建的正交矩阵与使用透视矩阵是相同的。以下是使用gl矩阵实例化正交矩阵的示例：

大多数人对价值观到底应该是什么感到困惑。事实是，你可以使用任何你想要的价值观。如果希望将对象保持在单位空间中，则可以使用范围-1..1，这在将对象缩放到窗口大小时非常有用，或者可以使用画布的像素坐标，这有时对布局用户界面等非常有用。是的，您可以使用接近0的值

使用负的“近平面”值是可行的，但可能有点笨拙，因为从技术上讲，它意味着允许绘制摄影机后面的对象。在2D环境中，这可能不太重要。这样做有其用处，但并不常见

我不完全确定对象是否会在近平面或经过近平面时被剔除，因此在直接在近平面上使用值时应谨慎。为了安全起见，我尝试始终将“近平面”设置为比最近对象的距离至少近0.01

关于近距离值和远距离值的另一件事是：它们直接且显著地影响深度缓冲区的准确性。让它们尽可能靠近。显然，这在3D中更为重要，b 如果您正在执行伪2D场景，例如在层中相互偏移精灵，ut可以发挥作用

最后，关于在WebGL中进行2D图形的最后一点说明。有一些函数需要调用：

// Disable depth testing. This way, the last object drawn is always in "front".
// WebGL will not attempt to determine whether one object lies behind another.
gl.disable(gl.DEPTH_TEST);

// Alternatively, keep depth testing, but allow objects that share a plane with
// one another to overwrite each other. Your mileage may vary but the idea here
// is to be able to draw the scene in distinct layers, where objects in a given
// layer share the same plane but objects from one layer to the next can still
// take advantage of depth testing.
gl.depthFunc(gl.LEQUAL);

---

在我开始回答主要部分之前，为了回答您问题的最后一部分，了解WebGL接收到的数字是如何在屏幕上变成颜色的可能会有所帮助。如果你不介意的话，我已经写了一个详细的答案

透视矩阵不能使用近平面深度0，因为这样做会产生除以0的结果，从而导致矩阵中的NaN值：

                     // fovy, aspect, znear, zfar
m = mat4.perspective(     45,      1,     0, 100);
//=> [NaN, 0, 0, 0, 0, NaN, 0, 0, NaN, NaN, -1, -1, 0, 0, 0, 0]

把近平面想象成照相机镜头的目镜。它离你的眼睛很近，但实际上它不在你的眼睛里，这就是接近0的平面意味着什么

然而，使用一个非零的近似值仅仅是答案的一半。你应该熟悉正交投影，它和透视法有点相反

透视意味着随着对象变得越来越远，它们似乎变得越来越小。这就是给你深度感的东西。使用正交投影矩阵，无论对象离相机有多远或多远，都会绘制相同大小的对象，这使得它们非常适合各种2D操作，即使在3D引擎（如绘制示波器镜头或HUD）中也是如此

值得注意的是，即使使用正交投影，也必须有近平面和远平面，并且对象必须仍然位于它们之间才能可见

大多数矩阵库都具有生成正交投影的功能，而实际使用创建的正交矩阵与使用透视矩阵是相同的。以下是使用gl矩阵实例化正交矩阵的示例：

大多数人对价值观到底应该是什么感到困惑。事实是，你可以使用任何你想要的价值观。如果希望将对象保持在单位空间中，则可以使用范围-1..1，这在将对象缩放到窗口大小时非常有用，或者可以使用画布的像素坐标，这有时对布局用户界面等非常有用。是的，您可以使用接近0的值

使用负的“近平面”值是可行的，但可能有点笨拙，因为从技术上讲，它意味着允许绘制摄影机后面的对象。在2D环境中，这可能不太重要。这样做有其用处，但并不常见

我不完全确定对象是否会在近平面或经过近平面时被剔除，因此在直接在近平面上使用值时应谨慎。为了安全起见，我尝试始终将“近平面”设置为比最近对象的距离至少近0.01

关于近距离值和远距离值的另一件事是：它们直接且显著地影响深度缓冲区的准确性。让它们尽可能靠近。显然，这在3D中更为重要，但如果您正在制作一个伪2D场景，例如在层中相互偏移精灵，则这一点可以发挥作用

最后，关于在WebGL中进行2D图形的最后一点说明。有一些函数需要调用：

// Disable depth testing. This way, the last object drawn is always in "front".
// WebGL will not attempt to determine whether one object lies behind another.
gl.disable(gl.DEPTH_TEST);

// Alternatively, keep depth testing, but allow objects that share a plane with
// one another to overwrite each other. Your mileage may vary but the idea here
// is to be able to draw the scene in distinct layers, where objects in a given
// layer share the same plane but objects from one layer to the next can still
// take advantage of depth testing.
gl.depthFunc(gl.LEQUAL);

---

那我该怎么设置呢？当我将其设置为0.0并转换为0.0z轴时，它不会显示任何内容。这样行吗？我只想能够在z=0平面上绘制。您可能需要使用mat4.ortho设置2D绘制的场景。然后我应该将其设置为什么？当我将其设置为0.0并转换为0.0z轴时，它不会显示任何内容。这样行吗？我只想能够在z=0平面上绘制。您可能会想使用mat4.ortho设置2D绘制的场景。永远不要使用近似值0或负值。这肯定会破坏您的投影变换。通常在进行2D渲染时，您不会使用透视投影。开始了解OpenGL的转换管道，以获得更多信息。OpenGL的答案或任何好的教程都可能是一个起点。永远不要使用接近0的值或负值。这肯定会破坏您的投影变换。通常在进行2D渲染时，您不会使用透视投影。开始了解OpenGL的转换管道，以获得更多信息。OpenGL的答案或任何好的教程都可能是一个起点。