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


49

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

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

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

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


Насправді Адам вже розмістив вихідний код на шадертої. Ось посилання: shadertoy.com/view/ltXSDB
Феліпе Ліра

Ви мене схвилювали. Він опублікував тему "Безьє" на "шадертої", але не "текстурне поле"!
Алан Вулф

@AlanWolfe Я думаю, що він зробив лише для процедурно встановлених кривих Безьє. Я не впевнений, що необхідні зусилля, щоб інтегрувати це у вікно ttf render. Коли у мене з’явиться якийсь час, я погляну на це.
Феліпе Ліра

здається, у нього є якийсь чарівний соус збоку, який насправді зберігає та витягує відстані від текстури. Без текстури в грі, в прикладах шадертої відсутня та частина рівняння.
Алан Вулф

Трохи запізнюється на вечірку, але ця старша нитка від reddit має багато інформації про різні методи поліпшення чіткості відображення на основі SDF: reddit.com/r/gamedev/comments/2879jd/…
Necrolis

Відповіді:


7

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


Звичайно, я не маю всіх деталей, але мені здається, що ця людина просто використала поле псевдо відстані замість звичайного, що вже було продемонстровано в статті 2006 року Цином, Маккуалом і Капланом ". Векторні гліфи, що відображають текстуру в режимі реального часу ", на що також посилається у статті Valve. Це впливає лише на мітри обрисів і нічого не покращує зовнішній вигляд кутів. Я підозрюю, що це виглядає гостро, тому що він використовує непрактично великі текстури поля. Я, можливо, помиляюся.
Детророк

69

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 та монохромною.

введіть тут опис зображення


5
Чудова перша відповідь, ласкаво просимо до комп'ютерної графіки SE! :) Ваша дисертація є загальнодоступною? (Або це буде після того, як ви закінчите згаданий документ?) Якщо так, то, мабуть, буде дуже корисно і посилання на це.
Мартін Ендер

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

@Detheroc Будь ласка, повідомте тут і на gamedev Q, коли закінчите роботу зі статтею. Пояснення для мене ще не на 100% зрозумілі. Я б запропонував показати композицію поетапно на зображеннях.
Інженер

1
хотілося б, щоб ви могли повторити ваші поточні результати, навіть якщо вони не такі хороші, як ваші майбутні результати, +1, щоб поділитися будь-якими деталями, які ви можете. дуже захоплююче. Чи розглядали ви будь-яку методику застосування для проходження променів (відстеження сфери)? Текстури в обсязі чи подібні ...
Алан Вулф

4
Дисертація є загальнодоступною тут: dspace.cvut.cz/bitstream/handle/10467/62770/…
Ромен Гай

43

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

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

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

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

Багатоканальне поле відстані 16х16 Монохромне поле відстані 32х32


3

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


0

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

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

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.