Digital Dreams in HD

Hot Air Balloons Swizzled

2010-04-03T10:31:00.002+08:00

Photos taken at The 2nd Putrajaya, Malaysia Hot Air Balloon Fiesta 2010 Swizzled. Enjoy.

-Original Vader Balloon Pic-

Come to the dark side.

Creating High Level Shader Language (HLSL) pixel shaders

2010-02-18T12:29:00.003+08:00

To create the pixel shaders used in the Swizzler, knowledge of HLSL is necessary. HLSL is quite similar to C at first glance, but it has a lot of fundamental differences. A useful tool for writing shaders is Shazzam.

Shazzam will allow you to easily compile and preview the shader and also automatically generates C# and VB code for easy integration into your project. Here's a brief HLSL tutorial for you beginners out there.

Let's start with the most basic of shaders. The following code simply returns the image fed to it.

sampler2D input : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color;

color = tex2D( input , uv);
return color;

}

Let's see what the code does line by line. First there's:

sampler2D input : register(s0);

this samples a 2D texture from register(s0) which is our default texture register in Shazzam. The texture is named "input". You can change the name to anything you want.

Then there's:

float4 main(float2 uv : TEXCOORD) : COLOR { }

this is simply our main function which is run when we compile the code. If you've noticed, pixel shaders support many types of floats. Specifically there are 4. A float is a floating point number, which means that the decimal point is floating (can be anywhere in the number).
The types of floats supported by pixel shaders are:

float (Our normal float which is a number)
float2 (represents a point in 2D) x,y
float3 (represents a point in 3D) x,y,z
float4 (represents a point in 4D) x,y,z,w

For now we'll focus on float and float2. As you can see, main( ) returns a float4. This is because our shader will return data in the form of color as RGBA which is Red, Green, Blue, and Alpha (transparency). We pass a float2 uv into the main function which is the texture coordinates. The TEXCOORD and COLOR are HLSL semantics which convey information about the use of a parameter. As we can see, uv is a TEXCOORD and main( ) is a COLOR.

For the rest of the code:
float4 color;

color = tex2D( input , uv);
return color;

First we create a float4 named color, then we use the tex2D function to sample the input based on the uv coordinates. Then we return the float4 color. All this does is return our original image. Our main( ) function must return some color data or the shader won't compile.

Now that we've got the basics down, let's create a color correction shader which will allow us to manipulate the red, green and blue data of the picture.

sampler2D input : register(S0);

float Red : register(C0);
float Green : register(C1);
float Blue : register(C2);

float4 main(float2 uv : TEXCOORD) : COLOR

{

float4 color = tex2D( input , uv);

color.r += Red*color.r;

color.g += Green*color.g;

color.b += Blue*color.b;

return color;

}

We needed to add:

float Red : register(C0);
float Green : register(C1);
float Blue : register(C2);

These set our dependency properties, Red, Green and Blue as floats, which are parameters that we can control. They will appear in Shazzam on the "Change Shader Settings" tab as shown below

The code that manipulates the sampled texture is:

color.r += Red*color.r;

color.g += Green*color.g;

color.b += Blue*color.b;

As color is a float4, it stores 4 values independently which are red, greed, blue and alpha. To manipulate these values, we can use color.r, color.g, color.b and color.a . The code multiplies our Red parameter by the textures r value, and does the same for green and blue.

Here's the image after setting Red and Blue to 1

Other effects created by color value manipulation:

Besides the color and alpha values, we can manipulate the coordinates of the texture. The following code zooms in to the picture

sampler2D input : register(S0);

float4 main(float2 uv : TEXCOORD) : COLOR

{

uv.xy *= 0.5;

uv.xy += 0.2;

float4 c1 = tex2D(input,uv);

return c1;

}

To manipulate the coordinates, we have to adjust the coordinates accordingly before sampling the texture. uv.xy *= 0.5; multiplies the coordinates by 0.5 this enlarges the texture. uv.xy += 0.2 moves the texture up and left. this centers the image. Then only we sample the texture as c1.

For a wavy effect:

sampler2D input : register(S0);

float4 main(float2 uv : TEXCOORD) : COLOR

{

uv.x += sin(uv.y * 25)*0.03;

float4 c1 = tex2D(input,uv);

return c1;

}

So there you have it. The basics of HLSL pixel shader programming. These are the absolute basics as HLSL is a lot more complex to harness the power of the GPU.

For HLSL documentation: Microsoft Developer Network

For other useful links on HLSL and also WPF:

Tinting and Sepia Effect

2010-02-14T18:17:00.001+08:00

It's pretty easy and straightforward to apply monochrome tinting using the Swizzler. One of the most famous monochrome effects that is widely used is the sepia effect.

This is the original image

First apply the grayscale effect

