WebGL未在规范化坐标内绘制

WebGL not drawing within normalized coords?

本文关键字：绘制 坐标 规范化 WebGL      更新时间：2023-09-26

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

我完全不确定自己做错了什么，所以我把它粘贴到jsFiddle:中

链接

注意我是如何正确定义vert和索引的（对吧？），我的着色器和片段程序也很简单。

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

好吧，我终于得到了Freenode上#webgl中某个人的帮助：<canvas>元素需要宽度和高度属性，而我通过CSS设置它们。显然，实际宽度和高度属性决定了OpenGL缓冲区的宽度和高度。

除了WebGL示例在画布标记上有width和height属性外，我在其他任何地方都找不到这篇文档。

与其他元素一样，显示的大小与实际大小是分开的。示例：

将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决定了所有元素的显示大小，而不管它们内容的实际大小。

https://www.google.com/webhp?sourceid=chrome-即时&ix＝海&ie=UTF-8&离子=1#患者=psy ab&hl=en&site=webhp&source=hp&q=画布%20size%20css&pbx=1&oq=&aq=&aqi＝&aql=&gs_sm＝&gs_upl=&fp＝f131b50fb368d7bf&ix＝海&离子=1&bav=on.2，或.r.gc.r_pw.r.cp.，cf.osb&biw＝1629&bih=931

相关文章：