WebGL - czy istnieje alternatywa dla osadzania shaderów w HTML?

Używałem require.js ' S text plugin .

Oto fragment:

define(
    /* Dependencies (I also loaded the gl-matrix library) */
    ["glmatrix", "text!shaders/fragment.shader", "text!shaders/vertex.shader"],

    /* Callback when all has been loaded */
    function(glmatrix, fragmentShaderCode, vertexShaderCode) {
        ....
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderCode);
        gl.compileShader(vertexShader);
        ....
    }
);

Struktura katalogów jest następująca:

~require-gl-shaders/
 |~js/
 | |+lib/
 | |~shaders/
 | | |-fragment.shader
 | | `-vertex.shader
 | |-glmatrix.js - gl-matrix library
 | |-shader.js
 | |-text.js     - require.js's text plugin
 |-index.html
 |-main.js
 `-require.js    - the require.js library

Osobiście miałem trochę krzywej uczenia się z require, ale to naprawdę pomogło mi zachować czystszy kod.

Mój kumpel stworzył ładny obiekt utils z kilkoma przydatnymi funkcjami do tego typu scenariuszy. Shadery można przechowywać w plikach tekstowych w folderze o nazwie "shadery":

Nazwa pliku: vertex.shader

attribute vec3 blah;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;

void main(void) {
    magic goes here
}

Nazwa pliku: fragment.shader

#ifdef GL_ES
    precision highp float;
#endif

varying vec4 vYadaYada;
uniform sampler2D uSampler;

void main(void) {
    fragic magic goes here      
}

I po prostu wywołujesz to, aby utworzyć nowy program z tymi plikami shader:

var shaderProgram = utils.addShaderProg(gl, 'vertex.shader', 'fragment.shader');    

A oto słodki obiekt util do obsługi biz:

utils = {};

utils.allShaders = {};
utils.SHADER_TYPE_FRAGMENT = "x-shader/x-fragment";
utils.SHADER_TYPE_VERTEX = "x-shader/x-vertex";

utils.addShaderProg = function (gl, vertex, fragment) {

    utils.loadShader(vertex, utils.SHADER_TYPE_VERTEX);
    utils.loadShader(fragment, utils.SHADER_TYPE_FRAGMENT);

    var vertexShader = utils.getShader(gl, vertex);
    var fragmentShader = utils.getShader(gl, fragment);

    var prog = gl.createProgram();
    gl.attachShader(prog, vertexShader);
    gl.attachShader(prog, fragmentShader);
    gl.linkProgram(prog);

    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {alert("Could not initialise main shaders");}

    return prog;
};

utils.loadShader = function(file, type) {
    var cache, shader;

    $.ajax({
        async: false, // need to wait... todo: deferred?
        url: "shaders/" + file, //todo: use global config for shaders folder?
        success: function(result) {
           cache = {script: result, type: type};
        }
    });

    // store in global cache
    uilts.allShaders[file] = cache;
};

