Текстурирование прямоугольника OpenGL/WebGL

Я нарисовал прямоугольник, который вращается. Также я установил для него текстуру, но она выглядит очень некрасиво (очень низкое разрешение).

Таблица вершин для прямоугольника следующая:

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


coordinates texture-mapping webgl opengl-es vertex
person Community    schedule 18.09.2013    source источник
comment
попробуйте: gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); но могут быть и другие проблемы...   -  person fen    schedule 18.09.2013

Ответы (1)


arrow_upward
2
arrow_downward

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

person jozxyqk    schedule 18.09.2013
comment
нет, текстура 77.246.234.123:8893/plane/moscow.jpg 512x512, поэтому он имеет степень двойки (A & (A-1) == 0), также холст не имеет точного размера (в CSS он установлен на 100% как для ширины, так и для высоты) - person ; 18.09.2013
comment
да, холст имеет больший размер в html, но разрешение рендеринга webgl не то же самое (он отображается в более низком разрешении и масштабируется). Я проверил это, взломав вашу функцию рисования и просмотрев значения, переданные в gl.viewport. - person jozxyqk; 18.09.2013
comment
я правда не понимаю, как это может быть 300x150 (и если да, то почему вообще работает процесс рендеринга?), спасибо за предложение кода, я попробую, а потом расскажу о результатах - person ; 18.09.2013
comment
вы очень хорошо мне помогли, спасибо за фантастический ответ :) Я хочу задать еще один вопрос, в обновленной версии вы можете видеть, что у меня текстура кривая... почему это может быть? - person ; 18.09.2013
comment
Похоже, координаты текстуры не совпадают. Попробуйте поменять местами два последних. - person jozxyqk; 18.09.2013
comment
спасибо :) теперь буду читать больше об opengl/webgl :) еще раз спасибо - person ; 18.09.2013