2012-11-16 13 views
7

ich auf der Zeichnung große gerichtete azyklische Graphen in WebGL arbeite: http://www-graphics.stanford.edu/papers/h3/eine Baumstruktur 3D-Zeichnung in WebGL

An diesem Punkt habe ich eine einfache Zwei-Ebene graph-Rendering:

enter image description here

Leistung ist schrecklich - es dauert etwa 1,5-2 Sekunden, um diese Sache zu machen. Ich bin kein OpenGL-Experte, also hier ist der allgemeine Ansatz, den ich nehme. Vielleicht kann jemand auf einige Optimierungen hinweisen, die das Rendern beschleunigen.

enter image description here

Ich bin erstaunt, wie lange es dauert, die Modelview Matrix und Puffer an die Grafikkarte zu drücken. Hier wird der Löwenanteil der Zeit verschwendet. Sollte ich stattdessen MODELVIEW-Transformationen im Vertex-Shader machen?

Dies führt mich zu glauben, dass die Modelview Matrix manipulieren und es einmal für jeden Knoten drückt nicht eine schlechte Praxis sein sollte, aber die Zeiten liegen nicht:

https://gamedev.stackexchange.com/questions/27042/translate-the-modelview-matrix-or-change-vertex-coordinates

+0

Wie hast du es mal gemacht? Timings lügen. Einige Browser sind parallelisiert, so dass das Timing schwierig ist. In jedem Fall, sagen Sie, es dauert 1,5 bis 2 Sekunden pro Bild? Ich verstehe nicht ganz, was Sie tun, aber einfache Szene Grafik mit 24 Würfeln alle zu etwas Mitte parented sollte bei 60hz laufen gut gehen. Sind Sie (1) einmal Shader kompilieren, nicht in der Render-Schleife (2) Keine glGet-Funktionen in Ihrer Render-Schleife aufrufen? (3) Laden Sie Ihre Vertex-Daten nur einmal, nicht in Ihrer Render-Schleife hoch? Hoffe, das sind keine dummen Fragen, aber Sie sollten in der Lage sein ~ 1000 Würfel mit einer angemessenen Geschwindigkeit zu zeichnen. – gman

Antwort

2

Gruppenknoten in größeren Chunks, anstatt sie separat zu rendern. Führen Sie im Hintergrund Zwischenspeichern aller Geometrie mit angewendeten Transformationen durch, die höchstwahrscheinlich nicht geändert werden, und speichern Sie sie in einem Puffer und rendern Sie sie in einem Aufruf.

Eine andere Lösung: Speichern Knoten (Box + Zeile) in einem Puffer (Sie können mehr als Sie zur aktuellen Zeit benötigen) und ihre Transformationen in Textur. Wenden Sie Transformationen im Vertex-Shader basierend auf dem Knotenindex (Texturkoordinaten) an. Es sollte schneller schneller schneller sein.

Um den Support zu testen, verwenden Sie this site. Ich habe MAX_VERTEX_TEXTURE_IMAGE_UNITS | 4

Beste Lösung wird Geometry Instancing sein, aber es wird derzeit nicht in WebGL unterstützt.

+0

Gibt es keine Lib, die helfen kann, die Knoten in Gruppen zu rendern? Afaik d3 wird auch von Canvas verwendet (nicht nur von SVG), ist es gut für diesen Zweck? – inf3rno