2

I'm writing a WebGL application. Until now I put my shaders in <script>-tags right into my standard html file (let's call it index.html). So it was easy to just "parse" the shader-code by using .text on the script-tags taken with getElementbyId('foo').

But now I think that's untidy. I want my shaders to be stored in external files with extension .vert /.frag and parse them from there. My first approach was the following:

<script id="shader-vs" src="./shaders/basic_vertexShader.vert" type="x-shader/x-vertex"></script>

<script id="shader-fs" src="./shaders/basic_fragmentShader.frag" type="x-shader/x-fragment"></script>

var shaderScript = document.getElementById(id);
if (!shaderScript) {
    return null;
}

var str = shaderScript.text;

The result is an empyt string (""). I double checked if all file-paths are correct. It seems, that .text only works for lokal tags.

So, what could I do, to receive the contents of that files? AJAX isn't a possibility, since the application should work without internet-connection, too, when it's saved on clientside's storage.

I'm thankful for every suggestion.

Important: As I mentioned I'm NOT searching for that usual AJAX-stuff. I'm searching for a possibility to get the code of external linked script-files. Since they are statically linke in the HTML-file, I thought this should be no problem without asynchrone requests. But it seems to be.

rfinster
  • 68
  • 9
  • http://stackoverflow.com/questions/5878703/webgl-is-there-an-alternative-to-embedding-shaders-in-html, http://stackoverflow.com/questions/28365163/can-i-load-a-shader-into-my-javascript-code-from-an-external-text-file, http://stackoverflow.com/questions/14219947/why-do-shaders-have-to-be-in-html-file-for-webgl-program – dekkard May 01 '15 at 14:31
  • Thank you @dekkard, but this all leads to ajax-alike recommendations :/ – rfinster May 01 '15 at 15:22

2 Answers2

1

I recommend using server-side templating to store the code in the files you mentioned but then inject it into the html. This method presents a separation of concerns: your shader files are separate the way you want, the template gets compiled then shipped out when the HTTP request comes in. A mustachey example using pseudo-code (assumes hash-literal syntax for your server-side language):

html = system.readFile('index.html');
vert = system.readFile('myVertFile.vert');
Mustache.render(html, {data: vert});

where your HTML looks like this:

<script>{{data}}</script>

This method can also be used to do any sort of conditional module loading based on the contents of the incoming http request.

Jared Smith
  • 19,721
  • 5
  • 45
  • 83
  • Thanks for your response, unfortunately there is now use of a sepcific web-server intended, yet. This may be a good solution, when the project gets bigger, but until then I have to deal without server-side-programming. – rfinster May 01 '15 at 15:13
  • You could alternatively use a build process (or even just a shell script) that injects the contents of the desired file(s) into your html file (using a regex replace for instance). You could even (depending on your revision control system) use a hook to make it run every time you commit. Otherwise, there doesn't seem to be any way to achieve your aim. Any other method will result in additional HTTP requests. – Jared Smith May 01 '15 at 15:35
  • Actually that seems to be fine. Grunt.js could handle this ... Thank you :) – rfinster May 01 '15 at 16:00
0

You can still use Ajax if you make it an offline (see comments!) html5 web app. (It depends of course on what browsers you need to support at the moment.)

Leo
  • 4,136
  • 6
  • 48
  • 72
  • The question explicitly says: the application should work without internet-connection, too, when it's saved on clientside's storage – Quentin May 01 '15 at 15:17
  • Thanks for explaining why you are downvoting, @Quentin. Much appreciated! However you are misunderstanding this. Please read about web apps. You will not need the internet connection to make them work. (And please come back here when you have read. So I know it is worth the effort telling you this. :-) ) – Leo May 01 '15 at 22:52
  • Web app is a generic term for just about any application that is run through a web browser. You seem to be confusing it with the more specific Offline Web App that makes use of the applicate cache. If you got that right, you'd need to go into a lot more detail before this would be a good answer. – Quentin May 01 '15 at 23:18
  • Ah, thanks, I was not aware that people called any web page with JavaScript a web app. Yes, of course I mean an offline html5 web app. But is there much more to say about that? Just put the files in question here in the manifest files offline file list. (For details just see any page about it, for example this excellent page: http://diveintohtml5.info/offline.html) – Leo May 02 '15 at 03:29
  • Just a small question, @Quentin, why did you downvote instead of just saying something like "you mean an offline web app"? Would not that be much more constructive and create a much more cooperative environment here? To me it looked like rfinster just had not heard about offline web apps. – Leo May 02 '15 at 04:00