Reader small image

You're reading from  WebGL HOTSHOT

Product typeBook
Published inMay 2014
Publisher
ISBN-139781783280919
Edition1st Edition
Concepts
Right arrow
Author (1)
Mitch Williams
Mitch Williams
author image
Mitch Williams

Mitch Williams has been involved with 3D graphics programming and Web3D development since its creation in the mid 1990s. He began his career writing software for digital imaging products before moving on as Manager of Software for Vivendi Universal Games. In the late 1990s, he started 3D-Online, his own company, where he created "Dynamic-3D", a Web3D graphics engine. He has worked on various projects ranging from interactive 3D medical procedures, online 3D training for the Department of Defense, creating one of the first 3D mobile games prior to the launch of the iPhone, and graphics card shader language programming. He has been teaching Interactive 3D Media at various universities including UC Berkeley, UC Irvine, and UCLA Extension.
Read more about Mitch Williams

Right arrow

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.

Previous PageNext Page
You have been reading a chapter from
WebGL HOTSHOT
Published in: May 2014Publisher: ISBN-13: 9781783280919
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime

Author (1)

author image
Mitch Williams

Mitch Williams has been involved with 3D graphics programming and Web3D development since its creation in the mid 1990s. He began his career writing software for digital imaging products before moving on as Manager of Software for Vivendi Universal Games. In the late 1990s, he started 3D-Online, his own company, where he created "Dynamic-3D", a Web3D graphics engine. He has worked on various projects ranging from interactive 3D medical procedures, online 3D training for the Department of Defense, creating one of the first 3D mobile games prior to the launch of the iPhone, and graphics card shader language programming. He has been teaching Interactive 3D Media at various universities including UC Berkeley, UC Irvine, and UCLA Extension.
Read more about Mitch Williams