Three dimensional text in GDI+ (single point perspective)

[boops boops]

A question on the VB.Net forum about 3D Text set me thinking about a project I have had on the back burner for some time. It’s fairly easy to make a perspective illusion by making an image taper to a point in GDI+. You just apply a ScaleTransform repeatedly to an image. Here’s a simple example with 10 tapering slices. It could go in the Paint event handler of a Form or PictureBox:

   For i As Integer = 0 To 9
            e.Graphics.DrawEllipse(Pens.Blue, New Rectangle(100, 100, 200, 200))
            e.Graphics.ScaleTransform(0.9, 0.9)
   Next

The result is technically speaking a single vanishing-point perspective. It’s not completely realistic but it can have a nice visual impact. The example above has a vanishing point at 0,0 but it’s easy to shift it to any other position like this:

  
    For i As Integer = 0 To 9
            e.Graphics.TranslateTransform(vanishingPoint.X, vanishingPoint.Y)
            e.Graphics.ScaleTransform(0.9, 0.9)
            e.Graphics.TranslateTransform(-vanishingPoint.X, -vanishingPoint.Y)
            e.Graphics.DrawEllipse(Pens.Blue, New Rectangle(100, 100, 200, 200))
        Next

The impression of solidity can be much greater when the “slices” of the image are closer together. This can be done by using more slices, and by reducing the taper (e.g. by shrinking each successive slice by 0.995). It looks a bit clunky if all the slices are drawn in the same color. Much nicer is to use a series of graded colors which show up the 3D shape nicely. This is still a long way from using 3D rendering with lights, but - hey- it only takes 60 lines of code for the whole program. In principle you could draw any shape this way, but my favorite is to use text with large, showy font.

In the Demo1 program in the attached file, I’ve used Times New Roman at 100 pixels high to get this result:



The text moves with the mouse like a cursor (I was too lazy to do proper dragging). You can see the perspective changing as it moves, which adds a lot to the depth effect. I have used a Drawing2D.GraphicsPath with AddString instead of Graphics.DrawString because it give much better looking reslts. It is also more flexible. There are several variables to play with. To keep things short I have put them in the variable declarations, but ideally they should be turned into properties and given a proper UI. Here’s a more extravagant example with a font called Bernhard Fashion BT at 150 pixels high.



Finally I made a second much more elaborate program, Demo2 with gradients, reflection, blurring and various other special effects. It’s really rough and ready, with various magic numbers and arbitrary colors. The image moves with the mouse as in Demo1 but it’s a bit jerky because a lot of processing is involved. I was interested in getting maximum effect, not efficiency. Whether that’s bearable will depend on your own PC and graphics hardware. The font used is Poster Bodoni BT 100. Here’s a partial pic:



The fonts I have mentioned can all be downloaded free from the web. Oh yes, I’m sure all this will work much better in WPF (please post your code). The attached Demo1 is a plain TXT file. Just start a form, make it big and copy the text to the form code; then run. There's a limit of 5 attachments, so Demo2 is in the next post.

BB