有什么方法可以调试 Javascript 中嵌入的 WebGL GLSL 代码？

Question

我正在尝试通过 Sketch.js 了解如何使用粒子并遇到这个例子，我正在尝试修改它：

http://soulwire.github.io/Plasmatic-Isosurface/

有问题的代码片段是一团糟：

GLSL = {
vert: "\n#ifdef GL_ES\nprecision mediump float;\n#endif\n\n// Uniforms\nuniform vec2 u_resolution;\n\n// Attributes\nattribute vec2 a_position;\n\nvoid main() {\n    gl_Position = vec4 (a_position, 0, 1);\n}\n",
frag: "\n#ifdef GL_ES\nprecision mediump float;\n#endif\n\nuniform bool u_scanlines;\nuniform vec2 u_resolution;\n\nuniform float u_brightness;\nuniform float u_blobiness;\nuniform float u_particles;\nuniform float u_millis;\nuniform float u_energy;\n\n\nfloat noise( vec2 co ){\n    return fract( sin( dot( co.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );\n}\n\nvoid main( void ) {\n\n    vec2 position = ( gl_FragCoord.xy / u_resolution.x );\n    float t = u_millis * 0.001 * u_energy;\n    \n    float a = 0.0;\n    float b = 0.0;\n    float c = 0.0;\n\n    vec2 pos, center = vec2( 0.5, 0.5 * (u_resolution.y / u_resolution.x) );\n    \n    float na, nb, nc, nd, d;\n    float limit = u_particles / 40.0;\n    float step = 1.0 / u_particles;\n    float n = 0.0;\n    \n    for ( float i = 0.0; i <= 1.0; i += 0.025 ) {\n\n        if ( i <= limit ) {\n\n            vec2 np = vec2(n, 1-1);\n            \n            na = noise( np * 1.1 );\n            nb = noise( np * 2.8 );\n            nc = noise( np * 0.7 );\n            nd = noise( np * 3.2 );\n\n            pos = center;\n            pos.x += sin(t*na) * cos(t*nb) * tan(t*na*0.15) * 0.3;\n            pos.y += tan(t*nc) * sin(t*nd) * 0.1;\n            \n            d = pow( 1.6*na / length( pos - position ), u_blobiness );\n            \n            if ( i < limit * 0.3333 ) a += d;\n            else if ( i < limit * 0.6666 ) b += d;\n            else c += d;\n\n            n += step;\n        }\n    }\n    \n    vec3 col = vec3(a*c,b*c,a*b) * 0.0001 * u_brightness;\n    \n    if ( u_scanlines ) {\n        col -= mod( gl_FragCoord.y, 2.0 ) < 1.0 ? 0.5 : 0.0;\n    }\n    \n    gl_FragColor = vec4( col, 1.0 );\n\n}\n"};

着色器是 GLSL 的一个奇怪的嵌入位，我不知道如何调试。我不太明白的这个具体问题是颜色是如何设置的。 col 变量似乎是一个 4 维向量，但它看起来可以用 2 维向量构建。我真的不明白发生了什么，这导致了我在这里问的问题，也就是，有什么方法可以调试这样一段嵌入的代码吗？

我尝试了一个名为 WebGL Insight 的 Chrome 扩展，但它无法识别 GLSL 代码，而且我不确定它是否是我要找的。类似问题 (Debug GLSL code in webgl) 有此答案，但我觉得它没有帮助。我需要打破着色器并使用外部编译器吗？（在那种情况下，我需要什么软件和库？）

Answer 1

我不知道这是否有帮助，但在 Firefox 中，您可以看到网页中使用的所有着色器的代码：https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor.

Answer 2

嗯，简单地重新引入换行符会产生相当可读的代码：

#ifdef GL_ES
precision mediump float;
#endif

uniform bool u_scanlines;
uniform vec2 u_resolution;

uniform float u_brightness;
uniform float u_blobiness;
uniform float u_particles;
uniform float u_millis;
uniform float u_energy;


float noise( vec2 co ){
    return fract( sin( dot( co.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );
}

void main( void ) {

    vec2 position = ( gl_FragCoord.xy / u_resolution.x );
    float t = u_millis * 0.001 * u_energy;

    float a = 0.0;
    float b = 0.0;
    float c = 0.0;

    vec2 pos, center = vec2( 0.5, 0.5 * (u_resolution.y / u_resolution.x) );

    float na, nb, nc, nd, d;
    float limit = u_particles / 40.0;
    float step = 1.0 / u_particles;
    float n = 0.0;

    for ( float i = 0.0; i <= 1.0; i += 0.025 ) {

        if ( i <= limit ) {

            vec2 np = vec2(n, 1-1);

            na = noise( np * 1.1 );
            nb = noise( np * 2.8 );
            nc = noise( np * 0.7 );
            nd = noise( np * 3.2 );

            pos = center;
            pos.x += sin(t*na) * cos(t*nb) * tan(t*na*0.15) * 0.3;
            pos.y += tan(t*nc) * sin(t*nd) * 0.1;

            d = pow( 1.6*na / length( pos - position ), u_blobiness );

            if ( i < limit * 0.3333 ) a += d;
            else if ( i < limit * 0.6666 ) b += d;
            else c += d;

            n += step;
        }
    }

    vec3 col = vec3(a*c,b*c,a*b) * 0.0001 * u_brightness;

    if ( u_scanlines ) {
        col -= mod( gl_FragCoord.y, 2.0 ) < 1.0 ? 0.5 : 0.0;
    }

    gl_FragColor = vec4( col, 1.0 );

}

因为这似乎是一个屏幕空间着色器，所以可以使用 glsl-sandbox or shadertoy 之类的东西来玩弄它，只需重新映射 and/or 用定义替换未知制服：

//uniform bool u_scanlines;
#define u_scanlines false

//uniform float u_brightness;
#define u_brightness 1.
//uniform float u_blobiness;
#define u_blobiness 1.
//uniform float u_particles;
#define u_particles 20.
//uniform float u_millis;
#define u_millis 1.
//uniform float u_energy;
#define u_energy 1.

//uniform vec2 u_resolution;
uniform vec2 resolution;
#define u_resolution resolution

要调试 "in app"，您唯一现成的解决方案是 Firefoxs Shader-Editor as mentinoed by Tolokoban. As to other more sophisticated tools, there are the desktop shader debuggers like NVIDIAs FX Composer, AMDs RenderMonkey and GLSL-Debugger(formerly GLSLDevil)。

有什么方法可以调试 Javascript 中嵌入的 WebGL GLSL 代码？

Any way to debug WebGL GLSL code embedded in Javascript?

javascript

glsl

webgl