06: textures

what is a texture?

if you think of material nodes like paint, then textures are like wallpaper, or decals and stickers that can be pasted on to the surface of a shape. In the optimized world of realtime graphics, only major forms are modeled with geometry»fine details are indicated with texture to help keep the polycount down.

texture nodes

Imagetexture{} : png, jpeg, gif [»]
MovieTexture{} : mpeg, quicktime, animated gif
PixelTexture{} : individually specified pixel colors; good for procedural texture creation [»]
TextureTransform{} : rotation and scaling of texture coordinates

texturing a single polygon

for starters, let's build a four-sided polygon and put a texture on it. The texture and poly will both be rectilinear, so it should be easy to imagine how the texture will look on the surface.

Shape {
   appearance Appearance {
      texture ImageTexture {
         url ["r.png"]
      }
   }
   geometry IndexedFaceSet {
      coord Coordinate {
         point [
            0 0 0
            0 -1 0
            1 -1 0
            1 0 0
         ]
      }
      coordIndex [
         0 1 2 3 -1
      ]
   }
}
example: single textured polygon [»]

texture interaction with surfaces

even at this simple level of texturing, you already have a lot of control over the surface appearance. this is further extended by how the vrml browser interprets different types of images:
  1. intensity only (greyscale)
  2. intensity with with alpha channel
  3. rgb only (color)
  4. rgb with with alpha channel
example: texture component levels [»]

texture coordinates

what if we didn't want to use an entire image, edge-to-edge, as our texture? we would need some way of marking out sub-sections of the texture and telling the browser what part of the texture should be pasted on what part of the shape. This is what texture coordinates are.

to distinguish them from the coordinate axes used for modelling, the texture coordinate axes in vrml are referred to as s and t, instead of x and y. Why are texture coordinates different?

no matter what dimension your texture image, the top right corner will always be at s = 1, t = 1. The origin (s = 0, t = 0) is in the bottom left, the 'usual' cartesian origin location.

working in texture coordinate space, you can specify texture vertices in a TextureCoordinate node, very similar to how you specify geometry vertices in a Coordinate node. Then, using the texCoordIndex field, you map texture vertices to geometry vertices, essentially laying out the polygons on the texture map (like you would if it were a real model, and you needed to cut out and apply veneer).

specifying subtextures with texture coordinates

#VRML V2.0 utf8

Shape {
   appearance Appearance {
      texture ImageTexture { url "simpleTcoords.jpg" }
   }
   geometry IndexedFaceSet {
      coord Coordinate { 
         point [
            -1 -1 0, # geometry vertex 0
            1 -1 0,  # geometry vertex 1
            1 1 0,   # geometry vertex 2
            -1 1 0   # geometry vertex 3
         ]
      }
      # connect geometry vertices to define a polygon
      coordIndex [ 0 1 2 3 -1 ]
      
      texCoord TextureCoordinate { 
         point [
            0 0,   # texture vertex 0
            .5 0,  # texture vertex 1
            .5 .5, # texture vertex 2
            0 .5   # texture vertex 3
         ] 
      }
      # map texture vertices to geometry vertices
      # you can change the orientation of the texture
      # as it is applied to the vertices:
      texCoordIndex [ 0 1 2 3 -1 ]
      #texCoordIndex [ 1 2 3 0 ]
      #texCoordIndex [ 2 3 0 1 ]
      #texCoordIndex [ 3 0 1 2 ]
   }	    
}
example: simple subtexture [»]

transforming texture coordinates with texture transform

example: scaled (repeating) texture [»]
example: rotated & translated texture [»]

examples

advanced texture extensions

cortona provides some additional texturing capabilites that are beyond the vrml97 specification: