Как сохранить пропорции текстуры в WebGL?

Question

[ar5]

Здравствуйте, есть у меня маленько непонимание работы с webgl. Я пытаюсь загрузить картинку как текстуру в canvas. Но она не сохраняет пропорции и имеет какие-то непропорциональные размеры. Попытки поменять различные параметры ни к чему толковому не привели. И как я понял, что текстуры должны быть квадратные, а что если нет? Как мне поместить текстуру в canvas сохраняя пропорции?
Пример
https://codepen.io/anon/pen/QZYboL

Answer 1

[GreatRash]

Судя вот по этому примеру текстура обязана иметь размеры степени двойки (2, 4, 8, 16, 32, 64 и т.д.). Если она не соответствует этим размерам, то используется параметр CLAMP_TO_EDGE, который растягивает/обрезает картинку до ближайшего подходящего размера.

Опять же на StackOverflow пишут, что если браузер поддерживает WebGL 2.0, то там т.н. NPOT-текстуры должны поддерживаться без проблем - пруф.

Comments

[ar5]

Спасибо, Даа до этого я тоже дошел, но нужно ограничиться средствами WebGL 1

Answer 2

[svaa1982]

После того как тестура загружена, её наложение контролируется шейдером, а не исходными размерами и пропорциями. В шейдере имеются так называемые UV координаты, они должны быть одинаковы по ширине и высоте, чтобы картинка была квадратной.