Aktualisieren von einheitlichen Pufferdaten in WebGL 2?

Question

Anders als OpenGL ES 3, ohne gl.mapBufferRange und gl.bufferSubData (Es existiert), was ist die effiziente Möglichkeit, einheitliche Pufferdaten in WebGL 2 zu aktualisieren? Zum Beispiel kann ein PerDraw Uniform Block

uniform PerDraw 
{ 
    mat4 P; 
    mat4 MV; 
    mat3 MNormal; 
} u_perDraw; 

Answer 1

gl.bufferSubData existiert, so scheint es würde wie Sie einen Puffer erstellen dann eine parallele TypedArray erstellen. Aktualisieren Sie das typedArray und rufen Sie gl.bufferSubData auf, um es in den Puffer zu kopieren, um die Aktualisierung durchzuführen, und gl.bindBufferRange, um es zu verwenden.

Das ist wahrscheinlich immer noch sehr schnell. Zunächst einmal bleibt die gesamte Wertmanipulation in JavaScript erhalten, so dass weniger Aufwand für den Aufruf von WebGL entsteht. Wenn Sie 10 Uniformen zu aktualisieren bedeutet es, Sie machen zwei Anrufe in WebGL statt 10.

In TWGL.js I ArrayBufferViews für alle Uniformen in einem einzigen typisierten Array erzeugen, so zum Beispiel gegeben Uniform Block über Sie

tun können

ubo.MV[12] = tx; 
ubo.MV[13] = ty; 
ubo.MV[14] = tz; 

Oder als ein anderes Beispiel, wenn Sie eine Mathematik-Bibliothek haben, die einen Array/TypedArray als Zielparameter führen Sie Sachen wie

var dest = ubo.P; 
m4.perspective(fov, aspect, zNear, zFar, dest); 

Das einzige Problem, das ich habe zu tun mit einheitlicher Optimierung tun kann. Wenn ich einen Shader bearbeite, sage ich, dass ich debugge, und ich füge einfach output = vec4(1,0,0,1); return; an der Spitze eines Fragment-Shaders ein und ein einheitlicher Block wird optimiert, der Code wird brechen. Ich weiß nicht, wie es in C/C++ - Projekten üblich ist. Ich denke, in C++ würden Sie eine Struktur

struct PerDraw { 
    float P[16]; 
    float MV[16]; 
    float MNormal[9]; 
} 

deklarieren So geht das Problem Art von weg. In Twgl.js erzeuge ich diese Struktur effektiv zur Laufzeit, was bedeutet, wenn Ihr Code erwartet, dass es existiert, aber es wird nicht generiert, weil es aus der Code-Pause optimiert wurde.

In twgl habe ich eine Funktion erstellt, die von einem JavaScript-Objekt in das typisierte Array kopiert, so dass ich alle optimierten aus gleichförmigen Blöcken überspringen kann, die leider einige Overhead hinzufügen. Sie können die Typarray-Ansichten direkt ändern und sich beim Debuggen mit dem Bruch befassen oder die strukturierte Kopierfunktion verwenden (twgl.setBlockUniforms).

Vielleicht sollte ich Sie eine Struktur aus JavaScript in twgl angeben und generieren Sie es, und es liegt an Ihnen, damit das einheitliche Blockobjekt übereinstimmen. Das würde es eher wie C++ aussehen lassen, eine Kopie entfernen und einfacher zu handhaben sein, wenn das Debuggen von Optimierungen Blöcke entfernt.