If you are reading this text, apparently your HTML browser does not understand the embed element. If you know you have a VRML viewer, try opening the file: ImgObj.wrl

Using Image-based Tricons

The scene above provides a simple example of using the three special image-based objects that come with CiteMap Builder. The three objects are called ImageFlat.wrl, ImageFlatBill.wrl, and Monitor.wrl. All three objects can accept a filename of a GIF or JPG image, which must exist in the same directory as the CiteMap. When creating, the images must be placed in MyCiteMaps along with the HTML and VRML CiteMap files. When publishing, the images must be copied/transferred to the Web site along with the other CiteMap files.

The ImageFlatBill object has the special property that it will turn to face the viewer at all times. Both ImageFlat and ImageFlatBill have an optional surrounding frame.

The properties of the objects are set via the PROTO fields (Advanced) tab of the Tricon (Object) Attributes screen. Here are the settings for each of the objects, from left to right:

Left (ImageFlat):

MFString imageFilename    "lh01.jpg"
SFVec3f  imageScale       1 1 1
SFInt32  frameOnOff       0
SFColor  frameColor       0.2 0.2 0

Middle (Monitor):

SFColor  DifCol           0.8 0.8 0.6
SFColor  SpecCol          0 0 0
SFFloat  Shiny            0
MFString imageFilename    "cap01.jpg"
SFVec3f  imageScale       1 1 1

Right (ImageFlatBill):

MFString imageFilename    "prt01.jpg"
SFVec3f  imageScale       0.578 1 1
SFInt32  frameOnOff       1
SFColor  frameColor       0.2 0.2 0

The MFString values, in their simplest form, are the filenames of GIF or JPEG images. The frame for the ImageFlat objects is displayed if frameOnOff is 1, and is not displayed if frameOnOff is 0. The first two imageScale values control the shape of the image, corresponding to the dimensions in x and y (width and height) normalized so that the largest of the two numbers is 1.0. The AutoCal button (next to the imageScale entry field) asks the code to automatically calculate the correct imageScale values by reading the pixel size of the image from the specified (local) filename. For non-square images, if the imageScale is not set the image will be stretched (in the shorter direction) to make it fit the square flat.

Images in VRML

JPEG (.jpg) images are best for photos. Most VRML viewers also support GIF, which is sometimes better for "drawn" images. GIF89A images with a single transparent "background" color are often supported, as well. (For an example scene which exploits this effect, see this 3D ImageCube)

In general, image sizes should be kept small. Image file sizes can be very large, easily busting your bandwidth budget. In addition, using very large images will not yield better quality in most VRML viewers, because they downsample during texture mapping. A good rule of thumb for CiteMaps is to always use images that are 128x128 or less. 64x64 often works very well. All other things being equal, image pixel dimensions that are powers of 2 (32,64,128) work best.

Here is the CiteMap Builder CMB file for this example: ImgObj.cmb (right click to download).


Return to CiteMap Builder Examples.