有没有办法调试嵌入Javascript的WebGL GLSL代码？

我试图学习如何使用Sketch.js使用粒子，并遇到了这个示例，我正在尝试重新编写：

有问题的代码片段是这样一团乱麻：

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={
vert:“\n#ifdef GL#ES\n precision mediump float；\n#endif\n\n//制服\n格式向量2 u#u分辨率；\n\n//属性\n属性向量2 a#u位置；\n\nvoid main（）{\n GL#u位置=vec4（a#u位置，0，1）；\n}\n”，
frag:“\n#ifdef GL#ES\n精度mediump float；\n#endif\n\n非形bool u#u扫描线；\n\n非形vec2 u#u分辨率；\n\n非形float u#u亮度；\n非形float u#u blobiness；\n形float u粒子；\n形float u milliss；\n形float u能量；\n\n\n\nfloat噪声（vec2 co 2 co）{n返回分形T（sin（点（co.xy，vec2（12.98，23378）））*43758.5453）；\n}\n\n球形主管道（空隙）{\n\n vec2位置=（gl_FragCoord.xy/u_分辨率.x）；\n浮点t=u_毫*0.001*u能量；\n\n浮点a=0.0；\n浮点b=0.0；\n浮点c=0.0；\n\n vec2位置，中心=vec2（0.5,0.5*（u分辨率.y/u分辨率.x））；\n\n float na、nb、nc、nd、d；\n float limit=u_粒子/40.0；\n float step=1.0/u_粒子；\n float n=0.0；\n\n（float i=0.0；i我不知道这是否有帮助，但在Firefox中，您可以看到网页中使用的所有着色器的代码：。
Mhh，只需重新引入换行符，即可获得可读的代码：

#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 );

}


要调试“应用程序内”您唯一现成的解决方案是Tolokoban提供的。至于其他更复杂的工具，还有桌面着色器调试器，如和。
请不要更改我的英国拼写>：-（着色器语言被调用，虽然它看起来像C，但它与C的关系就像JavaScript与Java的关系一样。您将更幸运地重新编写问题和标记，而不是感谢@Kninnug:-）这可能对一些寻求类似问题帮助的人有所帮助。它检查语法，但没有调试器：这可能有帮助。阅读代码不是问题（我做的第一件事是在文本编辑器中弹出代码并重新格式化）.理解不熟悉的东西在做什么是困难的部分。我尝试过Shadertoy，但它在vert和frag上有问题，如果我只尝试frag部分，我会得到噪音。可能有一种方法可以以Shadertoy能够理解的方式将其输入到Shadertoy中，但并不明显。你把着色器称为“混乱”是一种“奇怪的嵌入式GLSL”"，他们显然不是。我给了你所有可用于调试的工具和技术，我甚至为你创建了实时代码，并用一些合理的变量进行设置。这就是你所要求的，如果这对你没有帮助，那么你可能想创建另一个问题，并准确地说明你在理解什么代码。@LJ说得很清楚，我想知道是否有工具来调试这段代码。例如，暂停执行，查看变量中的值，或者最小限度地打印到控制台，这类事情。我阅读代码文本没有问题，我在测试我的假设和假设时遇到了问题。我没有要求任何人这样做o解决我试图理解的特定问题。GLSL调试器是我对实际调试器的唯一选择，因为其他调试器都是基于Windows的。当我有更多时间时，我会尝试一下。你不能，至少不能在javascript/webgl应用程序中，因为分步调试需要专有的特定于供应商的集成，据我所知，这只能提供des（要求您拥有NVIDIA GPU和受支持的IDE）。正如您链接的另一个问题中所述，测试您的假设的最快、最简单和几乎唯一的方法是使用颜色输出或笔和纸。了解这一点非常有用。它加快了“用棍子戳它”的速度处理，因为您可以实时进行更改。很好，它对语法错误提供了良好的反馈。这最终帮助我解决了问题。因为Chrome着色器编辑器对我很有效：不幸的是，Firefox决定不推荐此工具：
//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