Javascript WebGL未在规范化坐标内绘制？

我写了一个简单的WebGL页面（好吧，尽我所能的简单），但不明白为什么规范化坐标不起作用。也就是说，我试图通过两个三角形从（-0.5，-0.5）到（0.5，0.5）绘制一个正方形，取而代之的是一个大矩形，它离开了屏幕

我完全不确定我做错了什么，所以我将其粘贴到JSFIDLE中：

注意我是如何正确定义顶点和索引的（对吗？），我的着色器和片段程序就这么简单

---

为什么它会画成一个奇怪的大屏幕外矩形？

好吧，我终于从Freenode上的#webgl中得到了帮助：

元素需要一个宽度和高度属性，而我是通过CSS设置它们的。显然，实际的宽度和高度属性决定了OpenGL缓冲区的宽度和高度

---

除了WebGL示例在画布标记上具有“宽度”和“高度”属性外，我在其他任何地方都找不到该文档。

与其他元素一样，显示的内容的大小与它的大小是分开的。示例：

将4x4 JPGs显示为4x4像素

<img src="some4x4pixel.jpg" />

 <canvas width="4" height="4"></canvas>

如果希望画布的大小与其显示的大小相同，请使用

 canvas.width = canvas.clientWidth;
 canvas.height = canvas.clientHeight;

尽管需要注意，WebGL画布的大小不一定是您要求的大小，因为各种GPU对大小都有限制。如果你想知道你实际得到的尺寸和你要求的尺寸，请检查

 gl.drawingBufferWidth
 gl.drawingBufferHeight

对于大多数3D应用程序使用的透视矩阵，画布的实际大小并不重要。对于某些类型的效果或2D效果，它通常很重要

很难找到文档的原因是，人们理所当然地知道CSS决定所有元素的显示大小，而不管它们的内容的实际大小

---

是的，这是一种特别不幸的怪异现象，它影响到WebGL和Canvas 2D。然而，它有一点可取之处。由于这个怪癖，你可以创建一个画布，比如说800x600，并使用CSS使其填充屏幕。这就迫使浏览器进行高档次的升级，这反过来又为质量折衷提供了更快的性能。这是一个不错的选择，尤其是当你开始谈论移动设备时。我很高兴你找到了答案。尽管有大量的文档记录，但它与其他HTML标记一样。图像标签、画布标签、视频标签的行为都是一样的。CSS决定要显示的大小，其他因素决定源的大小。对于图像，它是您下载的图像，对于视频，它是您参考的视频。对于画布，它是您指定的宽度/高度。@gman“广泛记录”在哪里？另外，我不知道视频标签，但是对于图像标签，CSS和属性具有相同的效果。无论哪种方式，从服务器加载图像并在客户端进行缩放（不能是任何其他方式），两者都执行相同的操作。另见。

 <canvas></canvas>

 <canvas width="4" height="4"></canvas>

 <canvas width="4" height="4" style="width:16px; height:16px;"/></canvas>

 <canvas width="4" height="4" style="width:100%; height:100%;"/></canvas>

 // 45degrees, assumes math library uses radians
 var fieldOfView = Math.PI / 4;  

 // Use the size the canvas is displayed, NOT the size it actually is.
 var aspectRatio = canvas.clientWidth / canvas.clientHeight;

 var zNear = 0.1;
 var zFar = 1000;

 var matrix = someMathLibrary.perspective(fieldOfView, aspectRatio, zNear, zFar, ...)

 canvas.width = canvas.clientWidth;
 canvas.height = canvas.clientHeight;

 gl.drawingBufferWidth
 gl.drawingBufferHeight