I'm curious how easy it would be to do an effect such as: http://www.nulldesign.de/exp/expviewer.php?file=text_explode.swf&width=600&height=300 with blocks of text in D3D9. Any direction would be greatly appreciated. -Quinn

for the rendering process I am not sure if there is an easy way.

the best I can think, use two surfaces. first render the letters that you want to have highest blur to the first surface. then render this surface to the second surface using a very little blur filter in pixel shader and also render the the second highest blurred letters and continue to this until you render all letters.


sorry I can't explain it good. here is an example

we have 4 letters, a b c d. we want a to have highest blur and b to have the lowest blur. and we have two surfaces, s1 s2.

render a to s1.

render s1 to s2 using a blur filter and also render b to s2.

render s2 to s1 again with blur filter and render c to s1.

and finally render s1 to s2 with blur and render the d

so our image is ready in s2, render s2 to screen.

in the end a will be blurred 3 times, b will will be blurred 2 times, c is only 1 and d will be rendered without blur.

This is speculation, but my best guess:

This seems like a two part process. The first part is creating several textures each with a different blur level. The second is animating the different pieces as they fly from off-screen to their correct positions.

When the user presses ESC to start the process, the current text is drawn to a texture. Take this texture and make a couple copies of it - each with a different level of blur. So as each piece comes closer to its correct position, gradually render it with a less blurry version of the texture.

As for getting the pieces to fly into places, I think you could create a large mesh that, when drawn all together properly, would have the same effect as bill-boarding the texture. However, for the animation, break the pieces of the mesh apart and animate them separately, from off-screen to their final destination.

I think animating the pieces like this and changing through the blur levels would give an effect similar to the one on that site. This would also work with any texture you wanted to "Blur-And-Fly" into place, not just text.

With a little more thought, I think you could get a better blur transition if you used three (or more, I suppose) different textures and some additive alpha blending:

(1) Completely un-blurred version of the texture.
(2) Half way blurred version of the texture.
(3) Completely blurred version of the texture.

Every time you render a piece of the texture, you compute the distance left to the destination, and use that distance to determine the alpha values you use to render each part of the texture.

For example, when you are rendering a piece that is still far away from its destination, you might get values such as 0.05, 0.2, and 0.75 for alpha values. This way the very blurry version of the texture is quite visible, while you can only get a hint of the actual text. As it gets closer to its correct position, the alpha values shift so the un-blurred version becomes the largest. When a piece is in its correct position, the un-blurred texture is rendered with 1.0, and the others are at 0.

That would give a very smooth transition from blurred to un-blurred, I think.