DGL • Thema anzeigen - WebGL: Rotation und Bewegung mit Quaternionen

WebGL: Rotation und Bewegung mit Quaternionen

Moderator: DGL-Team

Seite 1 von 1

[ 4 Beiträge ]

Vorheriges Thema | Nächstes Thema

Autor

Nachricht

revolte

Betreff des Beitrags: WebGL: Rotation und Bewegung mit Quaternionen

Verfasst: Sa Feb 02, 2013 20:05

DGL Member

Registriert: Fr Mai 16, 2008 20:26
Beiträge: 158
Wohnort: Berlin
Programmiersprache: c++,c#,java,ruby,php

Guten Abend,
Ich arbeite an einer kleinen Engine in WebGl.

Vorgeschichte:
Bisher funktionierte eine grobe Steuerung der Kamera ohne Probleme mit Matrizen.
Jetzt wollte ich jedoch eine umschaltbare Kamera haben von First zu Third Person oder auch gänzlich frei in der Bewegung haben.
Das klappte nach tagelangen Rumprobieren und Durchstöbern nicht. Irgendwie scheinen auch sehr viele Formeln/Beispiele die es im Internet gibt bei mir nicht direkt zu gehen, so wie sie sollten.

Die Spielfigur hatte ich mit Matrizen irgendwann im Griff und ich konnte sie auch korrekt steuern. Jedoch gelang es mir nicht dir Kamera auf den Spieler zu richten und gleichzeitig hinter ihm zu platzieren.
Eines von beiden funktionierte immer nur. Wollte ich dann die Kamera drehen lassen, drehte sie sich immer um den Szenenursprung. Inzwischen gab es auch viele Multiplikationen und Invertierungen, weshalb ich alles auf Quaternionen umgestellt habe, was über 20% schneller und eigentlich auch einfacher nachvollziehbar ist.

Jedoch bekomme ich es immer noch nicht hin.

Probleme:
1. Der Spieler kann sich nur noch auf den Weltkoordinatenachsen bewegen, bei den Matrizen wusste ich wie ich den Translationsvektor bearbeiten muss, damit er sich auf die lokalen Koordinatenachsen des Spielerobjektes auswirkt. Bei Quaternionen leider nicht, außer ich forme sie erst in eine Matrix um, aber dann ist der ganze Witz an der Sache weg wie ich finde.

2. Die Kamera rotiert immer um den Ursprung, das Problem hatte ich schon vorher oft. Aktuell ist das Cameraquaternion nur das invertierte Spielerqquaternion.
Bei den Matrizen war das Problem immer, dass die Kamera sich um eine Position etwas weiter vor sich rotierte und nicht genau um die eigene Y-Achse.

3. Wenn ich die Camera kippe um 45° um die X-Achse, dann bewegt sie sich auch nach oben oder unten weg beim bewegen, was ungewollt ist. Das liegt auch mit Problem 1 zusammen, dass ich nicht mehr weiß, wie ich an die korrekten Achsen komme. Ich hab einige Funktionen versucht die Vektoren mit den Quaternionen zu rotieren, aber dann wird alles nur noch merkwürdiger.

4. Seit ich Quaternionen einsetze scheint die Normalenmatrix nicht mehr zu stimmen, gut zu erkennen an dem einen Affenkopf, wenn das Licht auf der Z-Achse verschoben wird.
Muss da etwas spezielles beachtet werden anstatt das invertierte Quaternion zu nehmen und in eine 3x3 Matrix umzuformen?
Eventuell stimmen auch die Bi/Tangenten und Normalen nicht (Mit N aktivierbar).

Live-Beispiel: Damit sich das auch angeguckt werden kann, am besten in Chrome, dort sind Schieberegler vorhanden.
http://tunnistava.systemcloud.de/
oben/unten/links/rechts : Pfeiltasten zum steuern (Richtungen stimmen aber irgendwie nicht)
n: aktiviert die Normalen/Tagenten/Bitagenten-Ansicht
a: aktiviert Antialising mit Fxaa (was noch nicht korrekt geht)

Codeausschnitte:
Ich benutze Matrizen die so aufgebaut waren/sind:

Code:

 x,  x,  x, x
 y,  y,  y, y
 z,  z,  z, z
px,py,pz, w

Shadercodeauszug:

Code:

    gl_Position = projektionsMatrix * modelviewMatrix * transformationsMatrix * vec4(vertexPosition, 1.0);

Projektionsmatrix ist klar.
modelviewmatrix ist meine Cameramatrix.
transformationsmatrix ist die Matrix des VBO-Objektes mit Drehungen und Verschiebungen, aus Performancegründen wird die Multiplikation im Shader gemacht.

