Study - dev, blog archive, adobe pixel bender

Adobe Pixel Bender. Новий рівень в обробці зображень для flash

Програма для Pixel Bender зберігається як файл з розширенням "pbk", потім ці файли можуть бути або безпосередньо завантажені в середу Adobe Photoshop CS або Adobe After Effects CS. Або ви можете виконати компіляцію kernel-програми в файл "pbj", який може бути завантажений і виконаний середовищем виконання flashplayer. Тут є важливий момент: якщо ми створюємо додаток саме для виконання в середовищі flashplayer, то нам буде доступна не вся функціональність мови Pixel Bender Kernel. А також буде повністю відсутня підтримка мови Graph Language (детальний перелік цих обмежень також можна знайти в довідці йде разом Pixel Bender Toolkit). Тепер я наведу заготовки програми на Pixel Bender Kernel. Цю заготовку ви можете отримати в будь-який момент часу, якщо виберіть пункт меню "File -> New Kernel":






Користуватися такими векторними типами даних дуже зручно, тому що всі арифметичні операції "перевантажені" і вміють множити, ділити і складати вектори один з одним. Тут же варто згадати про операцію swizzling. Суть swizzling-а в тому, що з вектора, наприклад, з чотирьох елементів, ми хочемо взяти тільки три, наприклад, перший, третій і четвертий елементи. І потім ми можемо зібрати нову змінну розмірністю 3, причому самі елементи можуть бути переставлені місцями, наприклад:

Тут йдеться про те, що змінна "dst" (результат обчислення шейдера) виходить як результат виклику функції sampleNearest. Що робить функція sampleNearest? Можна було б сказати, що функція sampleNearest просто бере з картинки (перший аргумент) піксель в заданих координатах, проте це не зовсім так. У комп'ютерній графіці є таке поняття як sampling, або вибірка і обчислення якогось значення на базі списку зразків (хоча термін sampling застосуємо і до інших сфер діяльності). Припустимо, що перед нами стоїть завдання "натягнути" текстуру спочатку дану в формі картинки-зразка (розміром 200 на 200 пікселів) на поверхню більшого або меншого розміру. Тут ми не можемо однозначно поставити у відповідність кожному вихідному пікселю один і тільки один вхідний піксель (пікселів може банально не вистачати). Тому перед нами стоїть завдання "розтягнути" або "стиснути" зображення, але так, щоб уникнути шкідливих артефактів (розмиття, неточності і т.д.). Існують різні алгоритми вирішення цієї проблеми, але часто все зводиться до того, що ми беремо за заданою координаті не один піксель, а кілька навколишніх його пікселів, і обчислюємо на підставі їх значень колір пікселя розташованого посередині. Так, в Pixel Bender є три функції sampling-а (також існують версії функцій, які оперують з картинками і пікселями розміром в два, три і чотири канали):






Функції sample і sampleLinear роблять одне і те ж: обчислюють підсумковий колір на підставі лінійної інтерполяції кольору сусідніх пікселів. Функція ж sampleNearest просто бере колір одного пікселя, розташованого найближче до запитуваної вихідний координаті. Що ж стосується функції outCoord (), то вона повертає координату пікселя, колір якого зараз і розраховується. Це означає, що якщо запустити наведений мною приклад скрипта на виконання, то ми отримаємо як результат картинку, один в один збігається з вхідним зображенням. Давайте це перевіримо. Для цього в меню "File" ми вибираємо пункт "Load Image 1" і виберемо якусь картинку. Після того як ми натиснемо на кнопку "F5", то побачимо, як і очікувалося, вихідне зображення (наш код просто скопіював картинку). Для того, щоб перевірити чи все працює правильно можна модифікувати наш шейдер, наприклад, так:

Після запуску шейдера на виконання ми побачимо, що вся область вихідного зображення залита синім кольором. Оскільки я присвоїв всім вихідним пикселям колір заданий його RGBA-компонентами (конструктор типу даних pixel4 приймає чотири числа в відрізку від нуля до одиниці саме в порядку RGBA). Тепер спробуйте такий приклад (то, що у мене вийшло, показано на рис. 1):

Study - dev, blog archive, adobe pixel bender

Тут я перевіряю координати кожного з вхідних пікселів. І, якщо вони потрапляють в розташований у верхньому лівому кутку квадрат зі стороною 300px, то виводжу піксель вихідної картинки. В іншому випадку вихідного пікселя призначається червоний колір. Наступний приклад (див. Рис. 2)

Study - dev, blog archive, adobe pixel bender

оперує над двома зображеннями одночасно. Для того, щоб його перевірити, вам потрібно вибрати в меню "File" пункт "Load Image 2":

А наступна формула може освітлити зображення:

Якщо після компіляції покласти поруч з swf-файлом отриманий на попередньому етапі pbj-файл з шейдером, то після запуску swf-ролика ми побачимо, що до зображення було застосовано шейдер і воно змінилося (див. Рис. 3).

Study - dev, blog archive, adobe pixel bender







Схожі статті