Войти
ПрограммированиеФорумГрафика

Дешевая векторная графика (billinear interpolation VG)

Страницы: 1 2 Следующая »
#0
22:04, 29 авг 2015

Внезапно мне в голову пришла идея, что можно очень легко реализовать векторную маску (т.е. текстуру в которой цвет либо белый либо черный) применяя биллинейную интерполяцию в шейдере.
Смысл такой. Берем квадрат задаем в его вершинах значение в диапазоне от 0 до 1, и выполняем биллинейную интерполяцию, по очень простой формуле из вики https://en.wikipedia.org/wiki/Bilinear_interpolation
т.е. такая формула:

vec2 xv = vec2(1 - fx, fx);
vec2 yv = vec2(1 - fy, fy);
        
float v = dot(xv, m * yv);

где fx, fy это координаты внутри квадрата, m это матрица 2*2 в которой хранятся значения в вершинах квадрата. Тогда v может принимать значение от 0 до 1, и пусть если оно меньше 0.5 то это цвет черный, в противном случае белый.

Т.е. фактически у нас может быть текстура, в которой в каждом пикселе закодированы эти 4 значения для углов пикселя, мы можем увеличить сильно картинку, и тогда каждый пиксель текстуры это будет как раз такой квадрат на экране, и в шейдере можно применить эту простую формулу и получить векторную картинку.
Осталось понять, а насколько хорошее качество можно получить? Очевидно, что внутрь пикселя много геометрии не засунуть, можно хорошо приблизить случаи, только когда в нем проходит как-то только одна граница раздела между черным и белым. Я сгенерировал все случаи для 8-битной текстуры, т.е. каждый пиксел задается 8 битами и каждая вершина пикселя - 2 битами, т.е. в каждой вершине может быть 4 разных значения, все 256 паттернов на рисунке:

+ Показать

Дальше я решил попробовать закодировать таким образом картинку. Взял круг

+ Показать

разбил его сеткой на 16*16 = 256 кусков и выбрал того набора для каждого куска самый лучший вариант, и получил такое:

+ Показать

Ну да, качество не очень, ну а что еще можно ожидать от 8 битной текстуры. Т.е. картинка эта это фактически текстура 16*16 пикселей, 8 бит на пиксел.
Давай-те повысим качество и будет тратить 16 бит на пиксел (4 бита на каждую вершину квадрата), тогда у нас будет уже 65536 разных векторных комбинаций для каждого пикселя, и он гораздо лучше приблизит исходное изображение.
Итак текстура 16*16 пиксел, 16 бит на пиксел после применения шейдера:

+ Показать


Исходный код:

+ Показать
#1
22:32, 29 авг 2015

это не векторная графика же а вариант процедурной компрессии)

#2
22:37, 29 авг 2015

А про signed distance field не слышал? В картинку 22x22 пикселя можно поместить букву, которую можно будет масштабировать как угодно без потери качества.

#3
22:47, 29 авг 2015

gammaker
Не слышал. Почитал, похоже что это примерно тоже самое. Только там будет видимо требоваться больше бит хранить чем у меня, но зато картинку можно будет не только увеличивать, но и уменьшать, и мипмаппинг даст при этом красивый результат.

#4
23:00, 29 авг 2015

ud1
эти усилия бы да в мирное русло...

#5
23:23, 29 авг 2015

ud1
> Только там будет видимо требоваться больше бит хранить чем у меня, но зато
> картинку можно будет не только увеличивать, но и уменьшать, и мипмаппинг даст
> при этом красивый результат.
У меня красивая ровненькая буковка влезает 22x22 пикселя с 8 бит на пиксель, а у тебя кривой круг занимает чуть больше. Правда наиболее красивой буковка становится при использовании бикубической фильтрации, но и без неё результат неплохой.

#6
23:56, 29 авг 2015

gammaker
> А про signed distance field не слышал?
Черт, как раз искал материал один по этой теме.
Была класная статья о том, как триангулировать Distance Field (в 3Д). Никто не видел такую?

#7
0:04, 30 авг 2015

-Eugene-
> Была класная статья о том, как триангулировать Distance Field (в 3Д). Никто не
> видел такую?
Нет, я только в 2D для текста SDF использую.

#8
0:48, 30 авг 2015

gammaker
> которую можно будет масштабировать как угодно без потери качества
зато с потерей острых углов

#9
10:42, 30 авг 2015

d.m.k
> зато с потерей острых углов
Ну и фиг с ними, главное чтобы хорошо выглядело.

#10
14:36, 30 авг 2015

d.m.k
> зато с потерей острых углов

Сохранить острые углы возможно, но для этого надо использовать уже два канала текстуры для хранения двух расстояний.
Improved Alpha-Tested Magnification for Vector Textures and Special Effects

#11
14:59, 30 авг 2015

ud1
Тебе надо параметризовать блоки и научиться искать наилучший набор словаря блоков при помощи подбора параметров на основе генетических алгоритмов.
Посмотри статью

CELLULAR AUTOMATA CODEBOOKS APPLIED TO COMPACT IMAGE COMPRESSION

Там они просто какие рандомные блоки искали, а у тебя будут параметризованные модели.
Может действительно хорошо сработать )

#12
22:54, 30 авг 2015

ZeroCool++
> Сохранить острые углы возможно, но для этого надо использовать уже два канала
> текстуры для хранения двух расстояний.
Как-то из текста не понятно что они кладут во второй канал, в том числе картинка в конце не похожа на AND операцию - она "больше" первой.

#13
0:01, 31 авг 2015

Идея плодотворна, но уже скоммунизжена: пыщ-пыщ.

#14
2:13, 31 авг 2015

Kashey
> Как-то из текста не понятно что они кладут во второй канал, в том числе
> картинка в конце не похожа на AND операцию - она "больше" первой.
Тоже не понял про второй канал.

Страницы: 1 2 Следующая »
ПрограммированиеФорумГрафика

Тема в архиве.