Source-code beautify breaks shader (and should be conditional in the first place)

[JannikGM]

I'm working with a WebGL abstraction (deck.gl) so I don't know what the final generated GLSL shader looks like. I rely on spector.js to retrieve final shaders.

I then use custom tools to analyze the final GLSL retreived from spector.js (to do things like rough cycle-analysis, calculating attribute and varying counts, ... after running a GLSL pre-processor on it). However, I ran into a problem where the shaders displayed in spector.js are broken.

I speculate the bug is here: https://github.com/BabylonJS/Spector.js/blob/35385a5c015dee6fcd232ba253ad98d3d502f5ea/src/embeddedFrontend/resultView/sourceCode/sourceCodeComponent.ts#L91

In general, I think that spector.js should show the actual shader, and not some frankenstein / reformatted shader (which has different line-numbers/columns from the original code). Reformatting as beautified code should be a conditional feature (toggable in UI, for input or translated shader alike).

---

Here's the actual bug (this GLSL was in some custom deck.gl 8.9.x layer, but it should be trivial to reproduce):

#define FOOBAR 0
#if FOOBAR
{}
#endif

spector.js shows this (which is a syntax error for the preprocessor):

    #define FOOBAR 0
    #if FOOBAR {

        }
    #endif

I can workaround it using:

#define FOOBAR 0
#if FOOBAR
/**/{}
#endif

which becomes:

    #define FOOBAR 0
    #if FOOBAR
        /**/ {

        }
    #endif

[sebavan]

I kind of love the idea of a switch or button, feel free to open a PR for it ?

[JannikGM]

Done; #272