utils.getShader = function (gl, id) {

    //get the shader object from our main.shaders repository
    var shaderObj = utils.allShaders[id];
    var shaderScript = shaderObj.script;
    var shaderType = shaderObj.type;

    //create the right shader
    var shader;
    if (shaderType == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderType == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    //wire up the shader and compile
    gl.shaderSource(shader, shaderScript);
    gl.compileShader(shader);

    //if things didn't go so well alert
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    //return the shader reference
    return shader;

};//end:getShader

Podążając za podpowiedzią @ droidballoon skończyłem używając stack.gl który "jest otwartym ekosystemem oprogramowania dla WebGL, zbudowanym na bazie browserify i npm".

Its glslify zapewnia transformację browserify, która może być używana w połączeniu z GL-shader w celu załadowania shaderów. Javascript wyglądałby mniej więcej tak:

var glslify       = require('glslify');
var loadShader    = require('gl-shader');
var createContext = require('gl-context');

var canvas = document.createElement('canvas');
var gl = createContext(canvas);

var shader = loadShader(
    gl,
    glslify('./shader.vert'),
    glslify('./shader.frag')
);

Używam tego: https://www.npmjs.com/package/webpack-glsl-loader Pasuje do priorytetu, aby podświetlanie składni nie miało odpowiednich plików glsl zamiast fragmentów tekstu. Później opiszę, jak to działa.

[edytuj Sierpień-17, 2015] to podejście działa dobrze dla mnie. Zakłada, że webpack jest w Twoim przepływie budowania, ale to nie jest taka zła rzecz.

[edytuj 11-czerwiec-2016] https://github.com/kulicuu/Spacewar_WebGL_React ma działający przykład importowania glsl pliki poprzez tworzenie Webpacka. Sama gra powinna być rozwijana w nadchodzącym tygodniu.

Dobrym sposobem na to jest rozszerzenie browserify-shader do Browserify.

Jeśli możesz używać skryptów po stronie serwera, możesz napisać mały skrypt, który odczytuje pliki shadera i zwraca plik JavaScript ze skryptami w obiekcie globalnym. W ten sposób możesz dołączyć go używając zwykłego i edytować skrypty jako .pliki C.

Coś takiego jak skrypt Ruby cgi

require 'cgi'
require 'json'

cgi = CGI.new
prefix = File.expand_path(cgi["prefix"])
cwd = Dir.getwd + "/"
exit!(1) unless prefix.start_with?(cwd)

shader = prefix + ".c"
source = File.read(shader)
cgi.out("text/javascript") {
  <<-EOF
    if (typeof Shaders == 'undefined') Shaders = {};
    Shaders[#{cgi["prefix"]}] = #{source.to_json};
  EOF
}

Może nie jest to najlepszy sposób, ale używam php. Ja wrzucam shadery do osobnego pliku, a ty po prostu używasz:

<?php include('shaders.html'); ?>

Używam również Require.js do organizowania moich plików, ale zamiast używać wtyczki tekstowej ,jak sugeruje @ Vlr, mam skrypt, który bierze shadery i konwertuje go na Wymaganie.moduł js, który mogę wykorzystać gdzie indziej. Więc plik shader, simple.frag w ten sposób:

uniform vec3 uColor;

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

Zostanie przekonwertowany do pliku shader.js:

define( [], function() {
  return {
    fragment: {
      simple: [
        "uniform vec3 uColor;",

        "void main() {",
        "  gl_FragColor = vec4(uColor, 1.0);",
        "}",
      ].join("\n"),
    },
  }
} );

var simple = new THREE.ShaderMaterial( {
  vertexShader: shader.vertex.simple,
  fragmentShader: shader.fragment.simple
} );

Napisałem post na blogu z bardziej szczegółowymi informacjami i linkami do kodu demo tutaj: http://www.pheelicks.com/2013/12/webgl-working-with-glsl-source-files/

Shadery można umieszczać w różnych plikach, podobnie jak kod javascript w różnych plikach. Ta biblioteka https://github.com/codecruzer/webgl-shader-loader-js osiąga to ze znajomą składnią:

Przykładowe użycie (zaczerpnięte dosłownie z powyższej strony):

[index.html]:

    <script data-src="shaders/particles/vertex.js" data-name="particles"
            type="x-shader/x-vertex"></script>
    <script data-src="shaders/particles/fragment.js" data-name="particles"
            type="x-shader/x-fragment"></script>

[example.js]:

    SHADER_LOADER.load (
        function (data)
        {
            var particlesVertexShader = data.particles.vertex;
            var particlesFragmentShader = data.particles.fragment;
        }
    );

Nie jest to dokładne rozwiązanie, ale jest dobre dla mnie. Używam Pug (old Jade) do kompilacji HTML i używam includes inside shaders script tags

script#vertexShader(type="x-shader/x-vertex")
    include shader.vert

script#fragmentShader(type="x-shader/x-fragment")
    include shader.frag

Wynik jest taki sam, HTML z kodem w linii, ale można pracować z shaderem osobno.