在HTML中加载GLSL文件(WebGL)

我想要什么：

<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种简单的着色器类型：

type = x-shader/x-fragment

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

type = x-shader/x-vertex

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

着色器来自此WebGL教程

我可以在一个.glsl中添加这两种类型吗？
如果不是其他文件格式，则类型为：
- .vert
- .frag

Q：我要使用什么？
答：从JavaScript动态加载文件并将其插入到我的HTML文件中。

问：您想知道如何动态文件吗？
答：不，这与" html中的加载GLSL文件(WebGL("的问题无关。"

问：那你想要什么？
答：看看问题开始时我想要的东西。

问：您想共享您的JavaScript导入代码吗？
答：是的，但是我认为这是无关紧要的信息，可以回答问题

这是不可能的。
请参阅规格：https：//www.w3.org/tr/html5/semantics-scripting.html#data-block

当用于包含数据块时，必须将数据嵌入内联，必须使用类型属性给出数据的格式，并且脚本元素的内容必须符合使用使用的格式定义的要求。不得指定src，charset，异步，递送，crossorigin和nonce属性。

(如https://www.w3.org/tr/html5/semantics-scripting.html#dom-htmlscriptlement-text中，数据块必须是内联的.textContent(

，如果要从单独的文件加载glsl，请恢复为XMLHttpRequest(或某些AJAX包装器(。

您可以使用套接字IO在页面加载后动态加载GLSL作为文本。如果您的服务器支持Websocket，甚至仅支持XHR。WebGL不提供此事感到惊讶。

这也有一个有趣的好处，即不直接发布您的珍贵GLSL文件，还可以跳过缓存。

我想XMLHttpRequest可能这是可能的。我们可以将其用于文件阅读。但是，据我所知，我们不应在SRC参数中使用本地地址。因为浏览器，尤其是Chrome，会出现这样的错误："仅支持协议方案：HTTP，数据，Chrome，Chrome，Chrome-Extension，HTTPS，Chrome-Extension-extension-Resource"。如何读取本地文本文件？但是我们可以运行JS项目并将GLSL文件包含在LocalHost中，然后调用此文件。示例：http://localhost:8080/webgl/shader.glsl

步骤：

首先，如果您使用Windows，则在计算机上安装XAMPP。OSS有不同的选择。
在htdocs(c： xampp htdocs(文件夹中添加您的WebGL项目。
我们需要使用XMLHttpRequest来读取GLSL文件。创建readfile函数。

我认为，它可能有效。

在我的opengl项目中，我创建了.vs(vertex(和a .fs(fragment(。除非您使用需要一定扩展名的库，碎片或引擎，否则这可能是您想要的任何东西。着色器(就像任何文件一样(只是文本文件。这并不重要，它与内容有关。我不确定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中获取脚本元素。

您还可以给所有顶点着色器提供"顶点"类。以及所有片段着色器类"片段"并做getElementsByClassName，循环循环并加载它们

相关内容

最新更新

热门标签：