Keeping Up Appearances

Appearance Nodes

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

This example has one field within its 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 its 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.

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 {
         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"
   }
}

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 (TRUE or FALSE), 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 by hand in the VRML file. This seems incredibly inefficient, but it does have it's uses, as you'll see later. It 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 {
   texture PixelTexture {
      image 2 2 3 0xFF0000 0x00FF00 0x0000FF 0xFF0000
   }
}

We just need a quick description of hexadecimal numbers here. Often in computer-land, it's convenient to specify numbers not in normal decimal numbers (0-9) or binary (0-1), but in another type of number called hexadecimal. This is base 16, and the numbers go like this:

Hexadecimal	Decimal
0	0
1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
A	10
B	11
C	12
D	13
E	14
F	15

So, F in hexadecimal is 15 in decimal. 10 in hex is 16 in decimal. Hexadecimal numbers are normally specified with a 0x on the front for easy recognition. So, 0x10 = 16, 0xFF = 255, and 0x7F = 127. You get the idea, I'm sure. You don't need to use these much, so don't worry about it too much if you don't. You can pick it up later.

The End is Nigh

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.