Steuerungupdate pro Frame:

Code:

this.update = function() {
        this.camera.createViewport();
        var fps = this.fpsCounter.getFPS();
        var faktor = (fps > 0) ? fps : 1.0;
 
        var playerMatrix = this.player.getMatrix().duplizieren();
        var speed = this.player.getPhysik().getSpeed();
        var newX = new Vektor4();
        var newZ = new Vektor4();
        var playPo = playerMatrix.holePosition();
 
        if (this.accelerationSeitlich > 0 || this.accelerationSeitlich < 0) {
            newX.z = 0; //playPo.x * ((this.accelerationSeitlich * speed * 25) / faktor);
            newX.y = 0; //playPo.x * ((this.accelerationSeitlich * speed * 25) / faktor);
            newX.x = ((this.accelerationSeitlich * speed * 25) / faktor);
        }
        if (this.accelerationBewegung > 0 || this.accelerationBewegung < 0) {
            newZ.z = ((this.accelerationBewegung * speed * 25) / faktor);
            newZ.y = 0;//playPo.z * ((this.accelerationBewegung * speed * 25) / faktor);
            newZ.x = 0;//playPo.z * ((this.accelerationBewegung * speed * 25) / faktor);
        }
        var playerVektor = Math3D.addierenV4V4(newX, newZ);
        playerVektor.invertieren();
        playerVektor.x += playPo.x;
        playerVektor.y += playPo.y;
        playerVektor.z += playPo.z;
        var rotQuatY = new Quaterion();
        rotQuatY.identity();
//Mausbewegung in X
        if (this.deltaX) {
            rotQuatY.rotationAchse(0.0, 1.0, 0.0, this.deltaX);
        }
        var rotMatrixX = new Quaterion();
        rotMatrixX.identity();
// Zwischengespeicherter Winkel, sollte am besten durch das Quaternion komplett abgebildet werden
        winkelC += this.deltaY;
        rotMatrixX.rotationAchse(1.0,0.0,0.0,winkelC);        
//Mausbewegung in Y
        if (this.deltaY) {
            //  rotMatrixX = Math3D.createRotationsM(0.0, 1.0, 0.0, -this.deltaY / 1.0);
        }
        playerMatrix = QuaterionMath.multiplizierenQQ(rotQuatY,playerMatrix);
        playerMatrix.setzePosition(playerVektor);
        cameraMatrix = playerMatrix.duplizieren();
        cameraMatrix.invertieren();
        this.player.setMatrix(playerMatrix);
        this.camera.setMatrix(cameraMatrix);
    };

Hoffe einer hat eine clevere Idee, ich komme seit Wochen nicht wirklich voran. Nichts scheint zu helfen und ich rate mehr ins Blaue inzwischen, als dass ich mir noch etwas herleiten kann.

Grüße

_________________
System: Phenom XII X4 955 3,21Ghz , GTX 560 TI, 4GB-Ram, Windows 7 64x

Nach oben

Coolcat

Betreff des Beitrags: Re: WebGL: Rotation und Bewegung mit Quaternionen

Verfasst: So Feb 03, 2013 15:15

DGL Member

Registriert: Do Dez 29, 2005 12:28
Beiträge: 2249
Wohnort: Düsseldorf
Programmiersprache: C++, C#, Java

Zitat:

bei den Matrizen wusste ich wie ich den Translationsvektor bearbeiten muss, damit er sich auf die lokalen Koordinatenachsen des Spielerobjektes auswirkt. Bei Quaternionen leider nicht, außer ich forme sie erst in eine Matrix um, aber dann ist der ganze Witz an der Sache weg wie ich finde.

Quaternionen alleine können ausschließlich Rotationen darstellen. Keine Translation und keine Skalierung.
ABER, du kannst Quaternionen mit einem Translationsvektor kombinieren und das ganze in eine Klasse verpacken, so dass der Translationsvektor immer korrekt aktualisiert wird.Bei Coolmath gibt es die "Frame"-Klasse die genau das macht.

Für deine Kamera brauchst du aber eigentlich keine Quaternionen. Es sollte ausreichen dir eine LookAt-Funktion zu bauen. Dort gibt du einfach die gewünschte Kameraposition und den Punkt auf den sie blicken soll an. Außerdem noch einen Up-Vektor um anzugeben wo oben im Bild sein soll. Siehe auch http://wiki.delphigl.com/index.php/gluLookAt

In CoolMath sieht die Funktion so aus:

Code:

