Inline webgl shader code in javascript - Stack Overflow

admin管理员组

文章数量:1325011

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?

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?

• javascript
• shader
• webgl
• inline-code
• multilinestring

Share Improve this question Follow asked Jun 19, 2012 at 19:13 EdwardEdward 1,82611 gold badge1616 silver badges3333 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

var shader = `
code
goes
here
`;

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

I ended up hacking this: http://github./noteed/language-glsl/ into a code pactor, 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.

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.

本文标签： Inline webgl shader code in javascriptStack Overflow