在 HTML 中加载 GLSL 文件 (WebGL)？

Question

我想要的：

<script src="shader.glsl" type="x-shader/x-fragment"></script>
<script src="shader.glsl" type="x-shader/x-vertex"></script>

或：

<script src="shader.frag" type="x-shader/x-fragment"></script>
<script src="shader.vert" type="x-shader/x-vertex"></script>

所以我有 2 种简单的着色器类型：

类型=x-shader/x-fragment

precision mediump float;

void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

类型=x-shader/x-vertex

attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}

着色器来自this WebGL tutorial

我可以将这两种类型合二为一吗.glsl？
如果不是，他们的着色器类型的其他文件格式如：
- .vert
- .frag

问：我想用它做什么？
A: 从 JavaScript 动态加载我的文件并将其插入到我的 HTML 文件中。

问：想知道如何动态加载文件吗？
答：不，与问题无关 "load GLSL file (WebGL) in HTML?"

问：那你想要什么？
A：看问题开头的What I want.

问：您想分享您的 JavaScript 导入代码吗？
A: 是的，但我认为这是能够回答问题的无关紧要的信息

Answer 1

在我的 C++ OpenGL 项目中，我创建了一个 .vs（顶点）和一个 .fs（片段）。除非您使用需要特定扩展的库、片段或引擎，否则这可以是您想要的任何内容。着色器（就像任何文件一样）只是文本文件。叫什么并不重要，重要的是内容。我不完全确定 webGL 与标准 OpenGL 的工作方式相同，因为我从未使用过它，但它可能是并且具有相同的功能。

关于脚本标签，您可以使用它，但我很确定它不会将文件传递给您。因此将不得不编写一些代码来读取内容并创建着色器。所以我猜你需要做这样的事情：

function init()
{
    const scriptElements = document.getElementsByTagName('script');
    const len = scriptElements.length;
    for(let i = 0; i < len; i++)
    {
        const curr = scriptElements[i];
        const type = curr.getAttribute('type');
        if(type == null)
          continue;
         
        if(type.indexOf("x-shader") === -1);
            continue;

        const offset = type.indexOf('/')+1;
        const length = type.length;
        const realType = type.substr(offset, length);
        
        //if realType == x-fragment then its a fragment shader
        //if realType == x-vertex then its a vertex shader
    }
}

init();

<body>
</body>

<script src="test.vertex" type="x-shader/x-fragment"></script>

注意：当您运行时，代码段将不起作用，它不会从 html.

中获取脚本元素

您还可以为所有顶点着色器提供 class“顶点”，为所有片段着色器提供 class“片段”，然后执行 getElementsByClassName，遍历它们并将它们加载到

Answer 2

这样不行。
查看规格：https://www.w3.org/TR/html5/semantics-scripting.html#data-block

When used to include data blocks, the data must be embedded inline, the format of the data must be given using the type attribute, and the contents of the script element must conform to the requirements defined for the format used. The src, charset, async, defer, crossorigin, and nonce attributes must not be specified.

（因此数据块必须是内联的，如 https://www.w3.org/TR/html5/semantics-scripting.html#dom-htmlscriptelement-text 所示 - 然后可以通过 .text 或 .textContent 访问它们）

因此，如果您想从单独的文件加载 GLSL，请恢复为 XMLHttpRequest（或一些 AJAX 包装器）。

Answer 3

您可以使用套接字 io 在页面加载后将 GLSL 作为文本动态加载。例如，如果您的服务器支持 Websockets，或者甚至只支持 XHR。很惊讶 WebGL 没有提供这个。

这还有一个有趣的好处，即不直接发布您宝贵的 GLSL 文件，并且还会跳过缓存。

Answer 4

我想 XMLHttpRequest 是可能的。我们可以用它来读取文件。但是，据我所知，我们不应该在 src 参数中使用本地地址。因为浏览器，尤其是Chrome，会报这样的错误"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." How to read a local text file? 但是我们可以运行 js工程，在localhost中包含glsl文件，然后调用这个文件。示例：http://localhost:8080/webgl/shader.glsl

步骤：

首先，如果您使用 Windows，则在计算机上安装 Xampp。操作系统有不同的选择。
在 htdocs (C:\xampp\htdocs) 文件夹中添加您的 WebGL 项目。
我们需要使用 XMLHttpRequest 来读取 glsl 文件。创建 readFile 函数。

我想，它可能有用。

在 HTML 中加载 GLSL 文件 (WebGL)？

load GLSL file (WebGL) in HTML?

javascript

shader

glsl

webgl