I am currently in the process of developing a WebGL application, and I have encountered some challenges with shader storage...
In most examples, shaders are directly written in plaintext within the xHTML file itself. However, this approach can lead to cluttered files that are not easily cached or reusable. Organizing each shader in its own file is preferable for better organization. While it's possible to insert them using PHP in the generated output, this method increases page size and hinders efficient caching.
Another option is to fetch each shader using XmlHttpRequest, but I am concerned about the performance implications of numerous HTTP requests when loading a fresh page (especially if there are multiple shaders).
Alternatively, I have been considering dynamically consolidating all shaders into one file and then loading it with an XmtHttpRequest. This way, only one request is needed for a single file that can be locally cached by the browser. However, my Javascript skills are limited, and I am unsure of how to go about implementing this. My idea is to construct the file containing the shaders using PHP and then extracting them with Javascript.
But how should I proceed? I thought about utilizing XML or JSON to store headers in the consolidated file, and I would appreciate help with writing the Javascript code to extract them. Thank you!
A sample of what my PHP-generated shader file might look like :
<vertex-shader id="shaderA">
…shader code…
</vertex-shader>
<fragment-shader id="shaderB">
…etc…
</fragment-shader>
Or :
{ "vertexshaderA": "…shader code…",
"fragmentshaderA": "…etc…" }