AS_Blog » Pixel Bender

Pixel Bender Prerelease 6

Vincent Helwig — Thu, 09 Apr 2009 11:42:48 +0000

Mise à jour du labs.adobe.com, le 2 avril, Adobe nous propose la prerelease 6 de Pixel Bender.
Au programme, la possibilité de créer, compiler, et visualiser des graphs Pixel bender directement dans l’IDE

Les nouveautés de la prerelease »
Télécharger Pixel Bender Toolkit

Developer’s Guide »
Reference »

Pixel Bender Prerelease 5

Vincent Helwig — Mon, 17 Nov 2008 10:31:47 +0000

Parmi les mises à jours du 17 novembre sur labs.adobe.com, la prerelease 5 de Pixel Bender.
Au menu de cette mise à jour, le réglèment de quelques bugs, le plugin pour Photoshop CS4 et une documentation complète (Developer’s Guide & Reference).

Les nouveautés de la prerelease »
Télécharger Pixel Bender Toolkit & le plugin Photoshop CS4

Developer’s Guide »
Reference »

Modifier les paramètres d’un filtre PixelBender en AS3

Vincent Helwig — Tue, 28 Oct 2008 14:50:54 +0000

Pour illustrer le changement de valeur d’un paramètre dans un filtre Pixel Bender, j’ai utilisé un filtre de Frank Reitberger », ce filtre est téléchargeable sur le Pixel Bender Exchange ».

Pour accéder aux paramètres du filtre « smudge », il suffit de passer par la propriété data de la classe Shader. Le filtre smudge n’a qu’un seul paramètre : amount. On peut le modifier de cette façon :

[Embed("pb/smudger.pbj", mimeType="application/octet-stream")]
private var _pbjFilter:Class;
private var _shader:Shader = new Shader( new _pbjFilter() as ByteArray );
private var _filtre:ShaderFilter = new ShaderFilter( _shader );

_shader.data.amount.value = [ 5.0 ];

Le filtre ayant changé, il ne faut pas oublier de le réaffecter à la propriété filters de l’élément à modifier, au risque de ne voir aucun changement, malgré le changement de valeur des paramètres….

Ci-dessous un exemple, la valeur du paramètre est modifiée suivant la position de la souris en x ( Flash 10 ) :

[kml_flashembed movie="http://tsoin.com/asblog/tutoriel/PixelBender/003/Pixelbender003.swf" height="370" width="600" /]

Utiliser un filtre Pixel Bender en AS3

Vincent Helwig — Tue, 28 Oct 2008 11:24:02 +0000

Après avoir vu comment créer un filtre pixel bender, nous allons maintenant voir comment utiliser ce filtre en as3…

Il faut tout d’abord exporter son filtre en .pbj, fichier qui sera loader en as3. Une fois cette première opération réaliser, il faut charger le pbj :
- Méthode 1, avec un fichier externe au swf :

