Javascript 顶点空间坐标

我尝试在webgl中绘制一个简单的矩形（我像使用2d api一样使用webgl）。其思想是发送属性（点），并在顶点着色器中变换它们以适合屏幕。但是当我使用顶点着色器进行渲染时：gl_Position=vec4（a_点，0.0，1.0）；我什么也没看到。我看到了2d WebGL的WebGL基础知识，但它在我的计算机上似乎不起作用。有矩形，但我认为它们不在好的坐标上

你能给我解释一下如何在特殊坐标系下画一个矩形吗

-宽度/2 -高度/2

---

然后在顶点着色器中对它们进行变换，使它们在每个浏览器（chrome、firefox、internet explorer 11）中具有相同的位置。这看起来很简单，但我还没有达到我的目标。我也尝试在顶点着色器中对顶点进行变换。也许我可以使用viewport？

请看这篇文章：

它展示了如何使用WebGL进行二维绘图

---

我想您可以很容易地对其进行调整，以满足自定义2d空间坐标的需要。

在WebGL中，所有坐标都在-1.00f（f=float）到+1.00f范围内。它们自动表示您获得的画布宽度和高度。默认情况下，您在WebGL中不使用绝对像素数

如果将顶点（点）设置为x=0.00和y=0.00，它将位于屏幕的中心。如果其中一个坐标低于-1或高于+1，它将位于渲染画布之外，并且三角形中的一些像素甚至不会传递给片段着色器（片段=帧缓冲区的一个像素）

这样可以确保所有对象都具有相同的相对位置和大小，无论画布有多少像素

如果希望对象具有特定像素大小，可以按如下方式进行预计算：

var objectWidth = OBJECT_WIDTH_IN_PIXEL / CANVAS_WIDTH; 
var objectHeight = OBJECT_HEIGHT_IN_PIXEL / CANVAS_HEIGHT; 

在某些情况下，如下面所示，最好知道浮点-1.00到+1.00宇宙中的半宽和半高。要将此对象的中心定位到画布的中心，需要设置顶点数据，如下所示：

GLfloat vVertices[] = {
    -(objectWidth/2.0),  -(objectHeight/2.0), 0.0,  // Point 1, Triangle 1
    +(objectWidth/2.0),  -(objectHeight/2.0), 0.0,  // Point 2, Triangle 1
    -(objectWidth/2.0),  +(objectHeight/2.0), 0.0,  // Point 3, Triangle 1

    -(objectWidth/2.0),  +(objectHeight/2.0), 0.0,  // Point 4, Triangle 2
    +(objectWidth/2.0),  -(objectHeight/2.0), 0.0,  // Point 5, Triangle 2
    +(objectWidth/2.0),  +(objectHeight/2.0), 0.0   // Point 6, Triangle 2
}

---

上面的顶点数据设置了两个三角形，以便在屏幕中心创建一个矩形。其中许多内容可以在教程中找到，如。

谢谢您的回答。我找到了问题所在。在调用canvas.getContext（“webgl”）后，我定义了画布的大小我不知道这是不是一个bug？我发现每次调整大小时，我们都必须调用viewport，它可以工作！