WebGL顶点空间坐标

Question

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

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

-width / 2＆lt; x＆lt;宽度/ 2
-height / 2＆lt; y＆lt;高度/ 2

然后在顶点着色器中将它们转换为在每个浏览器中具有相同的位置（chrome，firefox，Internet explorer 11.这似乎很简单，但我没有达到目标。我试图对其进行转换顶点着色器中的顶点。也许我可以使用视口？

Answer 1

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

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

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

如果您想拥有特定像素大小的对象，可以像这样预先计算：

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
}

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

Answer 2

请看一下这篇文章：

http://games.greggman.com/game/webgl-fundamentals/

它展示了如何使用WebGL进行2D绘图。

我想你可以很容易地调整它以满足你对自定义2d空间坐标的需求。