Texturing OpenGL/WebGL rectangle

Question

I have drawn a rectangle, which spins. Also I have set the texture for it, but it does look like very ugly (very low resolution).

The table of vertex for rectangle is the next:

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

This is the coordinates for the texture mapping the above rectangle:

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

The size of texture is 512x512 (it's too large!!!, so there mustn't be such problems with the size exactly).

The full source code locates here:

http://pastebin.com/qXJFNe1c

I clearly understand, that is my fault, but I don't get where exactly is the fault.

PS I think, that such a problem isn't related strongly to WebGL, I think that some pure OpenGL developers could give me a piece of advice also.

If you want to test it live, you may check it via:

http://goo.gl/YpXyPl

Answer 1

When testing, [.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, but it does render a texture at least, so maybe that's about something else.

Also the viewport seems to be 300 x 150. The canvas rendering width/height does not match the width/height within the html page. Try this:

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
    }
}

and in the a draw or update function (I doubt this would impact performance)...

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

The incorrect canvas size occurs because at the time webGLStart is called, the canvas is actually 300x150 for whatever reason. Either 1. You actually want a fixed size render target (give the canvas widht/height in pixels and all is well) or 2. you want it to take up the whole window, in which case the user may want to resize the window which needs to be handled (js probably has a resize event you could use too instead of polling).