Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

[Solved] WebGL 2D Sprite rotieren

Werbeanzeige

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

1

22.07.2014, 14:39

[Solved] WebGL 2D Sprite rotieren

Hallo,

ich habe doch etwas Blut geleckt was JavaScript angeht, und schreibe daher gerade meine eigene Engine.
Sie basiert auf WebGL und dem HTML5 canvas.

Gut, soweit hab ich auch alles was man zum Rendern erstmal braucht, nur funktioniert die Rotation der Sprites nicht.
Der Code ist nahezu der gleiche wie bei meiner C++ Version, trotzdem wird offenbar um die falsche Achse rotiert.

Hier mal ein Screenshot:


(Link)


Das sollte eigentlich ein Quadrat sein, um die linke untere Ecke rotiert (45°).
Die Rotationsmatrix wird so aufgestellt (0815 Rotationsmatrix):

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

bb.mat3.prototype.rotate = function(angle){
    var m = new bb.mat3();
    var co, si;

    angle = angle*(Math.PI/180);
    si = Math.sin(angle);
    co = Math.cos(angle);

    m.values[0] = co;
    m.values[1] = si;
    m.values[2] = 0;

    m.values[3] = -si;
    m.values[4] = co;
    m.values[5] = 0;

    m.values[6] = 0;
    m.values[7] = 0;
    m.values[8] = 1;

    this.mult(m);
};


Ich verstehe nicht warum das so aussieht. Der Rest funktioniert, also Transformation/Skalierung.
Ich hatte auch probiert über eine Achse zu rotieren, hat nicht geholfen (alle durchprobiert). Es scheint so als hätte mein Koordinatensystem gerade keine Ausrichtung.
Aber ich dachte Standard wäre da entlang der x-Achse? Ohne WebGL funktioniert diese Funktion wunderbar...

Die ortho Matrix sieht so aus:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

this.ortho = new math.mat3();
this.ortho.identity();
this.ortho.ortho(0, 0, width, height);

// aus:

bb.mat3.prototype.identity = function(){
    this.clear(); // setzt 0en
    
    this.values[0] = 1;
    this.values[4] = 1;
    this.values[8] = 1;
};

bb.mat3.prototype.ortho = function(x, y, width, height){
    if(x != width && y != height){
        var m = new bb.mat3();
        
        m.values[0] = 2/(width-x);      
        m.values[4] = 2/(height-y);
        m.values[6] = -(width+x)/(width-x);
        m.values[7] = -(height+y)/(height-y);
        m.values[8] = 1;

        this.mult(m);
    }
};


Die ganze Matrix Klasse (und restlichen Code) findet ihr hier (webgl branch).
Der Shader liegt in BurningByteJs/gl/shader.

[Edit]

Achso, die zweite Frage war warum mein Koordinatensystem zentriert ist, und nicht unten links in der Ecke beginnt (viewport ist auf 0, 0, Höhe, Breite).
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »DeKugelschieber« (23.07.2014, 12:10)

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

2

22.07.2014, 22:24

Ja also ich weiß es immer noch nicht.
Aber hier mal die Live Demo (in der nicht rotiert wird): klick, mit rechter Maustaste verschieben.
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

3

23.07.2014, 00:16

Okay Problem behoben. Hatte einen Fehler in der Multiplikation.
So sieht es besser aus:


(Link)


Jetzt ist der Ursprung meines Koordinatensystems unten links, Ende gut alles gut :)
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

Roflo

Alter Hase

Beiträge: 955

  • Private Nachricht senden

4

23.07.2014, 09:18

Wird das ein RPG ? ;)

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

5

23.07.2014, 11:35

Hmm keine Ahnung, bis jetzt ist das ein Haufen Code der WebGL stark vereinfacht.
Ein Spiel setzt man z.B. so auf:

Quellcode

 
1
2
3

var game = new bb.core.Game(document.getElementById("canvas"));
game.states.push(new Playing(game._gl, game.canvas));
game.update();


Und mit 5-6 weiteren Zeilen bekommt man dann auch das erste Sprite gerendert...
Die IsoMap da oben macht genau das, mit der batch Funktion allerdings deutlich schneller (ein draw call).
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

Werbeanzeige

Ähnliche Themen