LINUX.ORG.RU

Почему шакалит картинку

 , , ,


0

2

Вот скриншоты, там где похуже используется в вебе, получше открытая системным просмотрщиком картинки. https://dropmefiles.com/3mCXD Используется такой код

...
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, imageID);
        gl.uniform1i(u_SamplerID, numID);
...
Может ли это быть из-за того что происходит нормировка текстуры от 0 до 1 этим параметром CLAMP_TO_EDGE? Для сравнения вот часть кода на плюсах
...
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
	glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
	gluBuild2DMipmaps(GL_TEXTURE_2D, type, width, height, type, GL_UNSIGNED_BYTE, copyData);
...
В нем изображения не шакалятся, пробовал подставить эти четыре функции в веб версию, те картинки у которых длина и ширина не степень двойки - не отрисовываются. Что делать не знаю, все это выглядит ужасно, как в Дум 1 и 2


У тебя первая картинка отрисовывается скукуженная вхлам. Она такая же шакальная как и вторая, просто скукуженно шакальная. Всё хорошо =) Исправляй координаты рисования.

не отрисовываются

Вроде webgl требует степень двойки, выполни это требование и делов.

Может ли это быть из-за того что происходит нормировка текстуры от 0 до 1 этим параметром CLAMP_TO_EDGE?

Люба текстура обрабатывается в диапазоне 0…1 из значения которого, делается выборка текселя. Так что нет. Клампы это про то как рисовать текстуру за пределами данных текстуры, повторять последний тексель, повторять все последние тексели в обратном порядке, заливать цветом и так далее.

пробовал подставить эти четыре функции в веб версию

Можно их не подставлять, а просто выбросить и там и там, ничего не изменится с точки зрения качества изображения, сверху ты хочешь повторять последний пиксель при выходе рисования за границы данных текстуры, во втором ты хочешь при выходе за границы повторять изображение целиком. А режим фильтрации текстур везде по умолчанию и так LINEAR

Может где ошибаюсь. Но в целом как по мне у тебя тут проблем нет, всё отображается как и должно, и не отображается потому что не должно =)

Хочешь абсолютной чёткости, используй NEAREST фильтрацию

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 5)
Ответ на: комментарий от doomer

Исходную картинку покажи. Просмотрщики картинок тоже шакалят, потому что тоже могут использовать opengl и рисовать с LINEAR

Опять же, тут я подразумеваю что ты подразумеваешь под «шакалами» мыло. Так как судя по всему изначальная картинка шакальная, а ту просто добавляется к шакалам мыло из за линейной фильтрации и это бьёт в глаза потому что разрешение исходника маленькое, было бы большое не так бы бросалось в глаза.

Плюс ты ещё мипы генерируешь, возможно оно и не надо вообще, может ты в шейдере ещё мип выбираешь явно при рисовании, второй, третий и так далее тоесть 1/2 и 1/4 и так далее от изначального разрешения картинки.

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 3)
Ответ на: комментарий от doomer

Ну так, всё нормально. У тебя карта текстур, ты вырезаешь кусочек низкого разрешения и натягиваешь его на большее разрешение, или растягиваешь всю карту тексту со смещением по координате нужного изображения, не важно. Был бы pixel art было бы чуть проще с масштабированием, так как из за специфики построения изображения при масштабировании не так бы бросались в глаза искажения, но только с nearest. Но это не твой случай, у тебя стилистика «как есть»

Слева фильтрация NEAREST справа LINEAR либо «как есть» либо «усреднить по соседним текселям», либо чётко, либо мыло. Так и должно быть.

Тут либо стилистически это обойти, как например некоторые неказистую графику вывозят тем что наваливают на изображение помехи и прочие явные дефекты или в шейдере сделать unsharp. Либо поднимать разрешение, но не просто растягивая общую карту текстур, а именно что увеличивать детализацию входящих в карту изображений, либо просто то что есть отрисовывать с меньшим масштабированием, таким при которым внешний вид будет приемлем и терпим.

Разрешение карточной карты у тебя всего примерно 100 на 70 пикселей. Ну с линейной фильтрацией терпимо будет если на экране карта будет размером не более чем 200 на 140 пикселей.

Короче, всё у тебя сейчас так, как и должно быть. Может я ошибаюсь, но, я никаких проблем, технических не вижу. А шакалы у тебя есть, потому что они тут и должны быть.

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от LINUX-ORG-RU

Ну так изображение весит 4,5 мб и если его скачать и открыть в просмотрщике изображений, то увеличивая изображение получается нормально относительно как в посте ссылка на две картинки, не идеально, но все же лучше чем в канвасе

doomer
() автор топика
Ответ на: комментарий от doomer

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

Но судя по всему либо ширину с высотой при умножении для получения соотношения перепутал, либо область рисования растянут и сплющил. Короче эта сплющенная картинка тут вообще лишняя.

Ладно, мой вердикт, у тебя всё нормально. Просто ты чего-то другого.

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 2)

И в вебгл прям оригинал атласа в 4,5Мбайт грузится?

Нет, эти параметры отвечают за другое. Всё что про wrap это режимы повторения текстуры. Linear/nearest долго объяснять, но там должно чуть иначе шакалить. На скрине где шакалит как будто с Linear растянули картинку очень низкого разрешения.

neumond
()