WebGL-除了在HTML中嵌入着色器之外，还有其他选择吗? [英] WebGL - is there an alternative to embedding shaders in HTML?

问题描述

在WebGL中使用GLSL着色器的流行方法似乎是将它们嵌入到主要的html文件中. 顶点和片段着色器嵌入在以下标签中:

The popular way of using GLSL shaders in WebGL seems to be to embed them in the main html file. The vertex and fragments shaders are embedded in tags like:

<script id="shader-fs" type="x-shader/x-fragment">

这与我在Mozilla开发人员网络页面的WebGL示例中看到的约定相同.

This is the same convention I see in the WebGL samples in the Mozilla Developer Network page.

这对于简单的应用程序很好用，但是当您的复杂应用程序带有许多着色器时，html文件会变得混乱. (我一直在编辑错误的着色器！)另外，如果您想重复使用着色器，此方案将很不方便.

This works fine for simple apps, but when you have a complex app with a number of shaders, the html file gets cluttered. (I keep editing the wrong shader!) Also if you want to reuse your shaders, this scheme is inconvenient.

因此，我正在考虑将这些着色器放在单独的XML文件中，并使用XMLHttpRequest()加载它们.然后我看到其他人也有相同的想法:

So I was thinking about putting these shaders in a separate XML files and loading them using XMLHttpRequest(). Then I saw that someone else had the same idea:

http://webreflection. blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html

我喜欢使用.c文件的建议，因为它为GLSL提供了语法突出显示和其他编辑器便利.

I like the suggestion to use .c files, since that gives you syntax highlighting and other editor conveniences for GLSL.

但是上述方法的问题是(据我所知)XMLHttpRequest()无法在开发和测试WebGL应用程序时加载本地.c文件(即，在客户端).但是在此过程中始终将其上传到服务器很麻烦.

But the issue with the above approach is that (as far as I understand) XMLHttpRequest() cannot load a local .c file - ie, on the client side - while you are developing and testing the WebGL app. But it is cumbersome to keep uploading it to the server during this process.

因此，如果我想将着色器保留在html文件之外，是将它们作为字符串嵌入代码中的唯一选择吗?但这将使编写和调试变得很困难...

So if I want to keep the shaders out of the html file, is the only option to embed them as strings in the code? But that would make it hard to write as well as debug...

对于在WebGL应用程序中管理多个GLSL着色器的任何建议，我将不胜感激.

I'd appreciate any suggestions on managing multiple GLSL shaders in WebGL apps.

致谢

修改(2011年5月5日)

由于我使用Mac进行开发，因此我决定启用Apache服务器，并将我的webgl代码放在 http://localhost下/〜用户名/.这回避了文件问题:在开发过程中禁用了协议.现在，由于使用了http:而不是file :，因此javascript文件加载代码可在本地工作.只是以为我会把它放在这里，以防有人发现它有用.

Since I use a Mac for development, I decided to enable Apache server, and put my webgl code under http://localhost/~username/. This sidesteps the issue of file: protocol being disabled during development. Now the javascript file loading code works locally since http: is used, rather than file:. Just thought I'd put this up here in case anyone finds it useful.

推荐答案

是的，如果要使用XHR，本地服务器确实是唯一的方法.我已经写了一堆WebGL课程，并且经常考虑放弃将着色器嵌入HTML中，但是由于我需要编写的有关Web安全性的大量解释而被吓到了.

Yup, a local server's really the only way to go if you want to use XHR. I've written a bunch of WebGL lessons, and have often considered moving away from embedding the shaders in the HTML, but have been scared off by amount of explanation about web security I'd need to write...

幸运的是，运行服务器非常容易.只需打开外壳然后

Fortunately it's super easy to run a server. Just open a shell then

cd path-to-files
python -m SimpleHTTPServer

然后将浏览器指向

http://localhost:8000

适用于纹理和GLSL等简单情况.有关视频和音频流的信息，请参见

That works for simple cases like textures and GLSL. For video and audio streaming see

什么是Python的http.server(或SimpleHTTPServer)的更快替代品?

另一方面，所有支持WebGL的浏览器支持

On the other hand every browser that supports WebGL supports ES6 mutli-line template literals so if you don't care about old browsers you can just put you shaders in JavaScript using backticks like this

var vertexShaderSource = `
  attribute vec4 position;
  uniform mat4 u_matrix;

  void main() {
    gl_Position = u_matrix * position;
  }
`;

这篇关于WebGL-除了在HTML中嵌入着色器之外，还有其他选择吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！