Текстурирование прямоугольника 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, но это делают текстуру по крайней мере, так, может быть, о чем-то еще.

Кроме того, окно просмотра кажется 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, вероятно, имеет событие изменения размера, которое вы могли бы использовать вместо опроса).