template<typename T, int N, int M>
Matrix<T,4,4> Matrix<T,N,M>::lookAt(const Vector<T,3>& eye, const Vector<T,3>& center, const Vector<T,3>& up)
{
    STATIC_ASSERT(N==4 && M==4, "Operation only allowed for 4x4 matrices.");
    Vector<T,3> f = center - eye;
    f.normalize();
    Vector<T,3> s = cross(f, up);
    s.normalize();
    Vector<T,3> u = cross(s, f);
    return Matrix<T,4,4>(   s.x,              u.x,       -f.x, 0,
                            s.y,              u.y,       -f.y, 0,
                            s.z,              u.z,       -f.z, 0,
                         -dot(s,eye), -dot(u,eye), dot(f,eye), 1);
}

Edit:

Zitat:

Muss da etwas spezielles beachtet werden anstatt das invertierte Quaternion zu nehmen und in eine 3x3 Matrix umzuformen?

Die Normalmatrix ist die invertierte und transponierte WorldView-Matrix. Also nicht vergessen zu transponieren. Da du aber dank Quaternionen nur Rotation und ggf. Translation hast (und keine Skalierung oder Scherungen) heben sich das invertieren und transponieren gegenseitig auf. Du kannst also einfach den 3x3-Teil der resultierenden Matrix benutzen.

_________________
Yeah! :mrgreen:

Nach oben

revolte

Betreff des Beitrags: Re: WebGL: Rotation und Bewegung mit Quaternionen

Verfasst: So Feb 03, 2013 19:10

DGL Member

Registriert: Fr Mai 16, 2008 20:26
Beiträge: 158
Wohnort: Berlin
Programmiersprache: c++,c#,java,ruby,php

Edit:
Ich glaube die Mathematik wird an sich stimmen, aber meine Vorgehensweise wohl nicht.
Vielleicht muss ich nur irgendetwas normalisieren bzw. invertieren.
Diese Mathematik ist nichts für mich.

1. Auf einen Tastendruck reagieren und einen Vektor erstellen z.B. 1,0,0 für eine Bewegung in X-Richtung
2. Spielerquaterion rotieren bei Mausbewegung

Variante1
3. Auf den neuen Vektor die alten Positionen dazuaddieren
4. Die Position dem Spielerobjekt zuordnen
5. Beim Zeichnen des VBOs die Rotationsmatrix aus dem Quaterion erzeugen
6. Die Felder [12], [13], [14] auf die Vektorkoordinaten X, Y, Z setzen

Variante2
3. Den Vektor mit einer der Methoden unten drehen
4. Dann zur alten Position dazuaddieren
5. Beim Zeichnen des VBOs die Rotationsmatrix aus dem Quaterion erzeugen
6. Die Felder [12], [13], [14] auf die Vektorkoordinaten X, Y, Z setzen

Variante3
3. Auf den neuen Vektor die alten Positionen dazuaddieren
4. Die Position dem Spielerobjekt zuordnen
5. Beim Zeichnen des VBOs die Rotationsmatrix aus dem Quaterion erzeugen
6. Die Felder [12], [13], [14] auf die Vektorkoordinaten X, Y, Z setzen, welche vorher mit einer der Methoden unten gedreht werden

-------------
Ich hab auch eine eigene Klasse, die beides kapselt und anpasst, jedoch klappt die Vektoranpassung einfach noch nicht.

Code:

 
v' = q * v * (q^-1)
q*/(magnitude(q))^2 (q* is the conjugate)
implementiert in this.rotationsVektor2
 

