javascript 中的内联 webgl 着色器代码答案

【问题标题】：Inline webgl shader code in javascriptjavascript 中的内联 webgl 着色器代码
【发布时间】：2012-06-21 21:28:26
【问题描述】：

我正在编写一个使用一些 WebGL 代码的简单 Javascript 库。我想在 .js 文件中包含内联着色器源，因为我的替代方法是将它们作为脚本标签包含在每个页面中，或者将它们作为单独的文件作为 AJAX 加载。这些选项都不是特别模块化。但是，由于 javascript 中缺少多行字符串，我对如何内联 WebGL 代码没有任何好的想法。有没有我没有想到的方法？

【问题讨论】：

标签： javascript shader webgl inline-code multilinestring

【解决方案1】：

每行使用一个字符串，然后将它们连接在一起，例如

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

附：一般问题之前在这里讨论过，见Creating multiline strings in JavaScript

【讨论】：

+1，这就是我做所有内联着色器的方式。我发现的最好的方法。

【解决方案2】：

我最终破解了这个：http://github.com/noteed/language-glsl/ 进入代码压缩器，通过将 Language.GLSL.Pretty 中的所有 vcat 实例替换为 hsep。我得到了一个文件中的着色器代码的单行版本，然后我可以将其粘贴到一个字符串中。我希望在发布此内容时找到已经完成的类似解决方案。

【讨论】：

【解决方案3】：

这是 NetBeans 处理此案的方式：

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

我发现这种编辑方式比为每一行创建一个数组项更有效。

【讨论】：

【解决方案4】：

自 2009 年左右以来，JavaScript 在除 IE 之外的所有浏览器中都有多行字符串。

var shader = `
code
goes
here
`;

【讨论】：