纹理化OpenGL / WebGL矩形

Question

我画了一个旋转的矩形。 我也为其设置了纹理，但是它看起来确实很丑陋（非常低的分辨率）。

矩形的顶点表是下一个：

1.0,  1.0,  0.0,
-1.0,  1.0,  0.0,
1.0, -1.0,  0.0,
-1.0, -1.0,  0.0

这是上面矩形绘制纹理的坐标：

0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,

纹理的尺寸为512x512（太大！！！因此，尺寸一定不会出现此类问题）。

完整的源代码位于：

http://pastebin.com/qXJFNe1c

我清楚地知道，那是我的错，但是我不知道问题到底出在哪里。

PS：我认为，这种问题与WebGL无关，我认为某些纯OpenGL开发人员也可以给我一些建议。

如果要实时测试，可以通过以下方法进行检查：

http://goo.gl/YpXyPl

Answer 1

测试时， [.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 77.246.234.123:8893/plane/:1 [.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 77.246.234.123:8893/plane/:1 ，但是它至少渲染了纹理，所以也许是其他原因。

此外，视口似乎是300 x150。画布渲染的宽度/高度与html页面中的宽度/高度不匹配。 尝试这个：

function updateCanvasSize(canvas)
{
    if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight)
    {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
        //might want to update the projection matrix to fix the new aspect ratio too
    }
}

并在绘图或更新功能中（我怀疑这会影响性能）...

var canvas = document.getElementById("canvas-main"); //or store "canvas" globally
updateCanvasSize(canvas);

出现错误的画布大小是因为在调用webGLStart时，无论出于何种原因，画布实际上是300x150。 1.您实际上想要一个固定大小的渲染目标（以像素为单位的画布宽度/高度，并且一切都很好），或者2.您希望它占据整个窗口，在这种情况下，用户可能希望调整窗口的大小，需要处理（js可能有一个resize事件，您也可以使用它来代替轮询）。