Im Rahmen des “Shaderprogrammierung”-Kurses wurde mit Vue3 und Vite eine Single-Page-Application Entwickelt welche Mithilfe von WebGL für den Kurs programmierte Shader darstellt.

Als Bundler wurde Vite verwendet. Grund hierfür ist das import.meta.glob Feature. Es wird für das dynamische Importieren von Projekten anhand der Verzeichnisstruktur verwendet.

Für die Darstellung der Shader wurde das glslCanvas Paket verwendet. Es erwartet einen GLSL Fragment Shader als string, sowie ein optionales JS-Objekt welches parameter wie Bilder beinhaltet.

Für das Schreiben der Shader wurde glslify verwendet. glslify erlaubt es über JS-ähnliche Syntax Code-Fragmente zu importieren. Mithilfe eines eigens definierten Vite-Plugins (siehe Quellcode ) werden alle Shader-Imports in den .ts Dateien automatisch in einem String konvertiert welcher den durch glslify durchlaufenen Shader definiert.

glslify hat ein Modul mit welchem Shader direkt in JS konvertiert werden können. Dies führte jedoch in meinem Fall zu Problemen weshalb ich die von glslify bereitgestellte Konsolenanwendung verwendet habe.