Hallo,
momentan schreibe ich meine Bachelorarbeit über das (grobe) Thema "3D-Rendering im Browser mit WebGPU und emscripten" und bin dabei eine "3D-Engine" zu erstellen.
Mithilfe der Tutorials von
emscripten und
Vulkan Tutorial, der
API Spezifikation von WebGPU und
Demo Implementationen, habe ich es geschafft ein rotierendes Viereck, wie im
Vulkan Tutorial, anzuzeigen. (s. Anhang 1)
Der Code dazu:
Github (master branch) (Alles wichtige eigentlich in der
src/main.c)
Nun wollte ich das alles ein bisschen aufräumen und abstrahieren um eine "einfache" API zum Erstellen von 3D-Szenen zu haben. Dafür habe ich mich ein bisschen an der WebGPU-Implementation von
sokol orientiert (soweit ich es verstanden habe).
Meine Idee war es die Daten in
Meshes (Vertex- und Index-Daten),
Materials (Rendering-Pipeline) und
RenderObjects (Kombination eines Meshs, eines Materials und weitere Daten (z.B. Transform)) zu teilen.
Der Code dazu:
Github (spider branch) (
src/spider.h und
src/example.c sind hier die wichtigen Dateien) (ist nicht lauffähig)
Nun habe ich aber Probleme dabei, die Ressourcen (z.B. Uniform Buffer) richtig aufzuteilen:
- Ein Uniform Buffer pro RenderObject mit der dazugehörigen MVP-Matrix?
- Ein Uniform Buffer pro Material, der für jedes RenderObject mit diesem Material aktualisiert wird?
- Ein Uniform Buffer, der entsprechend immer aktualisiert wird?
- Ich habe auch gelesen, dass man einen Uniform Buffer benutzen kann, der mehrere UBOs beinhaltet, und dann für jedes Objekt mit einem Offset auf die jeweiligen Daten zugreift.
Das ist jetzt nur eins der Probleme, die ich aktuell habe und nicht wirklich weiß wie ich sie lösen soll.
Mir ist auch gar nicht so die konkrete Lösung (wenn es hier überhaupt die goldene Lösung gibt) wichtig, sondern das Verständnis des Gesamtkonstruktes.
TLDR: Mir fehlt, glaube ich, noch ein bisschen der generelle Überblick, wie das mit den 3D-APIs (Vulkan ist ja z.B. relativ ähnlich wie WebGPU) so funktioniert. Die einfachen Demos mit einem bunten Dreieck bekomme ich hin und verstehe da auch größtenteils, wie das zusammenhängt. Mir fällt hierbei der Schritt momentan noch schwer, das auszubauen und zu "abstrahieren".
Ich wäre froh wenn sich jemand, der sich damit auskennt, mir da ein bisschen weiterhelfen kann (gerne direkt, aber auch gerne durch Verweise auf Tutorials etc.)