Ist die Formel die ich oft dazu finde.
Hier sind alle Varianten die ich durchprobiert habe. Setze ich dann die Werte in die Matrix ein passiert oft nichts, als dass sich die Figur weiterhin auf den Weltachsen bewegt.
Ich bin durch das wochenlange Ausprobieren und durchlesen einfach nur total verwirrt, dabei wird es ganz einfach sein.
Wenn ich Zuerst eine Matrix erstelle aus dem Quaterion und mit einer Translationsmatrix multipliziere dann geht es.
Ich hatte auch schon einige LookAt-Funktionen probiert, aber die wollten auch nicht so wirklich funktionieren. Diese scheint bisher besser zu gehen, solange die Vektoren stimmen.
Danke dafür schon mal (:

Code:

    
this.rotationsVektor = function(vektor) {
         var vec = new Vektor4();   // any constructor will do
         vec.x = 2.0*(this.x*vektor.z*this.z + this.y*vektor.z*this.w - this.x*vektor.y*this.w + this.y*vektor.y*this.z) + vektor.x*(this.x*this.x + this.y*this.y - this.z*this.z - this.w*this.w);
         vec.y = 2.0*(this.x*vektor.x*this.w + this.y*vektor.x*this.z - this.x*vektor.z*this.y + this.z*vektor.z*this.w) + vektor.y*(this.x*this.x - this.y*this.y + this.z*this.z - this.w*this.w);
         vec.z = 2.0*(this.x*vektor.y*this.y - this.x*vektor.x*this.z + this.y*vektor.x*this.w + this.z*vektor.y*this.w) + vektor.z*(this.x*this.x - this.y*this.y - this.z*this.z + this.w*this.w);
         return vec;
}
this.rotationsVektor2 = function(vektor) {
        var tmp = this.duplizieren();
        tmp.konjugante();
        var tmp2 = new Quaterion();
        tmp2.setzeX(vektor.x);
        tmp2.setzeY(vektor.y);
        tmp2.setzeZ(vektor.z);
        tmp2.setzeW(0.0);
 
        var tmp3 = QuaterionMath.multiplizierenQQ(this, tmp2);
        var tmp4 = QuaterionMath.multiplizierenQQ(tmp3, tmp);
        return (new Vektor4(tmp4.holeX(), tmp4.holeY(), tmp4.holeZ(), 0.0));
    }
    this.rotationsVektor3 = function(vektor) {
        var k0 = this.w * this.w - 0.5;
        var k1;
        var rx;
        var ry;
        var rz;
        // k1 = Q.V
        k1 = vektor.x * this.x;
        k1 += vektor.y * this.y;
        k1 += vektor.z * this.z;
        // (qq-1/2)V+(Q.V)Q
        rx = vektor.x * k0 + this.x * k1;
        ry = vektor.y * k0 + this.y * k1;
        rz = vektor.z * k0 + this.z * k1;
        // (Q.V)Q+(qq-1/2)V+q(QxV)
        rx += this.w * (this.y * vektor.z - this.z * vektor.y);
        ry += this.w * (this.z * vektor.x - this.x * vektor.z);
        rz += this.w * (this.x * vektor.y - this.y * vektor.x);
        //  2((Q.V)Q+(qq-1/2)V+q(QxV))
        rx += rx;
        ry += ry;
        rz += rz;
        return new Vektor4(rx, ry, rz, 0.0);
    };
    this.rotationsVektor4 = function(vektor) {
        var result = new Vektor4();
        var a00 = this.x * this.x;
        var a01 = this.x * this.y;
        var a02 = this.x * this.z;
        var a03 = this.x * this.w;
        var a11 = this.y * this.y;
        var a12 = this.y * this.z;
        var a13 = this.y * this.w;
        var a22 = this.z * this.z;
        var a23 = this.z * this.w;
        var a33 = this.w * this.w;
        result.x = vektor.x * (+a00 + a11 - a22 - a33)
                + 2 * (a12 * vektor.y + a13 * vektor.z + a02 * vektor.z - a03 * vektor.y);
        result.y = vektor.y * (+a00 - a11 + a22 - a33)
                + 2 * (a12 * vektor.x + a23 * vektor.z + a03 * vektor.x - a01 * vektor.z);
        result.z = vektor.z * (+a00 - a11 - a22 + a33)
                + 2 * (a13 * vektor.x + a23 * vektor.y - a02 * vektor.x + a01 * vektor.y);
        return result;
    };
    this.rotationsVektor5 = function(vektor) {
        var vektorRotiert = vektor.duplizieren();
        vektorRotiert.normalisieren();
        var vecQuat = new Quaterion();
        var resQuat = this.duplizieren();
        resQuat.invertieren();
        vecQuat.setzeX(vektorRotiert.x);
        vecQuat.setzeY(vektorRotiert.y);
        vecQuat.setzeZ(vektorRotiert.z);
        vecQuat.setzeW(0.0);
        resQuat = QuaterionMath.multiplizierenQQ(vecQuat, resQuat);
        resQuat = QuaterionMath.multiplizierenQQ(this, resQuat);
        return (new Vektor4(resQuat.x, resQuat.y, resQuat.z, 0.0));
    };

_________________
System: Phenom XII X4 955 3,21Ghz , GTX 560 TI, 4GB-Ram, Windows 7 64x

Nach oben

revolte

Betreff des Beitrags: Re: WebGL: Rotation und Bewegung mit Quaternionen

Verfasst: Mi Feb 13, 2013 09:08

DGL Member

Registriert: Fr Mai 16, 2008 20:26
Beiträge: 158
Wohnort: Berlin
Programmiersprache: c++,c#,java,ruby,php

Hallo,
ich hab es teilweise hinbekommen mit Quaternionen, nur die Kamera will noch nicht ganz so wie sie sollte.

1. Also mit der lookAt Funktion kann ich zwar den Charakter oder in beliebiges Objekt im Fokus halten, jedoch sind die Eye-Koordinaten falsch. Selbst wenn ich etwas einsetze bewegt sich die Kamera komisch. Der Eye-Vektor wird als Abstand zum Koordinaten Ursprung genommen, so dass sie um den Ursprung dreht.
1.1 Deshalb habe ich das jetzt mit Quaternionen gemacht.
Das einzige Problem was jetzt besteht, ist, dass die Kamera zwar korrekt um den Charakter kreisen kann, allerdings nicht auf ihn blickt. sondern immer in eine feste Richtung.
Nach der Invertierung kann ich zwar weitere Drehungen anwenden, die sich nur auf die Kamera beziehen, jedoch werden dann auch wieder die Koordinaten beeinflusst.

Code:

 
        var pV = playerQuat.holePositionE(10.0);
/*
    this.holePositionE = function(faktor) {
        var localVor = this.holeVorwaerts(); // Hole den aktuellen Vektor für die Lokale Z-Achse
        localVor.x *= faktor; // Vektor skalieren für den Abstand
        localVor.y *= faktor;
        localVor.z *= faktor;
        var gesamt = Math3D.addierenV4V4(localVor, this.vektor); // Verschiebung addieren
        return gesamt;
    };
*/
        pV.x = pV.x*-1; // Die Invertierung wird später mal woanders gemacht werden, wenn alles klappt
        pV.y = 2*-1;
        pV.z = pV.z*-1;
var cameraQuat = new Quaterion();  //neues Quaternion
cameraQuat.identity(); // x,y,z =0, w =1
cameraQuat.invertieren(); 
cameraQuat.setzePosition(pV); // Position setzen
 

2.
Der Charakter kann jetzt korrekt bewegt und gedreht werden. Mein Problem war, dass die falschen Achsen benutzt wurden und nicht die korrekten lokalen Y- und X-Achsen. Für alle, die das auch brauchen:

Code:

        var rotQuatY = new Quaternion(); //neues Quaternion
        rotQuatY.identity(); // x,y,z =0, w =1
        if (this.deltaX) { //wenn Mausdrehung links/rechts
            rotQuatY.rotationAchse(0.0, 1.0, 0.0, this.deltaX / -1.0);       // Rotations Quaternion erstellen
        }
        var playPos = playerQuat.holePosition(); // Position speichern
        playerQuat = QuaternionMath.multiplizierenQQ(rotQuatY, playerMatrix); // Rotation auf das vorhandene Spielerquaternion anwenden
        playerQuat.setzePosition(playPos); // Position wieder setzen
        var speed = this.player.getPhysik().getSpeed(); // Geschwindigkeit ermitteln
        if (this.accelerationSeitlich > 0 || this.accelerationSeitlich < 0) { //wenn seitlich bewegt
            playerQuat.bewegeX(((this.accelerationSeitlich * speed * 25.0) / faktor));
/*
    this.bewegeX = function(faktor) {
        this.vektor.x += (1.0 - (2.0 * ((this.y * this.y) + (this.z * this.z)))) * faktor;
        this.vektor.y += (2.0 * ((this.x * this.y) - (this.z * this.w))) * faktor;
        this.vektor.z += (2.0 * ((this.x * this.z) + (this.y * this.w))) * faktor;
    };
*/
        }
        if (this.accelerationBewegung > 0 || this.accelerationBewegung < 0) { // wenn vorwärts bewegt
            playerQuat.bewegeZ(((this.accelerationBewegung * speed * 25.0) / faktor));
/*
    this.bewegeZ = function(faktor) {
        this.vektor.x += (2.0 * ((this.x * this.z) - (this.y * this.w))) * faktor;
        this.vektor.y += (2.0 * ((this.y * this.z) + (this.x * this.w))) * faktor;
        this.vektor.z += (1.0 - (2.0 * ((this.x * this.x) + (this.y * this.y)))) * faktor;
    };
*/
        }
 

Damit kann der Charakter wunderbar bewegt werden.

Grüße

_________________
System: Phenom XII X4 955 3,21Ghz , GTX 560 TI, 4GB-Ram, Windows 7 64x

Nach oben

Seite 1 von 1

[ 4 Beiträge ]

Foren-Übersicht » Programmierung » Mathematik-Forum

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste

Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.