我写了一个简单的WebGL页面（好吧，尽可能简单）并且无法弄清楚为什么规范化坐标不起作用。也就是说，我试图通过两个三角形从（-0.5，-0.5）到（0.5,0.5）绘制一个正方形，而是得到一个离开屏幕的大矩形。
我完全不确定我做错了什么，所以我将它粘贴到了一个jsFiddle：
注意我是如何正确定义顶点和索引的（右边？），我的着色器和片段程序就像它们一样简单。
为什么它是一个奇怪的大型屏幕外矩形？
答案 0 :(得分：2)
好的，我终于得到了Freenode上#webgl中某人的帮助：<canvas>元素需要一个width和height属性，而我是通过CSS设置的。显然，实际的宽度和高度属性决定了OpenGL缓冲区的宽度和高度。
我无法在其他任何地方找到此文档，除了WebGL示例在canvas标记上具有width和height属性。
答案 1 :(得分：0)
与其他元素相同，显示的大小与其大小不同。例子：
将4x4 JPG显示为4x4像素
<img src="some4x4pixel.jpg" />
以16x16像素显示4x4 JPG
<img src="some4x4pixel.jpg" width="16" height="16" />
以16x16像素显示4x4 JPG
<img src="some4x4pixel.jpg" style="width:16px; height:16px;"/>
以容器的大小
显示4x4 JPG<img src="some4x4pixel.jpg" style="width:100%; height:100%;"/>
以300x150像素显示300x150像素画布（默认大小）
<canvas></canvas>
以4x4像素显示4x4画布
<canvas width="4" height="4"></canvas>
以16x16像素显示4x4画布
<canvas width="4" height="4" style="width:16px; height:16px;"/></canvas>
以容器的大小
显示4x4画布 <canvas width="4" height="4" style="width:100%; height:100%;"/></canvas>
如果您正在使用3D并使用大多数3D数学库中常见的透视功能，您通常需要将宽高比设置为显示尺寸，而不是实际尺寸。
// 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;
虽然请注意，WebGL画布不需要是您请求的大小，因为各种GPU都有大小限制。如果你想知道你实际获得的大小与你要求的大小相关，请检查
gl.drawingBufferWidth
gl.drawingBufferHeight
对于大多数3D应用程序使用的透视矩阵，画布的实际大小并不重要。对于某些类型的效果或对于2D，它通常很重要。
难以找到文档的原因是因为人们知道CSS决定所有元素的显示大小而不管其内容的实际大小，这是理所当然的。