Book Image

WebGL HOTSHOT

By : Mitch Williams
Book Image

WebGL HOTSHOT

By: Mitch Williams

Overview of this book

Table of Contents (17 chapters)
WebGL HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Transformations – translation, rotation, and scaling


We are off to a good start. Now, let's add two or more objects. If we don't want everything sitting in the same place, we need a way to position the objects in the vast universe of 3D space. The most common way is by using transformation.

Engage thrusters

We don't alter the original 3D object, but just apply some math to each point in the 3D mesh to rotate, translate (move), and/or scale the object, as follows:

<Scene>
    <Transform translation="-2 -3 -3"  rotation=".6 .8 0 .5">
        <Shape>
            <Appearance>
                <Material diffuseColor='0.9 0.6 0.3' />
            </Appearance>
         <Box/>
        </Shape>
    </Transform>
    <Transform translation="2 2.5 1" rotation="0 0 1 -.5">
        <Shape>
            <Appearance>
                <Material diffuseColor='0.3 0.9 0.6' />
            </Appearance>
            <Cone/>
        </Shape>
    </Transform>
    <Transform translation="-1 0 0" scale=".5 .5 .5">
        <Shape>
            <Appearance>
                <Material diffuseColor='0.6 0.3 0.9' />
            </Appearance>
         <Cylinder/>
        </Shape>
    </Transform>
    <Transform translation="1 0 0">
        <Shape>
            <Appearance>
                <Material diffuseColor='0.6 0.3 0.9' />
            </Appearance>
          <Cylinder/>
        </Shape>
    </Transform>
</Scene>

Objective complete – mini debriefing

Each <Shape> tag is now embedded into a <Transform> tag. The first object, the box, has a translation of (-2, -3, -3), which moves it two units to the left, three units downwards, and three units backward from the origin. It also has a rotation of (0.6, 0.8, 0, 0.5), which will be discussed in more detail later, but the first three values represent the x, y, and z axes, respectively, and the fourth value is the angle of rotation in radians (π radians = 180 degrees). Also, note that the sum of the squares of the x, y, and z values equals 1: x2 + y2 + z2 = 1.

The second object is a cone translated two units to the right, 2.5 units upwards, and one unit forward with a rotation of 0.5 radians around the z axis (like the hands of a clock). The third and fourth objects are both cylinders with a uniform 0.5 scale on the left cylinder, which means that it's half its default size. Note that the scale does not need to be the same value for all three axes.