Download: UI Controls Demo (After Effects CS4)

Basic controls
Here’s a list of basic user interface controls that look pretty much the same as expression controls.

• Angle Control
  You don’t need to set up minValue and maxValue attributes, because they are ignored in this case. Besides it wouldn’t make much sense, would it?

  parameter float myAngle
<
defaultValue: 0.0;
aeDisplayName: "My Angle";
aeUIControl:"aeAngle";
>;

• Checkbox Control
  Checkbox only returns true or false values (on and off), so it also does not need minValue and maxValue attributes.

  parameter bool myCheckbox
<
defaultValue: false;
aeUIControl: "aeCheckbox";
aeDisplayName: "My Checkbox";
>;

• Color Control
  This is valid as a float3 and float4 variable type, however After Effects uses float4data type (RGBA). Even though the color picker dialog does not allow you to define the alpha value of the color you’re defining it makes much sense to use the float4 instead of float3. Defining minValue and maxValue also makes no sense in here.

  parameter float4 myColor
<
defaultValue: float4(1.0, 0.0, 0.0, 1.0);
aeUIControl: "aeColor";
aeDisplayName: "My Color";
>;

• Point Control
  This is one out of two very specific controls. As you see in the code below it does not have minValue and maxValue attributes just like the examples above, but it’s also missing the defaultValue attribute. Instead theres aePointRelativeDefaultValue attribute. The key word here is “relative” because the the values are not pixel coordinates. They represent a point that is relative to the image size. For instance, value of float2(0.5, 0.5) would set the default position at the middle of the layer. However – this relative position is converted to pixel coordinates in After Effects and then those values are being used by your Pixel Bender code.

  parameter float2 myPoint
<
aePointRelativeDefaultValue: float2(0.0, 0.0);
aeUIControl: "aePoint";
aeDisplayName: "My Point";
>;

• Slider Control
  This is the most basic control you can have. No need to explain how it works. Just look at the code below. Explains itself.

  parameter float mySlider
<
minValue: 0.0;
maxValue: 100.0;
defaultValue: 0.0;
aeDisplayName: "My Slider";
>;

Additional controls
There are also some things that you can’t do with expression controls.

• Percent Slider Control
  It works exactly the same as the regular slider, but the display format of the value is in percentage.

  parameter float myPercent
<
minValue: 0.0;
maxValue: 300.0;
defaultValue: 0.0;
aeUIControl:"aePercentSlider";
aeDisplayName: "My Percent";
>;

• Popup Control
  This you won’t find in the Expression Controls group. It creates a dropdown menu with the predefined values. String values are held in the aePopupString attribute, but if you want to create an if statement in your Pixel Bender code than treat it as a regular array and check against index values. In this example Red is 0, Green is 1, and Blue is 2. Remember to define minValue and maxValue.

  parameter int myPopup
<
defaultValue: 0;
minValue:0;
maxValue:2;
aeUIControl: "aePopup";
aePopupString: "Red|Green|Blue";
aeDisplayName: "My Popup";
>;

• One Channel Color Color
  I guess this one could be handy in some cases, but so far I had no use for it. This works and looks just like a slider with one difference: if you do not provide minValue and maxValue attributes then they will be based on the bit depth of your project. I guess it could be used as a threshold parameter, but if you ask me it makes no sense. For 8bpc the minValue would be 0, and maxValue would be 255. Ok. But in 32bpc I’d expect to be able to go beyond 1.0 on the slider (unlimited maxValue), however in order to do that I’d have to define the minValue and maxValue on my own, and this defeats the purpose.

  parameter float mySingleColor
<
defaultValue: 0.0;
aeUIControl:"aeOneChannelColor";
aeDisplayName: "My Simgle Color";
>;

What about Layer Control?
Basically there isn’t one. In order to be able to pick another layer you need to create an additional source in the kernel. After Effects will allow you to use as many additional sources as you like, however Pixel Bender Toolkit only allows two sources, so you will only be able to test your code in After Effects. The big downside is that you can’t add any metadata for this additional source, so it will always show up in the user interface as “Input 2″, “Input 3″ and so on.

input image4 src1;
input image4 src2; // layer control - sort of...
output pixel4 dst;