Then apply the color correction effect and use the following settings:
Red: 1.0
Green: 0.4
Blue: 0.2

Balance out the brightness using the brightness and contrast effect.
Brightness: -0.1
Contrast: 1.5

And there you have it. A nice sepia tone for your video or photos. The brightness and contrast settings usually require a bit of tweaking for optimal results.

Here are a few other examples:

Removing the grayscale effect for this tint resulted in a nice color tweak for this particular image

Lomo Effect

2010-02-11T17:30:00.007+08:00

The Lomo is a type of camera that can produce oversatured photos with a vignette effect and also other effects with different lenses. Here's how to reproduce the Lomo effect using the Swizzler.

First pause the video so that you can fine tune the changes easily. Here's the original video image

Then apply the Brightness and Contrast effect and tweak the contrast until the colors are bright and vibrant enough. Usually the default setting is good enough. It the picture seems too dark, increase the brightness sparingly and balance it out with more contrast.

The next step (optional) is to apply the Color Correction effect and adjust the colors accordingly. I prefer to brighten the video using this method as it doesn't cause as much saturation as balancing brightness with contrast.

Finally, apply the Vignette effect and increase the radius until the vignette is just touching the corners of the video, and we're done!

Here are a few more examples to show the effect in action.

Original image.

Image with adjusted contrast.

Finished Lomo effect with added vignette

Original image

Image after some color correction

Turn up the contrast (notice how the image seems more detailed)

And as usual, add a vignette

This is just the first of many more composite effects tutorials to come. What are your favorite effect combinations?

The Swizzler 0.8 Release

2010-02-10T14:51:00.013+08:00

Download:

New in this version:

Preview window
Pause function
Framerate overlay
Time and duration data displayed
Resolution settings
Maintain aspect ratio and stretch video options
Next video label
Transitioning label
Videos will transition when next button is pressed
Various bugfixes

As usual, feedback is always welcome.

Video Effects and Transitions Showcase

2010-01-31T16:52:00.003+08:00

Video and transition effects showcase. The transitions cycle alphabetically in order so all of them are shown. I only applied a few shader effects later on. Sorry about the low framerate (I really need a new machine), but it only stutters during recording. Even my 3 year old Dell laptop can run the application at full speed smoothly for full 1080p HD video at a full screen resolution of 1280 x800. I'll try to upload a smoother video when I get my hands on some real hardware. Till then, enjoy.

Version 0.8 will be released soon.

New in version 0.8:

Fixed resolution bug
New resolutions (aspect ratio) settings
New preview window
Videos now transition when the "Next" button is clicked
Framerate overlay implemented
and some other minor bug fixes

The Swizzler 0.72 Effects Showcase Video

2010-01-19T22:12:00.001+08:00

The video is finally up. I recorded this using my 3 year old Dell Inspiron laptop sporting only a Mobility Radeon X1400. The framerate for recording is kind of low because of my low specs, but the application can process full HD video (1080p) at full speed. Check it out.

The Swizzler 0.72 public beta release download

2010-01-18T19:09:00.016+08:00

The swizzler 0.72 latest stable public beta is now available for download:

[Download Here]

New features in this version:

Working playlist controls
Transition effects now implemented
Shader effects can be implemented simultaneously with transition effects
Transition effects and transition time can be changed individually for each clip. Just select the clip in the playlist and change the settings. The program will remember them.
Picture display time however, is universal. It can be changed at any time by changing the value in the settings box.
CPU effects for speed comparisons between GPU processing and CPU processing ;)
For best results, make sure the transition time is less than the clip / picture duration.
For even better results, use videos/images of the same resolution.

Shader Effects: (can be implemented any time during video playback / picture display)

Banded Swirl
Brightness and Contrast
Color Correction
Color Threshold
Directional Blur
Edge Detection
Edge Fade
Emboss
Emboss Color
Erode
Glass Tiles
Grayscale
Invert
Left Sine Mirror
Light Streak
Mirror
Mirrored Sine
Outline
Pinch
Pixelate
Scanlines
Sharpen
Sine Glass
Splitscreen
Splitscreen Flip
Swirl
Toon Shader
Vignette
Water Reflection
Watercolor
Zoom Blur

Transition Effects: (are implemented when changing from one clip / picture to the next)

-No Transition-

Additive Saturate Transition
Blink Transition
Center Part Transition
Color Bleed In Transition
Cross Transition
Dark Threshold Transition
Dot RGB Transition (Grayscale Fade)
Directional Blur Transition
Fade Transition
Fader Transition
Flower Ripple Transition
Glass Tiles Transition
Grow Transition
Light Threshold Transition
Over Saturate Transition
Radial Wipe Transition
Reflection Transition
Ripple Transition
Saturate Transition
Sine Glass Transition
Shake Transition
Slide Left Transition
Splitscreen Transition
Springy Wave Transition
Water Reflection Transition
Wavy Transition
Wiggle Transition
Wipe Transition
Zoom Blur Transition
Zoom In Blur Transition
Zoom Out Blur Transition

