Create a 3D Logotype Header with POV-Ray

Follow along as we build a 3D header for a website with help from POV-Ray and one of the many free fonts which can be found online. This article is a general introduction to using the text rendering capabilities of POV-Ray and is not limited to only creating header images.

Please refer to our Getting Started with POV-Ray article if you are new to POV-Ray. Note that we will be creating a header image which is smaller than is typically found online. The only reason for this choice is so that it will fit nicely within the dimensions of this web site while viewing this article.

When you need a header image for your website there are several common ways in which you can go about getting one. You can use online clipart, images or photographs combined with a full range of imaging applications and tools. Or you can hire someone else to do all of this for you. Another less common approach is to render a header image in 3D.

We will be creating a Logotype that will be placed into a 3d environment and rendered using POV-Ray. Specifically we will be rendering to a rectangle which is 500 pixels wide and 75 pixels tall :

POV-Ray and TrueType Fonts

POV-Ray comes with a pair of fonts which are built-in : timrom.ttf and cyrvetic.ttf. These provide a good starting point while you are learning the type capabilities of POV-Ray. Over time more choices in font selection are often desired and thankfully POV-Ray is capable of using TrueType Fonts.

There are countless online resources for free fonts. Depending on the kind of project you are using the font in, you should always check the licensing requirements of the font. Some font licenses do not permit commercial-use. Below are just a few sites where you can find lots of quality free fonts.

Once you have found a font that you like, with a license (or lack of) that you accept, you must ensure it is in a font format which is compatible with Povray. There are several different font formats. POV-Ray is compatible with the TrueType font format.

At times you may find that the font you want is not in the TrueType (TTF) format. In this case look for a utility that can convert the font to the Truetype format. Here are two examples of free online conversion utilities.

Other font formats you may encounter include the OpenType Format (OTF) and Embedded OpenType (EOT). The latter is actually an encrypted container which can contain both TTF and OTF fonts.

Keep in mind that Povray will not render every font as you might expect. Overly complicated fonts are best avoided in many cases. For the purpose of this article we will be using the Romeral font as an example.

A Simple 3D Scene for the Header

Using your text editor, create a file titled 3dheader.pov and add the following to it :

background {
	rgb <1,1,1>
}

camera {
	right x*500/75
	location <0, 3, -12>
	look_at <0,0.3,0> angle 35
}

light_source {
	<1, 4, 3>, <1,1,1>
	fade_distance 4 fade_power 2
	area_light x*8, y*8, 12,12 circular orient adaptive 1
}

light_source {
	<-3, 3, -3>, <1,0,0>
	fade_distance 4 fade_power 2
	area_light x*8, y*8, 12,12 circular orient adaptive 1
}

light_source {
	<0, 3, -3>, <0,1,0>
	fade_distance 4 fade_power 2
	area_light x*8, y*8, 12,12 circular orient adaptive 1
}

light_source {
	<3, 3, -3>, <0,0,1>
	fade_distance 4 fade_power 2
	area_light x*8, y*8, 12,12 circular orient adaptive 1
}

plane {
	y, -0.125
	pigment { rgb <.5059, .8667, 1> }
	finish { specular 1 reflection .3 }
}

This basic scene contains a plane that is viewed on angle from the camera with a number of surrounding area lights. There is a single white area light acting as a backlight and three colored area lights illuminating from the front. Area lights are used to create soft, smooth shadows and color transitions.

The aspect ratio is defined for the camera by the specification of right x*500/75. The width and height of the desired output are used (500 pixels wide by 75 pixels tall) to determine the correct aspect ratio. Change these to match the size of the header that you will be rendering.

With a command line terminal, navigate to the directory where you stored the above POV file. Next we will launch povray and specify the desired output resolution. Again you can change these to match the output dimensions you require.

povray 3dheader.pov +W500 +H75 +A0.0 +J

The first two parameters after the source filename (+W and +H) allow you to specify the Width and Height of the output resolution (in pixels) respectively. The last two parameters turn on maximum anti-aliasing and the default amount of jitter. When the rendering is complete, POV-Ray will have created 3dheader.png as output.

Rendering Text

Place the TrueType font file in the same directory as the POV file you created earlier. If you are using the built-in fonts you can specify them by name without needing the font file to be present. Add the following code to the POV file and save it :

text {
	ttf "romeral.ttf" "ABCDEFGH" 0.9, 0.1*x
	pigment { rgb <1.0,0.9,0.2> }
	finish {
		ambient .1
		diffuse .1
		specular 1
		roughness .001
		metallic
		reflection { .75 metallic }
	}
	rotate <30,0,0>
	translate -2.9*x
}

First we specify the font file, “romeral.ttf” (in this example). You would change this to match the filename of the font that you are using. We next specify the characters that we would like to generate (“ABCDEFGH”) along with the thickness of the text. Finally we specify the spacing between the characters (put simply). This is also known as the offset. See the official POV-Ray documentation regarding the text object for more information.

The pigment and finish are defined next. The text is rolled 30 degrees backwards and away from the camera. Lastly it is translated to the left along the X axis to achieve centering. Rendering the scene again should result in the output below.

Conclusion

This tutorial demonstrated how to use TrueType fonts with POV-Ray. It has merely scratched the surface. Along the way we learned how to set the rendering output resolution and aspect ratio. This make it convenient to render directly to a header image rather than having to later crop the output in an image editor.

Creating a more complex scene built upon these simple concepts will allow for results which are richer in detail and diversity. Perhaps the next time you need a header image you will consider rendering one yourself?

Comments

  1. This is cool!

Speak Your Mind

*

Read previous post:
Speeding up WordPress

Enhancing the performance of your Wordpress site is important to your site visitors as well as to the search engines....

Close