How does it translate to graphs?
It’s all very similar, although it takes some time to figure out. Instead of listing all the parameters again in this post I’ve decided to give you two Pixel Bender files to look at. One is a simple kernel, and the other is a simple graph. Both of the files to exactly the same thing… nothing.

Download: UI Controls Demo (After Effects CS4)

Check this tutorial out and learn more about Adobe Pixel Bender technology and start making your own plugins.

Click here to watch the video tutorial

This tutorial is a bit different from all the others here, however I’m placing it in the After Effects category, because it’s very closely related to After Effects. In this tutorial I’ll show you what a Pixel Bender plugin is, how it works, and we’ll finish off by creating our own, very simple cropping plugin for After Effects CS4.

Sure we can crop any layer with a Mask tool, but on the other hand animating mask points might be painful sometimes, especially when you try to animate it using expressions or some tracking data for example, so having a nice and simple cropping plugin in After Effects is not a bad idea after all.

If you’ll find this tutorial interesting make sure to visit Adobe Labs for the latest version of Pixel Bender Toolkit. You’ll get a full documentation and a few examples with your download to get you started. Good luck!

Side note
If you like the article graphics (click on the thumbnail to view full size) then know that it was created with my CE Screenify and ChromAberration plugins. Make sure to check them out.

Update
If you got interested with Pixel Bender then you probably would like to read Pixel Bender and aeUIControls post.

Download: Simple cropping Pixel Bender plugin (After Effects CS4)

Problems with overerexposed footage? Need to work in 32bpc for nice depth of field and motion blur? Now you can! Convert your footage from 8bpc to 32bpc with my new free plugin.

Click here to watch the video tutorial

We all deal with overexposed footage from time to time when doing postproduction, color correction, motiongraphics or visual effects. Usually theres not much we can do about it. In some cases we can replace the sky when it was a cloudy day and the clouds turned out looking like a white or gray solid. But what if the overexposed pixels are exactly what you need? Well… than you need to do nothing… until you start blurring the footage or adding color correction. In those cases you end up with areas that turn out gray while they should still be white. That causes a lot of additional work when compositing. At least that’s how thighs were until now.

Bitwiser is a concept I had in mind for quite some time that just came to life as Bitweiser Light Pixel Bender plugin. This “light” version is completely free, has no settings, and only works for overexposed areas converting them to superbright pixels in 32bpc mode. Let me know what you think of it, so I’d know if it’s worth spending more time on improving this solution. The Bitweiser Pro version (if it will ever be made) will have a bunch of settings for tweaking the looks, threshold, tinting colors, separate settings for highlights, midtones, shadows, and probably a lot of other features that did not yet came to my mind.

I’m always hungry for your comments, opinions and suggestions. Please enjoy this free release and let me know what you think.

Download: Bitweiser Light Pixel Bender plugin (After Effects CS4)

UV mapping finally available in After Effects. Check out this amazing tutorial to learn how to integrate your 3D artwork with After Effects to improve your workflow, save time and money. It’s a must-see!

Click here to watch the video tutorial

Dear Friends! This one is huge! From this day forward you are able to take your 3D render and replace textures or even add reflections and environment. Watch this tutorial to learn how to work with my new Youveelizer plugin.

In a nutshell all you need to do is to apply the Youveelizer to a layer with a UV render pass to apply a texture to a rendered 3d object, or to a Normal render pass to add reflections. All 3d objects should be rendered out from a 3d application such as 3d Studio Max, Maxon Cinema 4D, or any other 3d package capable of rendering UV and Normal render passes.However it’s sometimes difficult to render out a nice UV pass. A solution to that problem may be simply applying a texture that simulates a good UV map. That’s why I’ve included a nice 2000×2000 pixels “uvmap_texture.tif” in the product package. It’s a 32bpc texture representing UV coordinates. Please note that the UV pass needs to be rendered at least at 16bpc, and you should also work in 16bpc or 32bpc mode in After Effects.

Youveelizer is a great tool to help you with your 3D renders and composits, and if used wisely, it can in some cases completly elimitane 3D rendering process. It’s compatible with CS4 and above, and works on Mac’s and PC’s. Enjoy!

