WebGL 顶点空间坐标

Question

我尝试在 webgl 中绘制一个简单的矩形（我像使用 2d api 一样使用 webgl）。这个想法是发送属性（点），并在顶点着色器中转换它们以适应屏幕。但是当我使用顶点着色器渲染时： gl_Position = vec4( a_point, 0.0, 1.0 ); 我什么也没看到。我看到了 WebGL Fundamentals for 2d webgl，它似乎在我的电脑上不起作用。有矩形，但我认为它们不是很好的坐标！

你能解释一下如何在特殊坐标系中绘制矩形吗：

-width/2 < x < 宽度/2
-height/2 < y < 高度/2

然后在顶点着色器中将它们转换为在每个浏览器（chrome、firefox、internet explorer 11）中具有相同的位置。看起来很简单，但我还没有达到我的目标。我试图在顶点着色器也是。也许我可以使用视口？

Answer 1

在 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 Universe 中的半宽和半高。要将这个对象的中心定位到画布的中心，您需要设置顶点数据，如：

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
}

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