紋理化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事件，您也可以使用它來代替輪詢）。