Further info
This is the post where it all started – UV Mapping with Pixel Bender. If you’re completely new to the concept of UV maps and Normal maps check out Lutz Albrecht’s article on Working with UV data

Get Youveelizer 1.2 (CS4, CS5) for only 29.90 USD

Update
The plugin is now available for purchace. Check out the Youveelizer tutorial for more info. Read on if you’d like to learn more about the concept of UV mapping, or just watch the Youveelizer tutorial.

UV Mapping (source: wiki)
UV mapping is a 3D modeling process of making a 2D image representing a 3D model. The map transforms the 3D object onto an image known as a texture. In contrast to “X”, “Y” and “Z”, which are the coordinates for the original 3D object in the modeling space, “U” and “V” are the coordinates of the transformed object. This creates the effect of painting the image onto the surface of the 3D object.

Every 3D application is capable of generating UV maps and rendering out a UV pass. What if we could use those UV maps in After Effects to change textures, replace 3D screens, change pictures hanging on our 3D walls, or even add reflections to our 3D models?

I did some tests and came up with a very rough Pixel Bender plugin for painting an image onto a surface of a 3D object using UV maps. Here is the result of the first test.
This technique opens up new opportunities to cutting down render times and making changes on the fly inside After Effects. There are some problems that need to be faced, but all and all it looks promising. I’ll keep you posted. The tutorial and plugin should be available after publishing all of the 4 tutorials I have already announced. Two of them are already online, so it shouldn’t be longer than two weeks. I’d do it now, but I’m a bit busy (for a change).

Update
The plugin is now available for purchace. Check out the Youveelizer tutorial for more info.

Learn to create the effects seen in Magic Bullet Looks. Split RGB channels, simulate chromatic aberration, animate the chaos. All in one tutorial.

Click here to watch the video tutorial

Some time ago I wrote a note on my Facebook Fan Page about upcoming tutorials. I’m happy to announce that the day has come – the tutorials are recorded and all will be released soon. This is the first out of four tutorials that will be focused on recreating some of my favorite filters from a great color correction tool – Magic Bullet Looks.

Back in February 2009 I wrote a blog post about Separating RGB Channels. I thought that it would be a great example of what Adobe Pixel Bender technology can to – it’s simple and quite useful. Useful plugins don’t have to be very complex – it’s quite the opposite  - it’s  mostly simple and small things that make our everyday tasks easier.

With this tutorial I give you RGB Splitter plugin (CS4) totally for free, but I’ve got something extra for those of you who would like to support me and help me keep this site running.

Download: Maltaannon's RGB Splitter PBK (After Effects CS4)

RGB Channels Bundle that consists off ChromAberration – a Pixel Bender plugin for creating real chromatic abberation, and a nice CE RGB Playground that utilizes the free RGB Splitter in a way that makes it extra easy and fun to play with RGB channels of your footage.

Get RGB Channels Bundle (CS4) for only 14.90 USD

We’ve all been through this. Creating channel separation effect by hand is a pain. You have to duplicate the layers and use channel mixer and blend modes to get what you want. Not anymore. Now with new After Effects CS4 we can script a simple Pixel Bender to do just that.

Finally I got my hands on this amazing new tool from Adobe called Pixel Bender Toolkit. It allows you to script very powerful effects in a very simple way. What’s best is that scripts you create may be used as plugins and shaders in Photoshop, Flash, and After Effects.

Unfortunatelly I haven’t found a nice way to create user friendly interfaces for After Effects users. All Pixel Bender allows you to create as a parameter is a slider. But hey – I’m just starting. And besides – it’s still the first official release. I think there are many great things to come from Pixel Bender technology in the near future.

After writing your code and adding parameters you can simply put the PBK file into your plugins folder in After Effects CS4 and open the application. Your newly created shader will be available under the PixelBender group in the Effects & Presets pallette.

I’m currently working on a CustomEffect as a wrapper for the Pixel Bender code for your convinience. Here is the preview of the interface that I’m working on. I hope you’ll find this useful.

In the meanwhile grab the Pixel Bender plugin that will help you with simple RGB channel separation.

Download: Maltaannon's RGB Splitter PBK (After Effects CS4)

Happy AfterEffecting.