As part of the “Shader Programming”-Course I created a Single-Page-Application with Vue3 and Vite which aggregates a couple of Shaders. The App uses WebGL to display the shaders.

Vite has been chosen as it provides the import.meta.glob functionality, which was extensively used to dynamically import the projects based on their directory location.

For displaying the shaders the glslCanvas Package was used. It consumes a GLSL Fragment Shader as a string, as well as an optional JS object containing input parameters like an Image.

For writing the Shaders glslify was used. glslify allows for module-like imports and exports inside a glsl-File. Using a self-defined plugin (see Source Code ), any imports in the .ts files were automatically converted into a string containing the shader after it had been run through glslify.