package {

   /**
   *
   * Auteur: Vincent Helwig
   * Date: 27.10.2008
   * Website: http://www.tsoin.com
   * Description: Chargement d’un fichier PBJ Pixel Bender
   *
   **/

   import flash.display.Sprite;
   import flash.events.Event;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.net.URLLoaderDataFormat;
   import flash.display.Shader;

[SWF(width = "600", height = "400", backgroundColor = "#000000", framerate = "30")]

public class Main extends Sprite {

private var _loader:URLLoader;
private var _shader:Shader;

      public function Main():void {
         _loader = new URLLoader();
         _loader.dataFormat = URLLoaderDataFormat.BINARY;
         _loader.addEventListener(Event.COMPLETE, onLoadComplete);
         _loader.load(new URLRequest(« bleu.pbj »));
      }

      private function onLoadComplete(event:Event):void {
         _shader = new Shader( _loader.data );
      }

}

- Méthode 2, avec un fichier intégré au swf :

package {

   /**
   *
   * Auteur: Vincent Helwig
   * Date: 27.10.2008
   * Website: http://www.tsoin.com
   * Description: Embed d’un fichier PBJ Pixel Bender
   *
   **/

   import flash.display.Sprite;
   import flash.display.Shader;
   import flash.utils.ByteArray;

[SWF(width = "600", height = "400", backgroundColor = "#000000", framerate = "30")]

public class Embed extends Sprite {

[Embed("bleu.pbj", mimeType="application/octet-stream")]
private var _pbjFilter:Class;

private var _shader:Shader;

      public function Embed():void {
         _shader = new Shader( new _pbjFilter() as ByteArray );
      }

}

Quelque soit la méthode du chargement, la méthode d’utilisation est ensuite la même :

private var _filtre:ShaderFilter;
_filtre = new ShaderFilter(_shader);

On peut alors utiliser le ShaderFitler sur tous les enfants héritant de la class DisplayObject, avec la propriété filters :

private var _display:DisplayObject = new DisplayObject();
_display.filters = [ _fitltre];

On peut donc appliquer un filtre Pixel Bender sur un champ texte, sur une vidéo, sur une image, sur un bitmap, un Sprite, un UIComponent etc…

Ci-dessous un exemple de différent filtre sur une vidéo…. ( Flash 10 nécessaire, bien sur )

[kml_flashembed movie="http://tsoin.com/asblog/tutoriel/PixelBender/001/Pixelbender001.swf" height="450" width="600" /]

Créer un filtre Pixel Bender

Vincent Helwig — Thu, 18 Sep 2008 15:09:19 +0000

Après l’introduction à Pixel Bender, passons à la pratique, et voyons comment créer un filtre Pixel Bender, avec Pixel Bender Toolkit, que vous pouvez télécharger ici »

L’application est découpée en trois parties :

La visualisation du filtre sur une image
Le code du filtre
Les paramètres du filtre

Le source du filtre Pixel Bender a pour extension .pbk (Pixel Bender Kernel), et le fichier compilé a pour extension .pbj (Pixel Bender Byte Code). Évidemment si vous voulez modifier un filtre, il vous faudra le fichier source .pbk, si vous essayer d’ouvrir un fichier .pbj vous n’en tirerez rien….

Le code est composé de deux parties obligatoire, une déclaration de langage et le noyau (kernel, en anglais) du code. Le kernel est définit comme une class C++, une nouveauté pour les Flasheurs qui ne viennent pas du monde du développement « classique ». Le kernel est un object qui définit le résultat de sortie d’un pixel, quelque soit le nombre d’images en entrée. Il s’execute en parrallèle de chaque pixel pour générer une seule image en sortie. il doit au moins avoir une fonction evaluatePixel, ainsi qu’un paramètre de sortie de type pixel, et depuis la dernière beta du Toolkit, des MetaData…

Le kernel est executé pour chaque pixel de l’image de sortie, c’est à dire que vous ne pouvez pas définir un kernel pour tel partie l’image et un kernel pour tel partie de l’image, vous devez gérer dans un seul et même kernel les filtres que vous voulez utiliser. La seule chose qui change a chaque pixel étant la fonction outCoord() qui renvoit la position du pixel « courrant ».

IMPORTANT !
Avant de rentrer dans le vif du sujet, petits conseils, suite à quelques tests :
- Ne pas mettre d’accent dans le nom de son kernel : kernel EffetCrypté ne fonctionnera pas…
- Mettre les chiffre en float, il ne semble pas prendre les integer (apparement ca vient du C)

Pour créer un nouveau filtre Kernel, seléctionner File > New Kernel Filter, il apparaitra alors le code ci-dessous, qui est le code de base d’un filtre :

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());
   }
}

Télécharger le .pbk »

Si vous cliquez sur le bouton Run, et que vous avez sélectionner une image, vous aurez comme résultat de votre filtre… la même image. C’est logique si nous regardons le code, l’image de sortie dst, est juste une copie de l’image d’entré src, la fonction sampleNearest accède au pixel et à l’image passé en paramètre. La fonction outCoord() renvoit la position du position actuel, donc à chaque pixel de l’image src, le kernel renvoit en dst le même pixel, sans modification….

Si on veut maintenant faire des modifications sur l’image, il suffit de les faire sur le pixel de l’image en entrée.
Pour changer les canaux de l’image, on définit la variable p en pixel4, puis on modifie les propriétés, dans le cas suivant, on modifie le bleu de l’image :

kernel ModificationBleu
<
   namespace : « com.tsoin.asblog »;
   vendor : « Vincent Helwig »;
   version : 1;
   description : « Modification du bleu »;
>
{
   input image4 src;
   output pixel4 dst;

   void
   evaluatePixel() {
      pixel4 p = sampleNearest(src,outCoord() );
      p.b *= 5.0;
      // p.r *= 5.0;
      // p.g *= 5.0;
      dst = p;
   }
}

