我可以从一个外部文本文件将着色器加载到我的JavaScript代码中吗?[英] Can I load a shader into My JavaScript code from an external text file?

本文是小编为大家收集整理的关于我可以从一个外部文本文件将着色器加载到我的JavaScript代码中吗?的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

i 学习 WebGL.我看到该教程在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.html 在这里 t工作(我使用Google Chrome版本40.0.2214.111 m).我会发现此示例的错误:

推荐答案

根本不是WebGL问题,但是您可以使用XMLHttpRequest加载代码,但前提是您启动本地DEV服务器.出于安全原因.

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;

其他推荐答案

这是因为您试图直接从磁盘上加载文件,这是所有浏览器中禁止的跨域请求.

这样做的非常简单的方法:

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

但Vshader必须是相同的域,例如,如果您在 http://localhost:8010/vsshader

本文地址:https://www.itbaoku.cn/post/2091108.html

问题描述

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

推荐答案

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;

其他推荐答案

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