draw calls optimieren

[marcgfx]

weiter gehts mit den webgl noob-fragen :). ich zeichne 120 bilder in 4 canvas/webgl-context und meine framerate sinkt bereits auf etwa 10. Ich mache also bestimmt schon ziemlich viel falsch, aber meinen recherchen zufolge mache ich wohl auch etwas das problematisch ist http://muizelaar.blogspot.ch/2011/03/dr ... calls.html.

insgesamt mache ich 480 draw calls
die bilder kommen ursprünglich aus einem sprite-sheet, das keine 2er potenz seiten hat.
sie werden einzeln in neue canvas elemente kopiert, da ich gelesen habe texSubImage2D wäre falsch dafür http://stackoverflow.com/questions/5314 ... s-in-webgl.
jede textur wird mit blending gerendert

aktuelle überlegung ist: ich müsste vermutlich wieder das sprite-sheet verwenden und texSubImage2D damit ich alles was diese textur verwendet in einem draw call abarbeiten kann, dann habe ich aber wieder ein problem mit dem z-index und dem blending.

langsam bewundere ich wie gut mein spiel in chrome läuft und frage mich ob ich es überhaupt mit webgl schneller machen kann. dort sinkt die framerate auch mal auf 10, aber da hats noch die ganze spiellogik und einige tausend bilder :)

[dot]

Spritesheet in eine Textur packen, die entsprechenden Ausschnitte auf Quads mappen, die alle in der richtigen Reihenfolge in einem Vertex Buffer liegen und alles mit einem einzigen Drawcall zeichnen... ;)

[marcgfx]

alle spritesheets in eine einzige textur reinhauen, also genau das gegenteil machen von dem was ich bis jetzt gemacht habe. hört sich plausibel an :)
danke!

[Blue Cobold]

Die Bäume sehen übrigens wieder sehr cool aus. Da werde ich neidisch ;)

[marcgfx]

@blue cobold: danke ;) hör ich doch immer gerne

hab mich jetzt ziemlich übel mit shadern rumgeschlagen, hab jetzt aber doch schon einiges mehr gecheckt. immerhin kann ich jetzt die bilder aus einem spritesheet einzeln zeichnen. was ich noch nicht versucht habe, ist die draw calls zu reduzieren. bin auch nicht sicher wo ich ansetzen muss. ich vermute mal hier:

Code: Alles auswählen

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2]), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES, 0, 6)

kann ich überhaupt in einem draw call pro quad shader parameter setzen? wenn nicht war die arbeit umsonst...

[dot]

Du willst die Texturkoordinaten als Vertexattribute übergeben und nicht als Uniforms an den Shader. Dann kannst du auch alle Quads in den selben Buffer packen und mit dem selben Shader im selben Drawcall auf einmal zeichnen... ;)

[marcgfx]

genial! hab jetzt zwar unmengen an zeit verschwendet, da ich nicht gecheckt habe dass ich sowohl position wie auch textur-coord information pro vertex übergeben muss (textur-coord sind immer die selben 12 werte), aber jetzt läuft es. bin nur grad überrascht wie krass es läuft. ich hab jetzt pro render-durchgang nur noch einen drawcall, die cpu ist grad mal knapp sichtbar verwendet und es läuft mit 60fps. im bild kann man sehen wie es mit 4 draw-calls läuft da ich in 4 canvas gleichzeitig rendere (4 spielermodus ahoi!).

bald werd ich sicher wieder fluchen, aber jetzt bin ich grad mal guter dinge :D

[marcgfx]

schon krass wie schnell die daten verarbeitet sind, wenn sie mal auf der gpu sind. mein "bottleneck" ist aktuell das aufbereiten der buffer in javascript.
massive performance verbesserungen konnte ich schon mal erzielen:
- lokale variablen
- arr.push(x) -> arr[arr.length]=x;

da ich teilweise arrays in arrays kopieren muss habe ich auch mal arr.push(x,y,z,u,v,w...) versucht, ist aber leider nicht so schnell wie einzelne pushs.
aktuell mit 4000 bewegten objekten in 4 ansichten 20fps.

das schaut noch spannend aus:http://webglsamples.googlecode.com/hg/s ... index.html

[Ingrater]

Im Idealfall solltest du die länge des arrays einmal mit arr.length = num; festlegen und danach nur noch mit arr[index] = x; elemente hineinschreiben. Dadurch sollte es nochmals entwas schneller werden.

[marcgfx]

ich lach mir grad einen ab, hab mal test cases gemacht und es wiederspricht dem was ich "bemerkt" habe massiv:
http://jsperf.com/approaches-for-array-population/3

achja deinen testfall hab ich auch mal gemacht, ohne array.length setzen wars schneller. aber es ist nicht dynamisch ohne counter variable einsetzbar.

[Spiele Programmierer]

Möglicherweise hat Ingrater gemeint, dass man besser nicht das VBO resizen sollte.

Ich habe persönlich keine Erfahrung mit WebGL, aber 4000 Objekte erscheint mir recht wenig. Bei mir waren im normalen OpenGL trotz eher alter Grafikkarte auch deutlich über 100 000 einfache 2D Objekte aus Quads kein großes Problem.

[marcgfx]

ah das würd wiederum mehr sinn machen, ich schätze mal ich kann zu lange vertexbuffer übergeben. was ich genau erwarten kann von der performance weiss ich nicht. anscheinend ist das blending, dass ich auf jedem objekte brauche schlecht dafür. folgendes video ist ziemlich interessant, bzgl. performance: http://www.youtube.com/watch?v=rfQ8rKGTVlg

[Ingrater]

Ich hab in das benchmark "static with index" eingefügt. Das hatte ich eigentlich gemeint. http://jsperf.com/approaches-for-array-population/4

WebGL mit OpenGL zu vergleichen ist schwierig. Manche Browser verwenden die Hardware überhaupt nicht zur beschleunigung. Andere Browser (Firefox) übersetzten die WebGL calls nach DirectX. Mann muss sich da immer schlau machen wie man aus dem aktuellen Browser das maximale rausholt. Im normalfall ist es aber immer so, dass dies User-Aktionen erfordert und der default grundsätzlich falsch gewählt ist.

[marcgfx]

ah ja hatte ich auch mal drin, aber da es eh nicht schneller war und nicht sonderlich flexibel erschien hab ichs rausgeschmissen ebenso eine variante mit initialisierungsliste (die deutlich am schnellsten ist!):
var arr = ["Something0",....];