Télécharger le .pbk »

On rajoutant un paramètre au kernel, on pourra modifier le filtre directement d’ActionScript, la création de ce paramètre affichera automatiquement la variable dans la partie « Paramètre du Filtre -> 3″, cité plus haut.
On rajoute donc le paramètre delta pour modifier l’intensité du bleu :

kernel ModificationBleuParametre
<
   namespace : « com.tsoin.asblog »;
   vendor : « Vincent Helwig »;
   version : 1;
   description : « Modification du bleu en paramètre »;
>
{
   input image4 src;
   output pixel4 dst;

   parameter float delta
   <
      minValue: 0.0;
      maxValue: 5.0;
   >;

   void
   evaluatePixel() {
      pixel4 p = sampleNearest(src,outCoord() );
      p.b *= delta;
      dst = p;
   }
}

Télécharger le .pbk »

Après quelques bidouillages, voici un petit exemple de qu’il est possible de faire (effet « Effet Canal Plus ») :

kernel EffetCanalPlus
<
   namespace : « com.tsoin.asblog »;
   vendor : « Vincent Helwig »;
   version : 1;
   description : « Effet Canal Plus »;
>
{
   input image4 src;
   output pixel4 dst;

   parameter float delta
   <
      minValue: 0.0;
      maxValue: 5.0;
      defaultValue: 2.5;
   >;

   void
   evaluatePixel() {
      float2 coord = outCoord();
      coord.y += sin(coord.y) * delta;
      pixel4 p = sampleNearest(src,coord);
      dst = p;
   }
}

Télécharger le .pbk »

Pour finir, l’intégration dans flash nécessite le fichier compilé de Pixel Bender : .pbj, pour cela, il faut faire dans Pixel Bender Toolkit : Files > Export Kernel File For Flash Player…
Je posterais bientôt l’intégration du fichier .pbj dans Flash….

Quelques exemples :
– Levels Exemples »
– TV Scanline »
- Gallery Labs.adobe.com » ( certains scripts ne fonctionnent plus…)
- Pixel Bender Exchange »

Forum Pixel Bender »

Introduction à Pixel Bender

Vincent Helwig — Mon, 08 Sep 2008 16:27:32 +0000

Développer sous le nom de code Hydra, Pixel Bender est la grosse nouveauté de Flash 10, cette technologie développé par Adobe permet la création de filtres et d’effets personnalisés, et paramétrables directement via Flash. Le langage de programmation est basé sur le GLSL (OpenGL Shading Language, langage de programmation des shaders), lui même basé sur le C.

Vous me direz, quel est l’intérêt de faire des effets / filtres avec PixelBender, alors qu’on peut aussi en faire dans Flash ? Dans ce cas, je vous dirais, que malgré le fait de devoir assimilé un nouveau langage de programmation, les effets / filtres de PixelBender sont gérés directement pas la carte de graphique, et permet de libérer le processeur et donc de gagner en performance et fuildité. De plus la programmation est plus rapide, et moins lourde en GLSL qu’en AS3 :

GLSL

kernel NewFilter {
   void evaluatePixel(in image4 src, out pixel4 dst) {
      pixel4 temp = sampleNearest(src,outCoord());
      dst = pixel4( temp.r * .5, temp.b, temp.g * .8, temp.a );
   }
}

AS3

for (var x:Number = xMin; x < xMax; x++) {
   for (var y:Number = yMin; y < yMax; y++) {
      // get the pixel’s RGB value:
      var rgba:Number = bmp.getPixel32(x,y);
      // isolate channels:
      var red:Number = (rgba & 0xFF000000) >> 24;
      var green:Number = (rgba & 0×00FF0000) >> 16;
      var blue:Number = (rgba & 0×0000FF00) >> 8;
      var alpha:Number = (rgba & 0×000000FF);
      red = red * .5;
      green = green * .8;
      var output:Number = (red << 24) | (blue << 16) | (green << 8 ) | alpha;
      outbmp.setPixel32(x,y,output);
      }
   }

Pour voir un exemple des possibilités de Pixel Bender (vidéo Adobe), cliquer ici »

La Pre-Release 4 de Pixel Bender est sortit le 16 juillet 2008, vous pouvez la télécharger ici »