我可以从外部文本文件加载着色器到我的JavaScript代码吗？

I learnWebGL。我看到教程将JavaScript代码中的着色器代码视为常用字符串。例如：我可以从外部文本文件加载着色器到我的JavaScript代码吗？

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

我想我的着色器的代码放入外部文本文件并将它们加载到我的JavaScript代码时有必要。我该怎么做对不对？我不想将JavaScript代码和着色器代码混合在同一个源代码文件中。

我看样品LoadShaderFromFiles.htmlhere，但它不起作用（我使用Google Chrome版本40.0.2214.111米）。我得到的错误此示例：

enter image description here

来源

2015-02-06 Andrey Bushman

可能重复[WebGL的vshader必须是同一个域，例如 - 有一个替代嵌入着色器在HTML？]（http://stackoverflow.com/questions/5878703/webgl-is-there-an-alternative-to-embedding-shaders-in-html） – gman 2015-02-08 02:05:36

这根本不是一个问题的WebGL，但是你可以加载代码与XMLHttpRequest但只有当你启动一个本地开发服务器。出于安全原因。

Python带有一个非常易于使用的服务器。所以，如果你有Python的安装光盘放入要在命令行以服务和目录只需键入

python -m SimpleHttpServer 8001

那么你可以用你的浏览器导航到localhost:8001，应该能够将请求发送到您的本地文件，而无需牺牲你的安全。

另一个，设置解决方案稍微复杂一点就是使用es6，新版本的JavaScript与真棒模板字符串，真的非常适合在JavaScript中嵌入着色器代码。

es6支持浏览器仍然很低，因此您可能需要使用一段时间的编译器将其编译回es5（当前广泛支持的javascript），例如traceur。

这里是你的榜样是什么样子与ES6模板字符串（其他真正有用的功能中）那些可以直接跨越多行：

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

人用另一种方法是添加脚本标记的HTML标记，并加载它们.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;

来源

2015-02-06 12:07:19 Winchestro

我还没有pithon。那本书的作者也使用了'XMLHttpRequest'（查看错误信息），我得到了这个问题。:( – 2015-02-06 12:11:24

谢谢你，我也会试试这个 – 2015-02-06 12:29:46

@Bush它实际上是一个超常见的问题，如果其他问题中的流行答案几乎总是“禁用浏览器安全性”，我会将它标记为重复项:) – Winchestro 2015-02-06 12:38:41

这是因为你试图直接从磁盘这是它在所有的浏览器禁止跨域请求加载文件。

非常简单的方法来做到这一点：

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

但是，如果你在http://localhost:8010 vsshader运行网络必须有路径http://localhost:8010/vsshader

的

来源

2015-02-06 12:13:47

如何“运行网站”？通常我从Windows资源管理器手动打开我的html文件。 – 2015-02-06 12:16:16

我明白了，你将不得不运行虚拟服务器。如果您有窗口，则可以尝试安装http://www.wampserver.com/en/。这是我以前用过的。它里面有apache，这正是你想要的。 – 2015-02-06 12:20:15

谢谢。我将尝试立即安装并尝试再次打开LoadShaderFromFiles.html文件。 – 2015-02-06 12:28:00

我可以从外部文本文件加载着色器到我的JavaScript代码吗？

回答

相关问题