Post

Transforming Shapes

Posted Updated
By CREATE3000
4 min read

Motivation

  • By default, all shapes are built at the center of the world
  • A Transform enables you to
    • Position shapes
    • Rotate shapes
    • Scale shapes

Using coordinate systems

  • A X3D file builds components for a world
  • A file’s world components are built in the file’s world coordinate system
  • By default, all shapes are built at the origin of the world coordinate system

Transforming a coordinate system

A transform creates a coordinate system that is

  • Positioned
  • Rotated
  • Scaled

relative to a parent coordinate system

Shapes built in the new coordinate system are positioned, rotated, and scaled along with it

Syntax: Transform

The Transform group node creates a group with its own coordinate system

  • translation - position
  • rotation - orientation
  • scale - size
  • children - shapes to build

XML Encoding

1
2
3
4
5
6

<Transform
    translation='...'
    rotation='...'
    scale='...'>
  <!-- children -->
</Transform>

Classic VRML Encoding

1
2
3
4
5
6

Transform {
  translation ...
  rotation ...
  scale ...
  children [ ... ]
}

Including children

The children field includes a list of one or more nodes

XML Encoding

1
2
3
4
5
6
7

<Transform ...>
    <Shape><!-- ... --></Shape>
    <Shape><!-- ... --></Shape>
    <Transform><!-- ... --></Transform>
    <!-- # And other child nodes -->
    <!-- ... -->
</Transform>

Classic VRML Encoding

1
2
3
4
5
6
7
8
9
10

Transform {
  ...
  children [
    Shape { ... }
    Shape { ... }
    Transform { ... }
    # And other child nodes
    ...
  ]
}

Translating

Translation positions a coordinate system in X, Y, and Z.

XML Encoding

1
2
3
4
5

<!-- X Y Z -->
<Transform
    translation='2.0 0.0 0.0'>
  <!-- children ... -->
</Transform>

Classic VRML Encoding

1
2
3
4
5

Transform {
  # X Y Z
  translation 2.0 0.0 0.0
  children [ ... ]
}

Rotating

Rotation orients a coordinate system about a rotation axis by a rotation angle

  • Angles are measured in radians
  • radians = degrees / 180.0 * 3.1415927

XML Encoding

1
2
3
4
5

<!-- X Y Z Angle -->
<Transform
    rotation='0.0 0.0 1.0 0.52'>
  <!-- children ... -->
</Transform>

Classic VRML Encoding

1
2
3
4
5

Transform {
  # X Y Z Angle
  rotation 0.0 0.0 1.0 0.52
  children [ ... ]
}

Specifying rotation axes

  • A rotation axis defines a pole to rotate around
  • Like the Earth’s North-South pole

Typical rotations are about the X, Y, or Z axes:

Rotate aboutAxis
X-Axis1.0 0.0 0.0
Y-Axis0.0 1.0 0.0
Z-Axis0.0 0.0 1.0

Using the Right-Hand Rule

Positive rotations are counter-clockwise

To help remember positive and negative rotation directions:

  • Open your hand
  • Stick out your thumb
  • Aim your thumb in an axis positive direction
  • Curl your fingers around the axis
  • The curl direction is a positive rotation

Scaling

Scale grows or shrinks a coordinate system by a scaling factor in X, Y, and Z.

XML Encoding

1
2
3
4
5

<!-- X Y Z  -->
<Transform
  scale='0.5 0.5 0.5'>
  <!-- children ... -->
</Transform>

Classic VRML Encoding

1
2
3
4
5

Transform {
  # X Y Z
  scale 0.5 0.5 0.5
  children [ ... ]
}

Scaling, rotating, and translating

Scale, Rotate, and Translate a coordinate system, one after the other.

XML Encoding

1
2
3
4
5
6

<Transform
    translation='2.0 0.0 0.0'
    rotation='0.0 0.0 1.0 0.52'
    scale='0.5 0.5 0.5'>
  <!-- children ... -->
</Transform>

Classic VRML Encoding

1
2
3
4
5
6

Transform {
  translation 2.0 0.0 0.0
  rotation 0.0 0.0 1.0 0.52
  scale 0.5 0.5 0.5
  children [ ... ]
}

Read operations bottom-up:

  • The children are scaled, rotated, then translated
  • Order is fixed, independent of field order

A sample transform group

XML Encoding

1
2
3
4
5
6
7
8
9
10
11
12
13

<Transform
    translation='-2.0 3.0 0.0'>
  <Shape>
    <Appearance>
      <Material/>
    </Appearance>
    <Cylinder
        radius='0.3'
        height='6.0'
        top='false'>
  </Shape>
</Transform>
<!-- ... -->

Classic VRML Encoding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Transform {
  translation -2.0 3.0 0.0
  children [
    Shape {
      appearance Appearance {
        material Material { }
      }
      geometry Cylinder {
        radius 0.3
        height 6.0
        top FALSE
      }
    }
  ]
}
...

Summary

  • All shapes are built in a coordinate system
  • The Transform node creates a new coordinate system relative to its parent
  • Transform node fields do
    • translation
    • rotation
    • scale

Shapes, Geometry, and Appearance

Tutorials
Transforming Shapes
This post is licensed under CC BY 4.0 by the author.