draw picture

Picture is define via the ImageTexture node.
This tutorial present how to display picture, transform it and optimize resources.

Note:
For Tiny Mobile Widgets, use small images (which take less space). To do: - Remove alpha channel (transparency)
- Go to indexed color (48 colors, but depends on the rendering)

Basically, we display a picture with 2 nodes:

Bitmap: Define a picture shape
ImageTexture: Define the picture file

Note:
Picture file is in "src" folder.

Picture application

Group {
  children [
    Shape {
      appearance Appearance {
        texture ImageTexture {
          url ["img_32x32.png"]
        }
      }
      geometry Bitmap{ }
    }
  ]
}

Note:
We can use Rectangle shape to display picture. Result is same than use Bitmap shape.

Resize picture

We can resize texture with :

scale field of Transform2D node.
scale field of Bitmap node.
size field of Rectangle node.
newSize field of ImageTexture node.

Warning:
Prefer newSize field of ImageTexture node if texture size is fixed.
Other resize method increases processing and memory consumption.

Example 2

Group {
  children [
    #Default picture
    Transform2D {
      translation 0 0
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
    #Resize picture via Bitmap node
    Transform2D {
      translation -40 0
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { scale 1.25 1.25 }
        }
      ]
    }
    #Resize picture via Transform2D node
    Transform2D {
      translation 30 0
      scale 0.75 0.75
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
    #Resize picture via Rectangle node
    Transform2D {
      translation 55 0
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Rectangle { size 16 16 }
        }
      ]
    }
  ]
}

Rotate picture

When can rotate picture with the rotationAngle field of Transform2D node.
But arbitrary rotations may not be supported by pictures.
Only 0°, 90°, 180° and 270° angle are supported.

Warning:
Rotation increases processing and memory consumption.

Following example rotate picture to 180°.

Note:
rotationAngle field use radian value.

Group {
  children [
    Transform2D {
      rotationAngle 3.1415 # == 180°
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
  ]
}

Another example: Rotation of 90° and -90°

Example 2

Left picture: rotationAngle = -1.57075 (-90° or 270°)
Right picture: rotationAngle = 1.57075 (90°)

To resize a picture, use the newSize field of ImageTexture node.
With this field, only resized picture is stored in memory.

To reuse an picture in same VRML scene, use DEF / USE instructions or "cache:" URL.
Example 1: Picture is loaded and stored 2 times.

Group {
  children [
    Transform2D {
      translation 20 0
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
    Transform2D {
      translation -20 0
      children [
        Shape {
          appearance Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
  ]
}

Example 2: Picture is loaded and stored 1 time.

Group {
  children [
    Transform2D {
      translation 20 0
      children [
        Shape {
          appearance DEF TEXTURE_APP Appearance {
            texture ImageTexture { url ["img_32x32.png"] }
          }
          geometry Bitmap { }
        }
      ]
    }
    Transform2D {
      translation -20 0
      children [
        Shape {
          appearance USE TEXTURE_APP
          geometry Bitmap { }
        }
      ]
    }
  ]
}