Keeping Up Appearances

Appearance Nodes

OK. As you saw with the FBOX object we defined earlier, a Shape node has a field within it called appearance. This is used to contain an Appearance node, as shown below:

DEF FBOX Shape {
        appearance Appearance {
       	        material Material {
                }
        }
        geometry Box {
        }
}

This example has one field within it's Appearance node, a material field. This way of having nodes within nodes may seem awkward, but it allows you to globally define appearances by using DEF and USE. This is useful for having many objects with the same look. An Appearance node can contain a material field or a texture field. A material field contains a Material node, surprisingly enough. A texture node contains one of a number of kinds of texturing nodes. These will be described later. First, we will deal with the Material node.

Material Nodes

The Material node can contain any of six fields. These are:

diffuseColor: The normal colour of the object.
specularColor: The colour of highlights on shiny objects.
emissiveColor: The object 'glows' with a light of it's own of this colour. It doesn't cast light on any other objects though.
ambientIntensity: The amount of ambient light that the object reflects.
shininess: How reflective the object is.
transparency: How transparent the object is. Note, some browsers will not support partly-transparent objects.

The first three of these take three arguments (RGB values), and the last three take a single argument, a value between 0 and 1. The RGB values are numbers between 0 and 1, so full red would be defined as 1 0 0, white as 1 1 1, grey as 0.5 0.5 0.5 and so on.

So, if we want to make our original cube a glowing semi-transparent green colour, we would define an appearance for it thus:

Shape {
        appearance Appearance {
		material Material {
			diffuseColor 0 0.5 0
			emissiveColor 0 0.8 0
			transparency 0.5
		}
	}
        geometry Box {
	}
}

ImageTexture

Pretty colours are all very well, but to look really good, we need to texture-map our objects. This is done using the texture field of the Appearance node. This field contains one of three types of texture node.

The first one of these that we will cover is ImageTexture. This is a basic texture map, mapping a still image onto an object. The node can texture-map an object with a JPEG or PNG file, so no GIFs round here! Some browsers support it, but it's not standard. The node contains three fields. The first, url specifies the image to use in a standard URL format. You can specify a list of images in square brackets, and the browser will display the first one in the list that it finds. The other two fields are repeatS and repeatT, which govern whether the texture repeats in the horizontal (S) direction or in the vertical (T). These take boolean values of TRUE or FALSE. They are only really useful when combined with a TextureTransform, which we won't cover until later on. You can specify transparency information in the images used, in which case it replaces the original object's transparency. If you use a greyscale texture, the diffuseColor is multiplied by the intensity of the texture to create the actual texture. In fact, you can create many effects by combining a Material node and an ImageTexture. In general, they do just what you'd expect, so experiment a little and see what you can create.

So, to texture our second Box with a brick texture, we would use the following:

Appearance {
	texture ImageTexture {
		url "brick.jpg"
		repeatS TRUE		#default
		repeatT TRUE		#default
	}
}

as the appearance node of our second box.

MovieTexture

MovieTexture takes a MPEG movie and texture-maps it onto an object in the same way as ImageTexture It has the same three fields, but also a number of others. These are:

speed: A speed value of 1 means the default speed, 2 is twice as fast. A value of 0 will always display the first frame.
loop: A boolean value, specifying whether the movie loops or not.
startTime: When to start the movie, in seconds since midnight on 1st Jan 1970.
stopTime: When to stop the movie, in seconds since midnight on 1st Jan 1970.

PixelTexture

This node allows you to define your own textures in the VRML file. This seems incredibly inefficient, but I'll explain it anyway. It has the same repeatS and repeatT fields as the other texture nodes, but has an image field instead of a URL.

The image field consists of two numbers specifying the width and height of the texture, followed by another number giving the number of components. One-component colours are greyscale, two-component colours are greyscale with transparency, three is RGB colour, and four is RGB with transparency. After these arguments, there follows a list of pixels, which are hexadecimal numbers with the one byte per component. So, a 4-component pixel that is red and 50% transparent would be 0xFF00007F. The pixels are ordered from bottom-left to top-right. An example is shown below:

DEF PIXMAP Appearance {
	PixelTexture 2 2 3 0xFF0000 0x00FF00 0x0000FF 0xFF0000
}

The End is Nigh

Right then, that's about it for this one, all that remains is the description and the code for what we have so far, and a link to the WRL file. We have two boxes as before, one transparent green, and another with a brick texture. Notice that we can't use DEF on the Shape nodes any more, as they have different textures, so are no longer identical.

Take a look at the overall effect by clicking here:
Tutorial 3 World.

That's the basics of colour and texture. There's more advanced info on textures later on, with different ways of mapping them, and so on but that comes later. A lot later.