Can I load a shader into My JavaScript code from an external text file?

Question

I learn WebGL. I see the tutorial has the code of shaders inside of JavaScript code as a usual string. For example:

var VSHADER_SOURCE =
  'void main(){\n' +
  ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
  ' gl_PointSize = 10.0;\n' +
  '}\n';

I want to place the code of my shaders into the external text files and load them into my JavaScript code when it necessary. How can I do it right? I don't want mix the JavaScript code and shader code in the same source code file.

I looked the sample LoadShaderFromFiles.html here, but it doesn't work (I use the Google Chrome version 40.0.2214.111 m). I get errors for this sample:

enter image description here

possible duplicate of WebGL - is there an alternative to embedding shaders in HTML? — user128511
– user128511, Commented Feb 8, 2015 at 2:05

Winchestro · Accepted Answer · 2015-02-09 13:52:17Z

0

It's not at all a webgl question, but you can load the code with a XMLHttpRequest but only if you start a local dev server. For security reasons.

Python comes with a very easy to use server. So if you have python installed cd into the directory you want to serve in the command line and just type

python -m SimpleHttpServer 8001

then you can navigate with your browser to localhost:8001 and should be able to send requests to your local files without compromising your security.

Another, a bit more tricky to set up solution would be to use es6, the new version of javascript with awesome template strings, really great for embedding shader code in javascript.

es6 support is browsers is still very low so you may have to use a transpiler for a while to compile it back to es5 ( currently widely supported javascript ), for example traceur.

Here's what your example looks like with es6 template strings (among other really useful features) those can just span multiple lines:

var VSHADER_SOURCE = `
  void main(){
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 10.0;
  }
`;

Another technique people use is to add script tags in html markup and load their .textContent.

html:

 <script type="glsl" id="VSHADER_SOURCE">
     void main(){
         gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
         gl_PointSize = 10.0;
     }
 </script>

js:

 var fsCode = document.getElementById("VSHADER_SOURCE").textContent;

edited Feb 9, 2015 at 13:52

answered Feb 6, 2015 at 12:07

Winchestro

2,18815 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Andrey Bushman Over a year ago

I have not pithon. Authors of that book use the XMLHttpRequest too (look the error message) and I get the problem. :(

Winchestro Over a year ago

@Bush it's actually a super common question and I would have marked it as a duplicate if the popular answers in other questions weren't almost always "disable your browser security" :)

Andrey Bushman Over a year ago

var fsCode = document.getElementById("VSHADER_SOURCE").innerText; this way works for the Google Chrome 40.0.2214 and Opera 27.0. But it doesn't work for IE 11 and Firefox 35.0.1 (as I see).

Winchestro Over a year ago

@Bush Oh yeah right .textContent is the right property to use. Good catch :)

Andrey Bushman Over a year ago

thank you. Now... I try to locate code of my shader into the external js-file and to get its content in my js-code as a string: <script type="glsl" id="VSHADER_SOURCE" src="./vshader.js"></script>. My js code: var fsh_source = document.getElementById('FSHADER_SOURCE').textContent;. But it doesn't work. Is it impossible? :(

|

Entity Black · Accepted Answer · 2015-02-06 12:13:47Z

0

This is because you are trying to load file directly from disk which is cross domain request which is forbidden in all browsers.

Very easy way to do it:

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(data) {
    console.log(data.target.response);
});
xhr.open("GET","vsshader");
xhr.send();

But vshader must be same domain, for example if you run web on http://localhost:8010 vsshader must have path http://localhost:8010/vsshader

answered Feb 6, 2015 at 12:13

Entity Black

3,5012 gold badges27 silver badges39 bronze badges

3 Comments

Andrey Bushman Over a year ago

How can I to "run web"? Usually I open my html file manually, from windows explorer.

Entity Black Over a year ago

I see, you will have to run virtual server. If you have windows, you can try to install wampserver.com/en for example. This is what I used before. It has apache inside, which is exactly what you want.

Andrey Bushman Over a year ago

Thank you. I will try install it now and try to open the LoadShaderFromFiles.html file again.

Collectives™ on Stack Overflow

Can I load a shader into My JavaScript code from an external text file?

2 Answers 2

11 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related