ShaderMaterial should be able to load shaders with .glsl extension

Feature requests
,
1

Simple request purely for syntax highlighting.

ShaderMaterial accepts a string as a third argument to load external files as long as they have the COMMON.fragment.fx / COMMON.vertex.fx format.

However IDEs/online code editors generally speaking do not recognize the .fx extension while most indeed do recognize the .glsl format and switch automaticall to the appropriate syntax highlighting (create a project on glitch for example)

I wonder why .fx has been chosen over the pretty much widespread adopted .glsl extension?

1 Like
2

Hey and welcome!

Because I came from a world where .fx was the norm :slight_smile: (DirectX)

3

I had problem with glslang validator which only accepts .vert and .frag extensions. So I ended up monkeypatching babylonjs with following:

BABYLON.Effect.prototype._loadFragmentShader=function(fragment: any, callback: (data: any) => void): void {
    // Direct source ?
    if (fragment.substr(0, 7) === "source:") {
        callback(fragment.substr(7));
        return;
    }

    // Base64 encoded ?
    if (fragment.substr(0, 7) === "base64:") {
        var fragmentBinary = window.atob(fragment.substr(7));
        callback(fragmentBinary);
        return;
    }

    // Is in local store ?
    if (BABYLON.Effect.ShadersStore[fragment + "PixelShader"]) {
        callback(BABYLON.Effect.ShadersStore[fragment + "PixelShader"]);
        return;
    }

    if (BABYLON.Effect.ShadersStore[fragment + "FragmentShader"]) {
        callback(BABYLON.Effect.ShadersStore[fragment + "FragmentShader"]);
        return;
    }

    var fragmentShaderUrl;

    if (fragment[0] === "." || fragment[0] === "/" || fragment.indexOf("http") > -1) {
        fragmentShaderUrl = fragment;
    } else {
        fragmentShaderUrl = BABYLON.Effect.ShadersRepository + fragment;
    }

    // Fragment shader
    this._engine._loadFile(fragmentShaderUrl + ".frag", callback);
}
BABYLON.Effect.prototype._loadVertexShader=function(vertex: any, callback: (data: any) => void):void {
    // Direct source ?
    if (vertex.substr(0, 7) === "source:") {
        callback(vertex.substr(7));
        return;
    }
    // Base64 encoded ?
    if (vertex.substr(0, 7) === "base64:") {
        var vertexBinary = window.atob(vertex.substr(7));
        callback(vertexBinary);
        return;
    }

    // Is in local store ?
    if (BABYLON.Effect.ShadersStore[vertex + "VertexShader"]) {
        callback(BABYLON.Effect.ShadersStore[vertex + "VertexShader"]);
        return;
    }

    var vertexShaderUrl;

    if (vertex[0] === "." || vertex[0] === "/" || vertex.indexOf("http") > -1) {
        vertexShaderUrl = vertex;
    } else {
        vertexShaderUrl = BABYLON.Effect.ShadersRepository + vertex;
    }

    // Vertex shader
    this._engine._loadFile(vertexShaderUrl + ".vert", callback);
}
1 Like