All these effects and transitions are GPU accelerated. The effect names are quite self explanatory except for a few. A video will be uploaded soon to showcase the capabilities of the Swizzler. Stay tuned for further updates and improvements. The Swizzler is WPF, C#, and HLSL powered and is also GPU accelerated. Any comments/feedback are appreciated.

The Swizzler 0.7 public beta coming soon.

2010-01-17T13:38:00.004+08:00

New Features:

Implemented transition effects (for both video and photo)
20+ new transition effects
30+ GPU accelerated shader effects
Also included 4 CPU generated effects for speed comparison
Shuffle works with transitions
The default value for transition time is 2secs but can be set individually
Photo slideshow display time is universal

Features:

Video player (up to full 1080p HD video supported)
Photo slideshow viewer
Able to queue videos and pictures in the same playlist
Supports all media formats supported by windows media player
Can open multiple files at once. Select multiple files while opening
30+ GPU accelerated special effects
Some effects parameters can be controlled using slider
Parameter maximum and minimum values can be changed using text boxes under slider
20+ GPU accelerated transition effects
Drag video window to move around
Right click video window to maximize
3 play modes: Repeat single, Loop and Shuffle
Double click on playlist item to play

System Requirements:

Any windows OS above XP SP1: XP SP2, XP SP3, Vista, and 7 will work
Microsoft .NET Framework 3.5 SP1 (already installed if you have the latest windows update)
A graphics card (GPU) that supports pixel shader 2.0 (PS 2.0). Most graphics cards support PS 2.0, even most integrated graphics cards (e.g: intel express chipset)
A decent computer. If windows runs smoothly you should be ok. However, the effects are quite process intensive at higher resolutions

Upcoming Feature Ideas:

New rich interface design using Expression Blend
More effects and transition effects (e.g: texture effects, mask transitions, etc)
Video encoding (Save As..)
Video timeline for easier editing
Keyboard shortcut controls
Instant youtube upload

Known bugs / Issues:

Transitions will assume the size of the first video/picture played. This is only an issue for different sized media. Resizing the video to the correct size will usually fix this problem. Playing media with the same size will also rectify this.
Playlist jumps when transition duration is longer than file duration / picture display duration. This can be avoided by setting the transition duration lower than the duration of the video/picture.
Videos played after transition effects will not immediately assume the size of the window when changed to full screen. However, the next video to play will resize accordingly.

The Swizzler 0.1a Download

2010-01-15T12:12:00.013+08:00

[Also featured on The Vortex Electrica Blog ]

The Swizzler (currently version 0.1alpha) (edit: it's not really alpha as it's stable and working. I just named it alpha because it's a very early version (this is the first release) and there is much more to come) is a GPU accelerated windows media player application capable of applying special effects to high quality video (up to full 1080p HD video has been tested to run smoothly) System requirements are windows, .NET framework 3.5 sp1 (installed if you have the latest windows update). It is now available for preview download here.

The screenshots quality have been lowered due to upload limitations.

Some of the effects included in this software are:

- Color Correction

- Brightness and Contrast

- Edge Detection

- Banded Swirl

- Pixelate

- Light Streak

- Toon Shader

- Directional Blur

- Emboss

- Color Emboss

- Grayscale

- Invert

- Sharpen

- Color Threshold

- Outline

- Zoom Blur

- Edge Fade

- Vignette

- Erode

- Watercolor

- Splitscreen

- Splitscreen flip

- Swirl

- Pinch

Effects can be stacked (you can apply different effects simultaneously) and many of their parameters may be adjusted using the controls on the fly. The interface is simple and straightforward.

This application is brought to you by the power of WPF (windows presentation foundation) and will only work on windows XP, Vista and 7. A dedicated GPU is not required but is highly recommended as the effects are quite graphics intensive. Integrated graphics cards will work as long as they support pixel shader version 2.0 (which most do).

Thanks for taking the time to try out my software = ) If the above link doesn't work, or you didn't find it. Click here: http://ifile.it/iu31ql0/The%20Swizzler.rar

Not all of the shaders were written by me. Some shaders were taken from the Microsoft DirectX shader library and some from Shazzam, a great tool for pixel shader programming. The video used in the screenshots is Coral Reef Adventure HD taken from the Windows Media HD content showcase.

There are many more features to come. I appreciate any feedback and comments. Please feel free to contact me with bug reports, suggestions, errors, etc @ fakhruddin087 at gmail (thats zero-eight-seven). Thanks for trying out my software ;)

This program was written and published using Microsoft Visual C# 2008.

Some screenshots: