Effects

What are effects?

Advanced lighting and material effects like reflection mapping and bump mapping are stored in effect files. Effect files (with the extension .fx) is a standard DirectX technology for storing render states, vertex shaders and pixel shaders into a single file. This technology makes it easier to share effects between applications. Effect files are also called shaders or simply FX.

BluffTitler comes with a collection of more than 70 effects, ready to use and specially designed for video titling.

How to use effects

From the Media menu, choose Change Effect.... For example if you want your text to be reflection mapped you choose Media > Change Effect... and select the file ReflectionMap.fx. Alternatively you can press the Change Effect... button on the tool window.

Every layer can have its own effect file. Some effects have been created with a specific layer in mind (for example the filter effects work best in the picture layer), but technically any effect can be applied to any layer. Feel free to experiment.

Choose Media > Change Effect... or press <F9> for more information about the effect of the active layer.

Hardware requirements

Some effects require a graphics card that supports Pixel Shader 2.0 or even 3.0. In the effect dialog (menu item Media > Change Effect...) you can find out if your graphics card can handle the effect of the active layer.

All modern graphics cards support shader version 3.0 so you don't have to worry when you buy a new computer.

Here is a list of older cards. Please consult the technical specs of your graphics card for the exact details.

Graphics CardShader Model
NVIDIA GeForce 21.1
NVIDIA GeForce 31.1
NVIDIA GeForce 41.1
NVIDIA GeForce 52.0
NVIDIA GeForce 63.0
NVIDIA GeForce 73.0
NVIDIA GeForce 84.0
ATI Radeon 85001.1
ATI Radeon 90001.1
ATI Radeon 96002.0
ATI Radeon 97002.0
ATI Radeon 98002.0
ATI X3002.0
ATI X7002.0
ATI X8002.0
ATI X8502.0
ATI X18003.0

Effect properties

Some effects add new properties to a layer. For example the filters / blur.fx effect file adds the property FX Blur Factor that controls the amount of blur. Effect properties can be recognized by the FX prefix.

Post-Processing

When you select an effect file in the camera layer, that effect will be used as a fullscreen post-processing effect. All filter effects can be used as post-processing effect.

Effects and textures

Effects work in close cooperation with textures. For example the bump effect requires a bump texture.

Associations

For convenience BluffTitler associates texture filenames with effects. For example if you load a texture containing the word reflection (as in ReflectionMap_Silver.jpg) BluffTitler automatically loads the effect file ReflectionMap.fx.

Part of the texture filenameAssociated effect
colourmapLightened.fx
reflection or spheremapReflectionMap.fx
cube and .ddsCubeMapDDS.fx
bump or normalmapBumpMap.fx
cartoonCartoonMap.fx
tonalartTonalArtMap.fx
gradientwipe or alphamagicGradientWipe.fx

These associations are always used when loading textures or effects with the buttons on the tool window, but can be switched off with the checkbox Try to keep textures and effect matched in the dialog that is displayed when you choose Media > Change Effect....

Multi-Texturing

Some effects require 2 textures. This is called multi-texturing. You can set the textures in dialog that is displayed after choosing Media > Change Texture...

Colour mapping

images/manual/fx_colourmap

Colour Mapping

Any picture can be used as a colour map.

Colour maps can easily be created with a digital photo camera.


images/manual/fx_lightened

Lightened.fx

When you apply this texture to a text layer it looks like this.

You can load a texture with the menu item Media > Change Texture... or with the corresponding button on the tool window.


images/manual/fx_notlightened

NotLightened.fx

This is the same effect, only not lightened. Notice that the sides of the text are now as bright as the front.

You can load the Not_Lightened.fx effect with the menu item Media > Change Effect... or with the corresponding button on the tool window.


images/manual/fx_masked

Masked.fx

With this effect the text becomes a window through which you can see a 2D fullscreen textured background. Notice that the texture is always 2D, no matter how you rotate the text.


images/manual/fx_colourmapcolourmap

MultiTexture / ColourMap_ColourMap.fx

This is a multi-texture effect that combines 2 colour maps. The second texture (the alien) is rendered transparently on top of the first texture.

There's no button on the tool window to select the second texture, but you can do this by choosing Media > Change Texture....


Reflection mapping with sphere maps

images/manual/fx_spheremapping

Reflection Mapping with Sphere Maps

Reflection mapping, also called environment mapping, is a powerful way to create reflection effects.

A correct sphere map looks like the picture on the left, but as long as you do not use sphere-like shapes you can use any picture you like as a sphere map.


images/manual/fx_reflectionmap

ReflectionMap.fx

This effect makes the object 100% reflective.

This example uses the texture file ReflectionMap_Silver.jpg.


images/manual/fx_reflectionmapadditive

ReflectionMap_Additive.fx

This is the same effect, only rendered with additive blending.

Additive blending is used to simulate transparency or translucency.


images/manual/fx_reflectionmaplightened

ReflectionMap_Lightened.fx

This effect combines reflection mapping with lighting. Notice that the side of the text is darker than the front.

With the FX Lighting Factor property you can fine tune the effect from 100% reflected to 100% lightened.


images/manual/fx_colourmapreflection

MultiTexture / ColourMap_Reflection.fx

This multi-texture effect combines reflection mapping with colour mapping. The colour map used is a photo of a wooden floor. This results in a nice shiny wooden surface!

You can select the 2 textures in the dialog that is displayed when choosing Media > Change Texture....


Reflection mapping with cube maps

images/manual/fx_dds

Reflection Mapping with Cube Maps

Sphere mapping is the easiest reflection mapping technique, but has some drawbacks that become noticeable when using round, sphere-like shapes. Cube mapping solves all those problems resulting in perfect reflections!

A cube map contains 6 square pictures representing the 6 sides of a cube. Technologies to create 360 degree photos include IPIX and Apple's QuickTime VR. You can use Bixorama to convert the 6 pictures into a single .DDS file.


images/manual/fx_cubemapdds

CubeMapDDS.fx

This effect requires a cube map texture in the DirectX .DDS format.

This example uses the texture CubeMap.dds.


Bump mapping with normal maps

images/manual/fx_bumpmapping

Bump Mapping

Bump mapping is a powerful technique that simulates rough or bumped surfaces.

This is how a bumpmap (normalmap) looks like. The surface normals are RGB encoded. For example the colour #88f means the vector (0,0,1) and represents a flat surface. The NVIDIA Photoshop plug-in can be used to create bump maps.


images/manual/fx_bumpmap

BumpMap.fx

When you apply this bumpmap to a text layer it looks like this.

This example uses the file bumpmap_crusty.png.


images/manual/fx_colourmapbumpmap

MultiTexture / ColourMap_BumpMap.fx

This multi-texture effect combines colour mapping with bump mapping. The colours are taken from the first texture and the bumps from the second.

With the Specularity property of the text and picture layers you can adjust the reflective quality of the bumps. And with the Texture Scale property you can adjust the size of the bumps.


images/manual/fx_reflectionbumpmap

MultiTexture / Reflection_BumpMap.fx

This multi-texture effect combines reflection mapping with bump mapping. The first texture is used as a reflection map and the second as a bumpmap.


Cartoon mapping

images/manual/fx_cartoonmapping

Cartoon Mapping

A cartoon map looks like this. It is a horizontal gradient from dark (left) to bright (right).

Cartoon maps can easily be created by using the gradient tool of your paint program.


images/manual/fx_cartoonmap

CartoonMap.fx

This is how a text looks like with the cartoon effect. Notice that the hard transitions from black to red to white correspond to the transitions in the texture.

This example uses the file cartoon_red.bmp.


Tonal art mapping

images/manual/fx_tonalartmapping

Tonal Art Mapping

With tonal art mapping (TAM), also known as realtime hatching, you can make your texts look very artistic.

BluffTitler uses 4 hatching levels. Level 1 (brightest) is rendered as white, the next 3 levels are RGB encoded. BluffTitler comes with 3 TAMs: dots, lines and crisscross.


images/manual/fx_tonalartmap

TonalArtMap.fx

This is how the result looks like.

This example uses the file tonalartmap_crisscross.png.


images/manual/fx_colourmaptonalartmap

MultiTexture / Colourmap_TonalArtMap.fx

This multi-texture effect combines colour mapping with tonal art mapping. The first picture is used as the colour map (in this example a picture of Bix) and the second texture is used as a tonal art map.

This effect works amazingly well applied to the video capture layer.


Animation effects

images/manual/fx_mrswiggle

Animation / Mrs. Wiggle.fx

The animation folder contains some animations effects including Bouncer, Bubbler, Jumper, WaveMorpher and this Mrs. Wiggle effect that turns your text into a breakdancer.


images/manual/fx_wavingflag

Animation / WavingFlag.fx

The Waving Flag effect turns a picture layer into a flag waving in the wind.


Filter effects

Filter effects are like the filters you find in paint programs. The big difference is that BluffTitler filter effects work in realtime and can be applied not only to static pictures, but also to videos, including live video coming from your webcam!

Most filter effects require a graphics card that supports pixel shader 2.0, some require 3.0. Select the effect file and press F9 for the details.

images/manual/fx_4bit

Filters / 4bit.fx

This effect limits the number of colours.


images/manual/fx_blur

Filters / Blur.fx

This effect replaces every pixel with the average of the surrounding pixels.


images/manual/fx_charcoal

Filters / Charcoal.fx

This effect turns your picture into a charcoal drawing.


images/manual/fx_circles

Filters / Circles.fx


images/manual/fx_colourinvert

Filters / ColourInvert.fx

This effect inverts all colours.


images/manual/fx_contours

Filters / Contours.fx


images/manual/fx_distortingmirror

Filters / DistortingMirror.fx

This effect blows up and deflates your picture in a constant loop.


images/manual/fx_doublevision

Filters / DoubleVision.fx

Drunken style.


images/manual/fx_filmgrain

Filters / FilmGrain.fx

This effect makes your texture look as if it is seen through frosted glass.


images/manual/fx_lineart

Filters / LineArt

This shader renders a texture as vertical lines. The thickness of the line depends on the brightness.


images/manual/fx_median

Filters / Median.fx

This effect replaces every pixel with the median of the surrounding pixels. The median is the number dividing the higher half of a collection of samples from the lower half.


images/manual/fx_pixelbeams

Filters / Pixelbeams.fx


images/manual/fx_pixelizer

Filters / Pixelizer.fx


images/manual/fx_whiteborder

Filters / WhiteBorder.fx

Adds a white border to your picture.


images/manual/fx_colourmapcartoonmap

MultiTexture / ColourMap_CartoonMap.fx

This effect combines colour mapping with cartoon mapping. It renders your picture in the colours of a cartoon map (second texture) that is using the brightness of a colour map (first texture) as the input.

This example uses the cartoon map cartoon_red.bmp.


Morphing effects

images/manual/fx_plane2cube

Morphing / Plane2Cube.fx

The morphing folder contains effects can morph picture layers into mathematical shapes including cubes, cylinders, donuts and spheres. You can use the FX Morphing Stage property to animate the effect.


Create your own effects

Effect files are text files. When you open an .fx file in a text editor (like Notepad) you can see the source code. If you have some coding experience and know your vector math you can adjust existing effects or create new ones.

Please note: you do not have to understand the following information in order to be able to USE effects. The following information is only meant for software engineers who would like to edit existing effects or create new ones from scratch.

Vertex format

BluffTitler uses the following vertex format:

float4POSITION
float3NORMAL (not normalized)
float3COLOR
float2TEXCOORD0
float3TANGENT

Meshes created with the Tubular Square, Tubular Round, Wireframe, Light Discs, Light Bulbs and Comb text layer effects abuse the tangent field to store special info: (bulb/bulbs, contour, contours)

Parameters

The following parameters can be used:

textureMyTexture0The first texture
textureMyTexture1The second texture
float4ImageResolution0The original image resolution of the first texture (width, height, depth)
float4ImageResolution1The original image resolution of the second texture (width, height, depth)
float4TextureResolution0The texture resolution of the first texture (width, height, depth)
float4TextureResolution1The texture resolution of the second texture (width, height, depth)
float4ExportResolutionThe resolution of the exported video file (width,height,view)
float4UVBounds0The minimum and maximum texture coordinates of the first texture (umin,umax,vmin,vmax)
float4UVBounds1The minimum and maximum texture coordinates of the second texture (umin,umax,vmin,vmax)
float4x4WorldThe world matrix (transforming the model coordinates into the world coordinates).
float4x4WorldAThe world matrix of the text layer without the Text Position and Text Rotation properties. You can use this matrix to find out the position of the letter in the text.
float4x4WorldBThe world matrix of the text layer taking only the Text Position and Text Rotation properties into account. WorldA * WorldB = World.
float4x4ViewThe view matrix (transforming the world coordinates into the camera coordinates).
float4x4ProjectionThe projection matrix (transforming the 3D camera coordinates into the 2D screen coordinates).
float4x4WorldViewThe world * view matrix
float4x4ViewProjectionThe view * projection matrix
float4x4WorldViewProjectionThe world * view * projection matrix
float4x4WorldInverseTransposeUse this matrix to transform the normals
float4x4WorldInverseTransposeAUse this matrix to transform the normals
float4x4WorldInverseTransposeBUse this matrix to transform the normals
float4AmbientColAmbient light colour * ambient material colour (r,g,b,a)
float4DiffuseColDiffuse light colour * diffuse material colour (r,g,b,a)
float4SpecularColSpecular light colour * specular material colour (r,g,b,a)
float4LightPosThe light position
float4LightPosModelSpaceThe light position in model space
floatPowerSpecular reflection power
float4EyePosThe eye (camera) position
float4EyePosModelSpaceThe eye (camera) position in model space
floatTimeThe show time in seconds
float4LocalTimeThe local time (hours, minutes, seconds, milliseconds)
float4TissueDensityUsed in the voxel layer to make the Tissue Density property available to the FX file
float4CharacterIndexThis parameter is used by the text, picture, video and video capture layers (when using the Model Repeat prop) and contains the following information: (current character index, string length, unicode value current index, not used)
floatParticleAgeThis parameter is used by the particle layer and contains the age of the current particle in seconds

Deprecated variables

The following variables are currently supported, but will be removed in a future version:

float4 MyTextureResolution0The original image resolution of the first texture (width, height, depth)
float4 MyTextureResolution1The original image resolution of the second texture (width, height, depth)

Effect info

The Media > Change Effect... dialog displays the description variable:

string description = "bla bla bla";

Annotations

An effect file can add 10 extra properties to a layer by using the following annotations:

UINameThe property name as it wil appear in the GUI
UIMinThe minimum value
UIMaxThe maximum value
UIDefaultThe default value
UISlidersNumber of sliders (1,2 or 3)
UIScaleScale to GUI factor
UIIntegerSet to true for integer variables
UIWidgetUse 2 for a colour dialog, 0 for all other types of variables

The 10 extra properties must be of the type float4 and have to be named Prop0 to Prop9. Here's an example of how you can define an extra property:

float4 Prop0
<
string UIName="Max Iterations";
float UIMin=0;
float UIMax=200;
float3 UIDefault=float3(30,0,0);
int UISliders=1;
float UIScale=1;
bool UIInteger=true;
int UIWidget=0;
> = float4(30,0,0,0);

Alpha Channel

If an effect has a second technique, this technique will be used for alpha channel rendering. This can be used for special alpha effects or for effects that have to set the ColorWriteEnable renderstate.

Character encoding

You can use ANSI and UTF-8

Fighting HLSL compiler bugs

Most DirectX HLSL compiler bugs can be worked around by turning off all optimizations. When BluffTitler finds the variable optimization set to false, it turns off all optimizations. This should be a preprocessor directive, but since HLSL does not support this we have implemented it as follows:

bool optimization=false;

HLSL technical documentation

The HLSL language specs can be found in the DirectX SDK that can be freely downloaded from Microsoft.