Pixel Bender - 1. úvod
November 2nd, 2008
V následující sérii dílů se vám pokusím odkrýt taje rozšiřování grafických možností Photoshopu CS4, AfterEffects CS4 a Flash Playeru 10. Jedná se o tzv. “Ohýbač pixelů”.
Pixel Bender je jazyk pro vytváření HW nezávislých grafických filtrů. Pixel Bender Toolkit je jednoduché vývojové prostředí pro psaní kernelových skriptů, které se v ideálním případě provedou pomocí GPU.
Ukázka: Deformer filter
Předem bych chtěl říct, že jsem zastánce kreativity a některé moje články nemusí být obaleny dostatečnou omáčkou a polopatickým postupem, za to přesně ukazují postup, který bych byl rád kdybyste si opravdu vyzkoušeli naprogramovat a následně vám věci do sebe krásně zapadnou. Proto opravdu doporučuju, zvlášť při psaní filtrů, kde si nejste jistí, kód opsat a patričně otestovat a vždy si trošku pohrát a zinovovat.
1. Pixel Bender je součástí všech kolekcí CS4, stáhnout si jej však můžete již nyní zde (verze: Windows, Mac), nainstalujte jej a spusťte:
2. Načtěte obrázek (File -> Load Image 1) a dejte Create New Filter
kernel NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > { input image4 src; output pixel4 dst; void evaluatePixel() { dst = sampleNearest(src,outCoord()); } }
Kernel (jádro) začíná metadaty, následuje tělo obsahující vstup+výstup a evaluatePixel, což je funkce, která se provadí v každém framu a která zpravidla pracuje se vstupem a výstupem. V tuto chvíli nám stačí znát pouze tuto funkci.
3. Jednoduchý příklad prohození barev
kernel BarevnyFiltr < namespace : "Tomuv Playground"; vendor : "Tom Krcha"; version : 1; description : "Muj filtr"; > { input image4 src; output pixel4 dst; void evaluatePixel() { float2 aktualni_pozice = outCoord(); float4 aktualni_pixel = sampleNearest(src, aktualni_pozice); // cervena bude mit hodnoty modre aktualni_pixel.r = aktualni_pixel.b; dst = aktualni_pixel; } }
Můžete přistupovat k následujícím parametrům:
aktualni_pixel.r|g|b|a|y|x|y|z|w|s|t|p|q
i kombinovaně (tzv. swizzling):
aktualni_pixel.rgb = aktualni_pixel.bgr;
4. Parametry
S parametry přichází opravdové hraní. Rozšíříme náš příklad o sílu zelené barvy:
kernel BarevnyFiltr < ... > { ... parameter float power < minValue:1.0; maxValue:5.0; defaultValue:1.0; >; void evaluatePixel() { float2 aktualni_pozice = outCoord(); float4 aktualni_pixel = sampleNearest(src, aktualni_pozice); aktualni_pixel.g *= power; dst = aktualni_pixel; } }
Po spuštění nám Toolkit vytvoří slider, který je propojený s parametrem.
5. Kompatibilita Pixel Benderu s grafickými kartami (k datu vydání článku)
| Manufacturer | Series | Model Numbers |
|---|---|---|
| NVIDIA | QuadroFX Series | FX 5500 SDI, FX 4500 SDI, FX 5600, FX 5500, FX 4600, FX 4500 X2, FX 4500, FX 4400 (discontinued, replaced by the FX 4500), FX 4000 SDI, FX 3500, FX 3450, FX 1700, FX 1500, FX GO 1400, FX 1400, FX 1300, FX 570, FX 560, FX 550, FX 540, FX 370, FX 350 |
| 9 Series | GeForce 9800 GTX, GeForce 9800 GX2 | |
| 8 Series | GeForce 8800 GTS/GTX/Ultra, GeForce 8600M GT, GeForce 8500 GT | |
| 7 Series | GeForce 7950 GT/GS, GeForce 7900, GeForce 7800, GeForce 7600, GeForce 7300, GeForce 7200 GS, GeForce 7100 | |
| 6 Series | 6800 Ultra, 6800 GT, 6800 GS, 6800, 6800 XT, 6600, 6500, 6200, 6200 TurboCache, 6200 LE, 6100, 6150 |
|
| AMD/ATI | Radeon HD3800 series | |
| Radeon HD2000 Series | HD2900, HD2600, HD2400 | |
| Radeon X1000 Series | X1950, X1900, X1800, X1650, X1600, X1300, “All In Wonder” X1900 (X1900 GPU), “All In Wonder” 2006 PCI Express cards (Based on X1300 GPU) | |
| FireGL | Avivo PCI Express, V8650, V8600, V7600, V5600, V3600, V3300, V3400, V5200, V7200, V7300, V7350 |
6. Pixel Bender ve Flash Playeru 10
Pomocí Pixel Bender Toolkitu si můžeme vyexportovat binární soubor *.pbj a použít tak filtr přímo ve Flashi. Flash Player však neobsahuje tentýž PB runtime jako Photoshop či After Effects, ale je optimalizovaný pro grafickou kompatibilitu se zbytkem FP, což ho částečně zbavuje některých možností a hlavně vykreslování pomocí GPU. PB filtry se v FP10 vykreslují pomocí CPU nikoliv GPU, což ovšem neznamená, že by to bylo nepoužitelné - naopak - používání PB ve Flashi je až neuvěřitelně rychlé a osobně ho doporučuji před předchozí technikou - aplikací trasformačních matic na BitmapData apod.
Jak naimportovat filtry Pixel Benderu do Flashe si ukážeme přístě. Stejně tak využití ve Photoshopu a AfterEffects až budou ke stažení trial verze.
Pokud vás Pixel Bender zaujal, doporučuju jako inspiraci Pixel Bender Exchange.
Facebook comments:
9 Comments »
RSS feed for comments on this post. / TrackBack URL
Tomáši, nechystáš v nejbližší době nějaké menší školení ohledně Adobe AIR či Flash?
Comment by Jakub Brabec — November 2, 2008 @ 5:35 pm
Chystám teď něco pro HP. Je určitě možné to následně někde zrekapitulovat, když se udělá skupina aspoň patnácti lidí se zájmem o Flex, AIR a Blaze DS. Taky budeme určitě časem pořádat Devel sezení přímo v Adobe ČR.
Comment by tom — November 2, 2008 @ 5:40 pm
to Jakub: Jinak ve čtvrtek probíhá Flex Camp ve Vídni, určitě zajimá akce s lidma, kteří si sáhli na velké aplikace … spousta inspirace a pohodová atmosféra. Je to odpoledně večerní “komornější” seslošt, kde se proberou backendy (BlazeDS, LCDS, FMS apod.), ty se následně propoji s client-side, ostyluje se to grafikou a pak se vytvoří AIR aplikace postavená na zkušenostech všech částí. Začátek 16:00, konec 20:30. Já tam mám na starosti backend a AIR. Tato Akce probíhá v tu samou chvíli ještě v Hamburgu a Bukurešti a nese název Flex Triangle. Vstup zdarma.
Comment by tom — November 2, 2008 @ 7:37 pm
No chytrá věcička to je… Ale doufám, že se objeví nějaké fakt praktické ukázky uplatnění pro oživení GUI běžných aplikací. Jinak to zůstane jen hračkou pro dema. A samozřejmě je to asi ve Flashi hlavně proto, aby časem mohlo Adobe udělat plnohodnotný Photoshop online.
Comment by pas — November 3, 2008 @ 11:14 am
To asi joo, ale kazdopadne se to hodi
Myslim, ze to bude pouzivat vic projektu nez jen Photoshop.com, napr. Picnik apod. Pokusim se vymyslet nejake prakticke vyuziti a napisu o tom.
Comment by tom — November 3, 2008 @ 5:10 pm
[...] Pixel Benderem blíže seznámit, případně si napsat vlastní filtr? Tom Krcha se na svém blogu The Platform rozhodl technologii představit a připravil sérii článků, které vás seznámí s tím, jak [...]
Pingback by Horká novinka Pixel Bender nebo Ohýbač pixelů « Blog Michala Metličky o technologiích, Adobe, atd. — November 3, 2008 @ 11:00 pm
Kdyby se nekdo peklil s prikladem prace s parametrem, tak tam za > chybi strednik.
Comment by pp — November 5, 2008 @ 12:52 am
fixed… dik za try
Comment by tom — November 5, 2008 @ 11:40 am
[...] minulém díle (http://tom.krcha.com/pixel-bender-1-uvod/) jsme si představili v kostce jazyk Pixel Bender. Vzhledem k tomu, že je již konečně ke [...]
Pingback by Pixel Bender 2. - filter ve Flashi | The Platform — November 26, 2008 @ 12:07 am