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，但它确实至少渲染了一个纹理，所以也许这是关于别的东西。

视口似乎也是300 x 150.画布渲染宽度/高度与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.你实际上想要一个固定大小的渲染目标（给画布widht / height以像素为单位，一切都很好）或2.你希望它占据整个窗口，在这种情况下用户可能想要调整窗口的大小需要处理（js可能还有一个你可以使用的调整大小事件，而不是轮询）。

纹理OpenGL / WebGL矩形

1 个答案: