Гострі кути з підписаними шрифтами полів відстані

Підпис Відстань Поле (СФД) , було представлено в якості швидкого вирішення для досягнення незалежної відтворення шрифтів дозволу від Valve в цій статті .

У мене вже є рішення Valve, але я хотів би зберегти різкість навколо кутів. Valve стверджує, що їх метод може досягти гострих кутів, використовуючи другий канал текстури ANDed з базовим, але йому не вистачає пояснення, як би генерувався цей другий канал.

Насправді в цій роботі залишилось багато деталей щодо впровадження.

Мені хотілося б знати, чи може хтось із вас вказати мені напрямок на отримання візуалізації шрифту SDF з різкими кутами.

Адам Сіммонс зробив цікаву роботу в цій галузі. Я не знаю конкретно, як він цього домагається, але його векторне відображення на основі SDF - це найгостріше, що я бачив на практиці поза Valve. http://twitter.com/adamjsimmons/status/611677036545863680

EDIT: Будь ласка, дивіться мою іншу відповідь з конкретним рішенням.

Цю точну проблему я вирішив понад рік тому для магістерської роботи. У статті Valve вони показують, що ви можете І два поля відстані, щоб досягти цього, що працює, поки у вас є лише один опуклий кут. Для увігнутих кутів вам також потрібна операція АБО. Цей хлопець фактично розробив якусь незрозумілу систему для перемикання між двома операціями за допомогою чотирьох каналів текстури.

Однак є набагато простіша операція, яка може полегшити І ІЛИ АБО, залежно від ситуації, і це головна ідея моєї тези: медіана трьох . Отже, ви використовуєте рівно три канали (ідеально підходять для RGB), які є повністю взаємозамінними, і комбінуєте їх за допомогою медіанної операції (виберіть середнє значення з трьох).

Для розміщення антизбудження ми працюємо не просто з булевими, а значеннями з плаваючою точкою, і операція AND стає мінімальною, а АБО стає максимумом двох значень. Медіана трьох може дійсно робити і те й інше: якщо a < b , for ( a , a , b ), медіана мінімальна, а для ( a , b , b ) - максимум.

Процес візуалізації все ще надзвичайно простий. Весь фрагмент шейдера, включаючи антизгладжування, може виглядати приблизно так:

int main() {
    // Bilinear sampling of the distance field
    vec3 s = texture2D(sdf, p).rgb;
    // Acquire the signed distance
    float d = median(s.r, s.g, s.b) - 0.5;
    // Weight between inside and outside (anti-aliasing)
    float w = clamp(d/fwidth(d) + 0.5, 0.0, 1.0);
    // Combining the background and foreground color
    gl_FragColor = mix(outsideColor, insideColor, w);
}

Тож єдиною відмінністю від оригінального методу є обчислення медіани відразу після відбору текстури. Вам доведеться реалізувати серединну функцію, яку можна виконати лише за 4 хв / макс операції .

Тепер, звичайно, питання полягає в тому, як я будую таке триканальне поле відстані?І це складна частина. Найбільш очевидним підходом, який я застосував на початку, було виконання декомпозиції вхідної форми / гліфу на три компоненти, а потім генерування звичайного відстані з кожного з них. Правила цього розкладання не такі складні. По-перше, область, що має щонайменше 2 із 3 каналів, знаходиться всередині. Тоді, якщо ви уявляєте це як кольорові канали RGB, опуклі кути повинні бути виготовлені з другорядного кольору, а два його основні компоненти продовжуються назовні. Увігнуті кути є зворотними: два вторинні кольори містять загальний основний колір, а клин між тим, де обидва краї продовжуються всередину, - білий. Я також виявив, що необхідні деякі накладки там, де інакше два основні або два вторинні кольори не торкаються, щоб уникнути артефактів (наприклад, у середньому штриху "N"

Наступне зображення - приклад декомпозиції, сформованої програмою з моєї дипломної роботи:

Однак цей підхід має деякі недоліки. Один з них полягає в тому, що спеціальні ефекти, такі як контури та тіні, більше не будуть працювати належним чином. На щастя, я також придумав другий, набагато більш елегантний метод, який генерує поля відстані безпосередньо і навіть підтримує всі графічні ефекти. Він також включений до моєї дипломної роботи, і так само вже більше року. Зараз я більше не збираюсь надавати більше деталей, тому що зараз пишу документ, який детально описує цю другу техніку, але опублікую її тут, як тільки вона закінчиться.

У всякому разі, ось приклад різниці в якості. Дозвіл текстури однаковий у кожного зображення, але лівий використовує звичайну текстуру, середній - звичайне поле відстані, а правий - моє триканальне поле відстані. Витрати на ефективність - це лише різниця між вибіркою текстури RGB та монохромною.

Вибачте за довге очікування, але стало очевидним, що хоча обіцяна мені стаття є в основному завершеною, процес публікації займе певний час. Тому я замість цього підготував програму з відкритим кодом із моїм новим алгоритмом побудови багатоканального дистанційного поля, msdfgen , який ви можете спробувати прямо зараз.

Він доступний на GitHub: https://github.com/Chlumsky/msdfgen

(Я новачок у цьому, тому, будь ласка, повідомте мене, чи є щось схоже на сховищі.)

Хтось також запитав про те, як воно порівнюється з більшим монохромним полем відстані, тому ось тизер різниці в якості. Однак це дійсно залежить від конкретного шрифту, і я б не сказав, що завжди варто зайвих даних.

Доволі цікаво! Я автор паперу, який підписує дистанційний папір. Вибачте, що детальна інформація про реалізацію дещо обмежена. Я включив лише два приклади каналу як майбутні роботи - у мене не було генератора. Я подумав, що щось на зразок створення високого sdf-формату, а потім сегментування на основі кута градієнта sdf було б розумною тактикою. Але так і не дійшло до цього. Будь-яка багатоканальна схема повинна бути зважена проти використання даних одноканального каналу більш високої роздільної здатності одного і того ж сліду пам’яті для коефіцієнтів збільшення, яке потрібно вашому додатку.

Я ні в якому разі не експерт з цього питання, але ви, можливо, зможете, принаймні теоретично, зберегти гострі кути в монохроматичній псевдо-SDF, якби ви використовували або двосторонній фільтр, спрямований бікубічний фільтр замість стандартного білінеарного фільтра. Окрім очевидної переваги збереження пам’яті, ви також можете мати кілька каналів для різнокольорових шифр SDF.

Крім того, якщо ви не заперечуєте за допомогою другого каналу, ви також можете спробувати мати один канал для горизонтальної відстані, а інший - для вертикальної відстані, і використовувати різницю енергетичної піраміди Лапласана (DoL) для стиснення текстури, щоб надмірна інформація не буде не записуються.

Третім і остаточним теоретичним рішенням буде експеримент із текстурою з гексагональної вибіркою за допомогою набору масивів.

На жаль, в даний час я не маю жодних засобів для тестування своїх ідей і не зміг знайти жодного документа, що описував би або тестував щось подібне до моїх ідей. Я зв’яжу всі відповідні статті, де я отримав свою інформацію / ідеї незабаром.