Знакомство с Adobe Pixel Bender (Часть 1)

    Технология Pixel Bender была разработана в лаборатории Adobe, для создания фильтров предназначенных для обработки видео и изображений. Фильтры Pixel Bender(PB) могут использоваться в программных продуктах: Adobe Flash, Adobe Flex, Adobe Photoshop, Adobe After Effects. По своей сути, PB предоставляет возможность программным способом обрабатывать изображения с поддержкой аппаратного ускорения. Он хорош тем, что позволяет обработать каждый пиксель поэтапным обходом изображения.
    Pixel Bender Toolkit абсолютно бесплатен, скачать его можно по следующей ссылке labs.adobe.com/technologies/pixelbender. PBT(Pixel Bender Toolkit) включает в себя: интегрированную среду разработки с поддержкой родного си-подобного языка и граф-языка, примеры фильтров, документацию.
    Создание фильтров делится на 3 этапа:
    • Разработка алгоритма
    • Запись алгоритма в PBT
    • Экспорт в байт-код


    Приступаем к написанию фильтров. Запускаем программу. Создаем новый фильтр (File>New Kernel Filter) В редакторе кода появляется код:
    image
    В тэге languageVersion требуется указать версию языка. В тэге kernel находится описание фильтра: автор, версия, namespace разработчика, характеристики.
    input image4 src;
    Данная строчка говорит о том, что входное изображение src имеет тип image4. Тип image4 имеет 4 свойства: a(прозрачность), b(синий канал), g(зеленый канал), r(красный канал).
    Т.к. обработанное изображение мы будем выводить по 1-ому пикселю. Нам следует указать тип и название обработанного пикселя. В данном случае пиксель dst будет иметь тип pixel4.
    output pixel4 dst;
    Функция evaluatePixel() будет вызываться для каждого пикселя. Если функция не будет возвращать переменные, следует указать void. Для того, чтобы узнать какой пиксель обрабатывается в данный момент нужно использовать outCoord(), это переменная типа float2, вектор, у которого два свойства: X и Y. Функция sampleNearest(изображение, координаты); возвращает пиксель(pixel4) в координатах указанного изображения.
    В строчке dst = sampleNearest(src, outCoord());, мы присваиваем пиксель, находящийся на изображении src в координатах outCoord().x, outCoord().y. После запуска фильтра (кнопка Run) мы видим, что изображение не изменилось, т.к. мы банально скопировали пиксели. Теперь попробуем изменить эту ситуацию.
    Не секрет, что осветлить изображение можно путем повышения значений каналов. В функции evaluatePixel напишем:
    dst += sampleNearest(src,outCoord());
    dst += sampleNearest(src,outCoord());
    dst += sampleNearest(src,outCoord());

    Нажимаем кнопку Run и увидим, что изображение стало светлее. Теперь попробуем сместить наше изображение на 10 пикселей выше и на 15 пикселей левее. Для этого в evaluatePixel пишем:
    dst = sampleNearest(src,outCoord()+float2(15,10));
    По правилу свизлинга, который реализован в PB, получиться так:
    dst = sampleNearest(src,float2(outCoord().x + 15, outCoord().y + 10);
    Как вы уже догадались, ось ординат направлена вверх, ось абсцисс влево.
    Теперь попробуем заполнить пиксели в координате x меньше 50, пикселями в координате x=50;
    Пишем в функции evaluatePixel:
    if(outCoord().x<float(50))
    {
    dst = sampleNearest(src,float2(float(50), outCoord().y));
    }
    else
    {
    dst = sampleNearest(src, outCoord());
    }

    image
    Теперь попробуем создать пучок света на изображении.
    Как говорилось выше, чтобы сделать пиксель светлее нужно увеличить значение его каналов.
    Возьмем случайную координату пучка света, допустим, это будет параметр
    float2 center = float2(100,100);
    Придумаем размер свечения 200. Далее слудет делить размер свечения на расстояние от его центра до текущего пикселя.
    dst = 200/distance(outCoord(), center) * sampleNearest(src, outCoord());
    image
    Допустим, нам требуется сделать пиксели размером 5x5. Цвет этого большого пикселя мы будем брать из его верхнего левого угла. По мере обхода пикселей, мы будем делить каждую координату на размер большого пикселя, тем самым мы узнаем, его номер в двумерном массиве (m, n). Далее нужно умножить m и n на размер большого пикселя, для того, чтобы узнать координату верхнего левого угла.
    float2 sc = floor(outCoord() / float2(5, 5));
    sc *= 5;
    dst = sampleNearest(src, sc);

    image
    Теперь попробуем реализовать блур.
    Создадим «контейнер» в который будем добавлять наше изображение со смещением.
    float4 outpixel;
    outpixel += sampleNearest(src,outCoord()+float2(1,1));
    // Сместили влево, вверх
    outpixel += sampleNearest(src,outCoord()+float2(1,-1)); // Сместили влево, вниз
    outpixel += sampleNearest(src,outCoord()+float2(-1,1)); // Сместили вправо, вверх
    outpixel += sampleNearest(src,outCoord()+float2(-1,-1)); // Сместили влево, вниз
    dst = outpixel / float(4.0); // Выводим полученный пиксель, не забывая уменьшить значение канала путем деления. Если мы не уменьшим, то изображение получиться яркое и контрастное.
    Вот результат:
    image
    Фильтр crossStitch:
    imageimage
    Его можно найти в Adobe Pixel Bender Exchange. Немного подумаем по поводу реализации. Сам фильтр превращает картинку в сетку, т.е. на выходе изображение содержит меньше половины пикселей чем оригинал. Следовательно по мере обхода каждого пикселя входящего изображения (функция evaluatePixel) будем смотреть координаты, если пиксель лежит на диагонали квадрата размером size(динамический параметр), то его выводим. Смотрим на реализацию.
    image

    Вывод: С PB можно реализовать любые эффекты. Помогает в повышении производительности RIA-приложений. Незаменимый инструмент для программистов, которые работают с графикой. Научившись обрабатывать изображения в Pixel Bender, вы сэкономите большое кол-во времени в будущем.

    Где брать готовые фильтры?
    Adobe Pixel Bender Exchange Site www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26
    Petri Leskinen pixelero.wordpress.com/category/pixel-bender
    Mrdoob www.mrdoob.com/blog/post/586
    Kevin GoldSmith blogs.adobe.com/kevin.goldsmith
    За крутыми алгоритмами лазить сюда iquilezles.org/www/index.htm

    Автор: Сергей Flastar Гончар flash-разработчик flastar.ru/blog

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 31

      +3
      ох, зачем же код картинкой…
        0
        сори) но зато красиво)
          +1
          ну есть же хайлайтеры… например Source Code Highlighter
            –2
            да знаю я, мне картинкой проще и быстрее
              +7
              Да ты чувак гений
                0
                Давайте еще статьи в Ворде верстать и вставлять картинкой — так же проще и быстрее…
                  0
                  просто статью начала давно писать, код с картинки потерял( а картинка осталось
                0
                кстате внешние хайлайтеры — очень неудобно. имхо.
                  0
                  согласен
              +3
              Pixel Bender — это софтовая реализация Pixel (Fragment) Shader 2.0 из GLSL; могу посоветовать начать с ознакомления с ним, чтобы узнать лучше возможности «родного си-подобного языка»
                +2
                ну это все хорошо!
                мне было бы интереснее почитать продолжение. как и куда сохрнаять фильтр и как его подключать к флешу…
                ну, в общем, дальнейший ход действий
                  +1
                  это уже вторая часть, скоро будет)
                  0
                  В Paint.Net есть схожий плагин, только там на C# надо писать, ну и в RIA-приложения соотвествующий код не запихнуть. Пару раз нетривиальные эффекты под него писал — это довольно просто.
                    0
                    для Ria дот нетовских приложений свой язык HLSL и для него есть свои тулы например вот эта news.developer.nvidia.com/2008/07/fx-composer-25.html она кстати намного круче адобовской так как в ней можно писать не только пиксельные шейдеры но vertical и т.д.

                    Вот тут написано как его запихнуть silverlight потом www.wintellect.com/CS/blogs/jprosise/archive/2009/03/25/silverlight-3-s-new-pixel-shaders.aspx
                      +1
                      vertical шейдеры? пацталом. слышал гдето? или догадался?

                      Из вики:
                      HLSL (англ. High Level Shading Language) — C-подобный язык высокого уровня для программирования шейдеров.
                      Был создан корпорацией Microsoft и включён в пакет DirectX 9.0

                      при чем тут дот.нет?

                      Куча народу из мира геймдева сетовали что HLSL — зло! vertex/fragment program рулит.
                        +1
                        уже выполз изподЦтала?
                        WPF, silverlight — это RIA на основе .net в них есть поддержка работы с HLSL шейдерами.
                      0
                      По поводу Ria и .NET — посмотрите в сторону Shazzam… довольно интересный инструмент.
                      0
                      Спасибо, не знал о таком. Где можно почитать о прикручивании к Flex?
                        0
                        Если есть экспорт в байткод, то загрузка происходит через обычный ByteArray (только с 3 версии Actionscript). Мы так все частицы и прочий штуки, которые писались для Java с использованием редактора во Flash грузим.
                          +1
                          поддержка появилась в Flash Player 10 AS3
                            0
                            Да и взаимодействие с pbj с Flash CS4 (Shader и прочие классы). Но загрузка идёт все равно через ByteArray.
                              0
                              Flash CS4 это просто IDE она никакой поддержки чеголибо связанного с кодом не несет.
                              Не ну конечн загрузить фильтр в FP9 можно без вопросов, тока зачем если с ним ничего не сделаешь потом?
                                0
                                >>Flash CS4 это просто IDE она никакой поддержки чеголибо связанного с кодом не несет.

                                Да, не несет, я просто не так выразился. Компиляция под 10 FP из Flash IDE, начиная с 4 версии (то бишь CS4).

                                Flash CS4 это просто IDE она никакой поддержки чеголибо связанного с кодом не несет. Пробовал сейчас загружать pbj (шейдер pixelate). Работает на ура. Ну, вы вероятно, в следующей статье расскажете хабрасообществу что и как.

                                  0
                                  *Пробовал сейчас загружать pbj (шейдер pixelate)
                                  Я ж говорю, что загрузить можно, но с ним уже ничо не сделаешь толкового(визуально его не применишь).
                                    0
                                    Как это не применишь? Под 10 flash-player сделал. Могу выслать исходник. И код откомментить.
                                      0
                                      а я про 9-ый говорю
                                        0
                                        Ну ладно :) Совсем запутались.
                                          0
                                          =)
                                    0
                                    Кстате Flash CS3, при желании можно настроить под компил FP10
                            0
                            К примеру загрузка данных из редактора сплайнов (тоже бинарничек)

                            var objLoader:URLLoader = new URLLoader();
                                  
                            objLoader.dataFormat = "binary";
                                  
                            objLoader.load(new URLRequest("byteData.spn"));
                                  
                            objLoader.addEventListener(Event.COMPLETE, splineLoadComplete, false, 0, true);

                            private function splineLoadComplete(e:Event):void
                            {
                            var loader:URLLoader = URLLoader(e.target);
                                
                            var groupRoad:ByteArray = loader.data;
                                  
                            groupRoad = reverseBytes(groupRoad);
                            }


                            * This source code was highlighted with Source Code Highlighter.


                            Затем перебирается массив и координаты добавляются к траектории объектов. Здесь, думаю, будет нечто похожее.
                            +1
                            Автор — продолжайте писать в таком же человеческом стиле и флешеры вас не забудут :) — серьезно очень познавательно и интересно

                            Only users with full accounts can post comments. Log in, please.