Exkurs - X3D

Transformationen

Transformationen sind grundlegende Operationen, die man auf einem Körper ausführen kann. Wir verwenden drei Arten von Transformationen: Versetzungen (Translationen), Rotationen und Skalierungen.

Translation

Ein Objekt befindet sich nach seiner Erschaffung zunächst im Ursprung eines Koordinatensystems. Um es an anderer Stelle erscheinen zu lassen, ist eine Translation nötig:

<!-- roter Kegel -->
<Transform translation='2 0 0'> 
    <Shape>
        <Cone bottomRadius=".5" height="1" />
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    </Shape>
</Transform>

<!-- weisser Kegel -->
<Shape>
    <Cone bottomRadius=".5" height="1" />
    <Appearance>
        <Material diffuseColor="1 1 1"/>
    </Appearance>
</Shape>

Hier erzeugen wir zwei Kegel, einen weißen und einen roten. Den roten Kegel versetzen wir mittels Translation durch den Tag <transform translation="2 0 0"></transform> welcher ein Objekt um 2 Einheiten auf der X-Achse versetzt. Die anderen beiden Parameter, die auf 0 stehen, würden ihn auf der Y- bzw. der Z-Achse versetzen.

Aufgabe 1

Baue folgende Figur nach:



Radius kleine Kugeln: 0.25
Radius große Kugel: 1
Abstand kleine Kugeln zu großer Kugel: 4

Rotation

Neue Objekte "stehen" nach ihrer Erzeugung sozusagen auf der Ebene, auf der die X- und die Z-Achse verläuft, Kegel "zeigen" dann nach oben auf der Y-Achse. Diese Richtung wird mit Rotation verändert.

<!-- roter Kegel -->
<Transform rotation='0 0 1 1.57'>
    <Shape>
        <Cone bottomRadius=".5" height="1" />
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    </Shape>
</Transform>

<!-- weisser Kegel -->
<Shape>
    <Cone bottomRadius=".5" height="1" />
    <Appearance>
        <Material diffuseColor="1 1 1"/>
    </Appearance>
</Shape>

Hier wurde der rote Kegel um 90° nach links rotiert. Unser Tag dafür hier ist ein wenig komplizierter: <transform rotation="0 0 1 1.57"> </transform>

Die ersten 3 Zahlen legen fest, um was rotiert wird, genauer gesagt um welchen Vektor, in diesem Fall der Vektor (0,0,1), also praktisch um die Z-Achse. Die nächste Zahl ist das Bogenmaß des gewünschten Winkels - 1,57 ist in etwa die Hälfte von Pi und steht damit für 90°. Zum Umrechnen:

Radians = Grad · π / 2

Aufgabe 2

Baue folgende Figur nach:



Radien: 0.25
Höhen: 0.5
Tip: modifiziere den Code der Aufgabe in Translation.

Skalierung

<!-- rote Kugel -->
<Transform scale="4 2 1">
    <Shape>
        <Sphere radius="1"/>
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    </Shape>
</Transform>

Scale verzerrt ein Objekt entlang der Achsen. Hier verzerren wir das Objekt auf das vierfache auf der X-Achse, auf das doppelte auf der Y-Achse und belassen die Größe auf der Z-Achse.

Aufgabe 3

Baue folgende Figur nach:

Mehrfache Transformation

<!-- roter Kegel -->
<Transform translation='2 0 0'> 
    <Transform rotation='0 0 1 1.57'>
        <Shape>
            <Cone bottomRadius=".5" height="1" />
            <Appearance>
                <Material diffuseColor="1 0 0"/>
            </Appearance>
        </Shape>
    </Transform>
</Transform>

<!-- weisser Kegel -->
<Shape>
    <Cone bottomRadius=".5" height="1" />
    <Appearance>
        <Material diffuseColor="1 1 1"/>
    </Appearance>
</Shape>

Auf einem Objekt können auch mehrere Transformationen ausgeführt werden wie demonstriert. Man kann beide Transformationen in denselben Tag schreiben, also <transform rotation="0 0 1 1.57" translation="2 0 0"></transform>, aus Übersichtsgründen rate ich davon jedoch ab.

Hinweis: Die Reihenfolge der Transformationen ist nicht egal - will man ein Objekt rotieren, so macht man dies am Besten im Ursprung, also vor Translationen. Andernfalls rotiert man die Position sozusagen mit - die Rotationsachse geht durch den Ursprung. Ein weiteres Beispiel dafür:

<Transform translation='2 0 0'> 
    <Transform rotation='0 0 1 .79'>
        <Transform scale="3 1 1">
            <Shape>
                <Box size='1 1 1'/>
                <Appearance>
                    <Material diffuseColor="1 0 0"/>
                </Appearance>
            </Shape>
        </Transform>
    </Transform> 
</Transform> 

<Transform translation='-2 0 0'> 
    <Transform scale="3 1 1">
        <Transform rotation='0 0 1 .79'>
            <Shape>
                <Box size='1 1 1'/>
                <Appearance>
                    <Material diffuseColor="1 0 0"/>
                </Appearance>
            </Shape>
        </Transform>
    </Transform> 
</Transform> 

Dieser Code erzeugt folgende Szene:

Der einzige Unterschied der beiden Objekte (abgesehen von der Translation) ist die Reihenfolge, in der skaliert und rotiert wird. In einem Fall erhalten wir einen rotierten Quader, im anderen Fall ein Rautenprisma.