Du bist nicht angemeldet.

Werbeanzeige

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 664

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).

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 664

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.

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 664

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 :)

4

23.07.2014, 09:18

Wird das ein RPG ? ;)

DeKugelschieber

Community-Fossil

  • »DeKugelschieber« ist der Autor dieses Themas

Beiträge: 2 664

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).

Werbeanzeige