web-dev-qa-db-ja.com

JavascriptとWebGL、外部スクリプト

ちょっと興味があるんだけど; WebGLシェーダーを外部ファイルに配置するにはどうすればよいですか？

現在私は持っています。

    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
            precision highp float;
        #endif

        void main(void)
        {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    </script>

    <script id="shader-vs" 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);
        }
    </script>

私のhtmlヘッダーで、外部ファイルからこれにリンクするにはどうすればよいですか？ -私は通常のjavascriptアプローチを試しました。

<script type="text/javascript" src="webgl_shader.js"></script>
javascriptexternalexternwebglopengl-es-2.0
25
Skeen

外部ファイルの場合、scriptタグの使用を停止する必要があります。 XMLHttpRequest のようなものを使用することをお勧めします。また、ファイルの名前を変更することをお勧めします。これらはJavascriptではなくシェーダーであるため、混乱を避けるために別の拡張子を使用してください。 「shiny_surface.shader」のようなものを使用します。

これが私がすることです：

function loadFile(url, data, callback, errorCallback) {
    // Set up an asynchronous request
    var request = new XMLHttpRequest();
    request.open('GET', url, true);

    // Hook the event that gets called as the request progresses
    request.onreadystatechange = function () {
        // If the request is "DONE" (completed or failed)
        if (request.readyState == 4) {
            // If we got HTTP status 200 (OK)
            if (request.status == 200) {
                callback(request.responseText, data)
            } else { // Failed
                errorCallback(url);
            }
        }
    };

    request.send(null);    
}

function loadFiles(urls, callback, errorCallback) {
    var numUrls = urls.length;
    var numComplete = 0;
    var result = [];

    // Callback for a single file
    function partialCallback(text, urlIndex) {
        result[urlIndex] = text;
        numComplete++;

        // When all files have downloaded
        if (numComplete == numUrls) {
            callback(result);
        }
    }

    for (var i = 0; i < numUrls; i++) {
        loadFile(urls[i], i, partialCallback, errorCallback);
    }
}

var gl;
// ... set up WebGL ...

loadFiles(['vertex.shader', 'fragment.shader'], function (shaderText) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, shaderText[0]);
    // ... compile shader, etc ...
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, shaderText[1]);

    // ... set up shader program and start render loop timer
}, function (url) {
    alert('Failed to download "' + url + '"');
});

JQueryのようなライブラリを使用している場合、それらはおそらく私のloadFilesのものと同様の関数を持っています。

23
David Roe

私は同じ問題を抱えていて、これがjQueryでうまくいったことがわかりました：

var fragmentShaderSRC = null,
var vertexShaderSRC = null;
...
function executeProgram(){ //main program }
...
$.get("shader.fs", function(data){ 
       fragmentShaderSRC = data.firstChild.textContent;
       $.get("shader.vs", function(data){
             vertexShaderSRC = data.firstChild.textContent;
             executeProgram();
       });
});

どこ shader.fsおよびshader.vsは私のシェーダーです（そして
<script type="x-shader/x-fragment">および<script type="x-shader/x-vertex">宣言行）

pdate With Chromeインテリジェントな推測では 'xml'は選択されません。次のコードはChromeでも機能します：

$.ajax({
          url: 'shader.fs', 
          success: function(data){ 
              fragmentShaderSRC = data.firstChild.textContent;
              $.ajax({
                  url: 'shader.vs', 
                  success: function(data){
                      vertexShaderSRC = data.firstChild.textContent;
                      executeProgram();
                   },
                   dataType: 'xml'
              })
           },
           dataType: 'xml'
        });

更新2： As <および&シェーダーソースでXMLとしてロードするには、エスケープする必要があります。これは、より小さい比較演算子または論理演算子を使用している場合でも、常に機能します。

var vs_source = null,
    fs_source = null;
$.ajax({
    async: false,
    url: './my_shader.vs',
    success: function (data) {
        vs_source = $(data).html();
    },
    dataType: 'html'
});

$.ajax({
    async: false,
    url: './my_shader.fs',
    success: function (data) {
        fs_source = $(data).html();
    },
    dataType: 'html'
});
5
brian_d

私のようなライブラリを管理するオープンソースのシェーダーを使用できます。

https://github.com/ILOVEPIE/Shader.js

これにより、URLからシェーダーをロードし、サイトへの今後のアクセスのためにシェーダーのソースコードをキャッシュできます。また、ユニフォームの使用も簡単になります。

0
ILOVEPIE