PDA

View Full Version : How to include shaders?



zed
02-02-2011, 01:59 PM
ATM in the html page Im going

<script id="Myshader-vs" type="x-shader/x-vertex">
.....
.....

But I'ld like to have a separate file/s with the shaders, + then in the html go

<script type="x-shader/x-vertex" src="Myshader-vs"></script>

but this doesnt work.

Any ideas of a better method than what Im currently using

cheers Zed

einSelbst
02-02-2011, 03:59 PM
You can write it in a js-String in your JS-file.



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.

peace,
einSelbst

zed
02-02-2011, 11:43 PM
yes thats a method of doing it, but thats even worse than what Im doing at the moment
but cheers anyways

wglb
02-03-2011, 08:50 AM
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/ (http://3dgames.pl/blog/2011/02/blender-json-exporter-with-english-translation/)

zed
02-03-2011, 11:55 AM
Cheers wglb, yes that should work. Ill give it a go later on

backspaces
02-19-2011, 11:15 AM
I'm also struggling with this. Here's the story:

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!

SteveBaker
02-19-2011, 03:26 PM
I do it synchronously - and while doing synchronous I/O is generally a bad idea, in this case, the shader files are so tiny that it hardly matters.

brcain
09-12-2011, 10:35 AM
Hello and my apologies for replying to an old thread.

Is there a simple example of "including" shader source? I've tried the technique described above with no luck.

I'm a relative newbie to HTML5 and WebGL ... many years experience with GL, GLSL, etc.

Any help is greatly appreciated.

Thanks,
Ben

gliniak
09-27-2011, 11:43 PM
Here you have working loading shader sources from external file: http://3dgames.pl/blog/2011/02/blender- ... anslation/ (http://3dgames.pl/blog/2011/02/blender-json-exporter-with-english-translation/) (Search for getSourceSynch function)