Inline webgl shader code in javascript

Question

I'm writing a simple Javascript library that makes use of some WebGL code. I'd like to include the shader sources inline in the .js file, because my alternatives are to include them as script tags in each page, or to have them as separate files which are loaded as AJAX. Neither of these options are particularly modular. However, due to the lack of multi-line strings in javascript, I don't have any good ideas for how to inline the WebGL code. Is there an approach I'm not thinking of?

Answer 1

JavaScript has had multiline strings in all browsers except IE since about 2009.

var shader = `
code
goes
here
`;

Answer 2

Use a single string per line and then join them together, e.g.

var shader = [
   "// line1 ",
   "// line2 ",
].join('\n');

P.S. The general problem was discussed here before, see Creating multiline strings in JavaScript

Answer 3

I ended up hacking this: http://github.com/noteed/language-glsl/ into a code compactor, by replacing all instances of vcat with hsep in Language.GLSL.Pretty. I get a one-line version of the shader code I have in a file, that I can then just paste into a string. I was hoping to find a similar solution already done when I posted this.

Answer 4

This is the way NetBeans handle the case:

var shader = 
"firstLine\n\
secondLine\n\
thirdLine";

I found this way more efficient for editing than having to create an array item for each line.