var vertexShaderSourceString = ' ... // shadercode goes here \
// escape newlines with a backslash \
';
Personally I prefer the html-variant, because the newline escaping disturbs me. If you switch mode for example in emacs from html to c you get some syntax highlighting.
You can load external text file with shader using XMLHttpRequest object.
var getSourceSynch = function(url) {
var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
return (req.status == 200) ? req.responseText : null;
};
so then you can pass it as a paramater to the shaderSource function, f.e.:
var shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, getSourceSynch("shaders/vertex.shdr"));
Note that if you test on your local machine using file protocol instead of http then req.status should be compared to 0 and on chrome/chromium you must have –allow-file-access-from-files parameter added
More here (in polish with example): http://3dgames.pl/blog/2011/02/blender- … anslation/
I am helping with an OpenGL/Computer Graphics course, and would like to allow use WebGL as one of three implementation languages: OpenGL, OpenGL-ES, and WebGL.
One issue is that we would like the shaders be independent files, so we can use them in all three languages. This prompts us to use XMLHttpRequests (AJAX), but we would like to avoid exposing the class to the sophistication of async i/o. Instead, we’d prefer a simple loadfile(filename) procedure, like wglb suggests, that returns when the file is loaded.
So: what do you suggest? We do have a perfectly usable loadfile(filename) solution, but it is not async and I’m told this is Not Done! I.e. it freezes the browser during the sync request.
Is there a way loadfile() could be async yet still retain a simple programming model? Or is sync really OK, not to worry? Or some other great solution I haven’t thought about!