1

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

矩形的顶点表如下：

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

4

1 回答 1

2

在测试时，[.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. 您实际上想要一个固定大小的渲染目标（以像素为单位提供画布宽度/高度，一切都很好）或 2. 您希望它占据整个窗口，在这种情况下，用户可能想要调整窗口大小需要处理（js 可能有一个 resize 事件，你也可以使用它来代替轮询）。

于 2013-09-18T11:00:26.610 回答