关于opengl：如何调试GLSL着色器？


How to debug a GLSL shader?

我需要调试GLSL程序，但是我不知道如何输出中间结果。
是否可以使用GLSL进行一些调试跟踪(例如使用printf)？

相关讨论

您无法轻松地从GLSL内部传回CPU。最好使用glslDevil或其他工具。

一个printf将需要尝试从运行GLSL代码的GPU返回到CPU。相反，您可以尝试推动显示。而不是尝试输出文本，而是在屏幕上输出视觉上独特的内容。例如，仅当您到达要添加printf的代码点时，才可以绘制特定颜色的东西。如果需要打印一个值，则可以根据该值设置颜色。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
void main(){
  float bug=0.0;
  vec3 tile=texture2D(colMap, coords.st).xyz;
  vec4 col=vec4(tile, 1.0);

  if(something) bug=1.0;

  col.x+=bug;

  gl_FragColor=col;
}
相关讨论

我发现"变换反馈"是调试顶点着色器的有用工具。您可以使用它来捕获VS输出的??值，并在CPU端读回它们，而无需通过光栅化器。

这是有关"变换反馈"教程的另一个链接。

如果要在屏幕上可视化值的变化，可以使用与此类似的热图函数(我在hlsl中编写了该函数，但是很容易适应glsl)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
float4 HeatMapColor(float value, float minValue, float maxValue)
{
    #define HEATMAP_COLORS_COUNT 6
    float4 colors[HEATMAP_COLORS_COUNT] =
    {
        float4(0.32, 0.00, 0.32, 1.00),
        float4(0.00, 0.00, 1.00, 1.00),
        float4(0.00, 1.00, 0.00, 1.00),
        float4(1.00, 1.00, 0.00, 1.00),
        float4(1.00, 0.60, 0.00, 1.00),
        float4(1.00, 0.00, 0.00, 1.00),
    };
    float ratio=(HEATMAP_COLORS_COUNT-1.0)*saturate((value-minValue)/(maxValue-minValue));
    float indexMin=floor(ratio);
    float indexMax=min(indexMin+1,HEATMAP_COLORS_COUNT-1);
    return lerp(colors[indexMin], colors[indexMax], ratio-indexMin);
}

然后在您的像素着色器中，您只输出如下内容：

1
return HeatMapColor(myValue, 0.00, 50.00);

并可以了解像素之间的差异：

enter image description here

当然，您可以使用任何喜欢的颜色集。

GLSL Sandbox对于着色器来说非常方便。

本身不是调试(已被回答为无能)，但可以方便地快速查看输出的变化。

您可以尝试以下方法：https://github.com/msqrt/shader-printf，这是一个被称为" GLSL的简单printf功能"的实现。

您可能还想尝试ShaderToy，也许还可以从YouTube的" The Art of Code" YouTube频道观看类似这样的视频(https://youtu.be/EBrAdahFtuo)，在这里您可以看到一些对调试和调试非常有用的技术。 可视化。 我可以强烈推荐他的频道，因为他写了一些非常不错的文章，并且他也有技巧以新颖，引人入胜且易于消化的格式展示复杂的想法(他的Mandelbrot视频就是一个很好的例子：https：// youtu.be/6IWXkV82oyY)

我希望没有人会介意这个较晚的答复，但是这个问题在Google搜索GLSL调试中的排名很高，并且在9年中当然有了很多变化：-)

PS：其他替代方案也可能是NVIDIA nSight和AMD ShaderAnalyzer，它们为着色器提供了完整的步进调试器。

我正在分享一个片段着色器示例，我如何实际调试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#version 410 core

uniform sampler2D s
in VS_OUT
{
    vec4 color;
    vec2 texcoord;
} fs_in;

out vec4 color;

void main(void)
{
    vec4 sampColor;
    if( texture2D(samp, fs_in.texcoord).x > 0.8f)  //Check if Color contains red
        sampColor = vec4(1.0f, 1.0f, 1.0f, 1.0f);  //If yes, set it to white
    else
        sampColor = texture2D(samp, fs_in.texcoord); //else sample from original
    color = sampColor;

}

enter image description here

对纹理进行脱机渲染并评估纹理数据。
您可以通过谷歌搜索"渲染到纹理" opengl找到相关的代码
然后使用glReadPixels将输出读取到数组中并对其进行断言(因为在调试器中查看如此大的数组通常并没有真正的用处)。

另外，您可能想禁用钳位以输出不介于0和1之间的值，仅浮点纹理支持该值。

亲自调试着色器一段时间会困扰我。似乎没有一个好的方法-如果有人找到了一个好的(而不是过时/过时的)调试器，请告诉我。

相关讨论

该答案的底部是GLSL代码的示例，该代码允许将完整的float值输出为颜色，并编码IEEE 754 binary32。我使用它的方式如下(此代码段给出了Modelview矩阵的yy组件)：

1
2
3
4
5
vec4 xAsColor=toColor(gl_ModelViewMatrix[1][1]);
if(bool(1)) // put 0 here to get lowest byte instead of three highest
    gl_FrontColor=vec4(xAsColor.rgb,1);
else
    gl_FrontColor=vec4(xAsColor.a,0,0,1);

将其显示在屏幕上之后，您可以使用任何颜色选择器，将颜色设置为HTML格式(如果不需要更高的精度，则将00附加到rgb值，然后进行第二遍操作以获取较低的字节(如果这样做)，则将float的十六进制表示形式表示为IEEE 754 binary32。

这是toColor()的实际实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const int emax=127;
// Input: x>=0
// Output: base 2 exponent of x if (x!=0 && !isnan(x) && !isinf(x))
//         -emax if x==0
//         emax+1 otherwise
int floorLog2(float x)
{
    if(x==0.) return -emax;
    // NOTE: there exist values of x, for which floor(log2(x)) will give wrong
    // (off by one) result as compared to the one calculated with infinite precision.
    // Thus we do it in a brute-force way.
    for(int e=emax;e>=1-emax;--e)
        if(x>=exp2(float(e))) return e;
    // If we are here, x must be infinity or NaN
    return emax+1;
}

// Input: any x
// Output: IEEE 754 biased exponent with bias=emax
int biasedExp(float x) { return emax+floorLog2(abs(x)); }

// Input: any x such that (!isnan(x) && !isinf(x))
// Output: significand AKA mantissa of x if !isnan(x) && !isinf(x)
//         undefined otherwise
float significand(float x)
{
    // converting int to float so that exp2(genType) gets correctly-typed value
    float expo=float(floorLog2(abs(x)));
    return abs(x)/exp2(expo);
}

// Input: x\in[0,1)
//        N>=0
// Output: Nth byte as counted from the highest byte in the fraction
int part(float x,int N)
{
    // All comments about exactness here assume that underflow and overflow don't occur
    const float byteShift=256.;
    // Multiplication is exact since it's just an increase of exponent by 8
    for(int n=0;n<N;++n)
        x*=byteShift;

    // Cut higher bits away.
    // $q \in [0,1) \cap \mathbb Q'.$
    float q=fract(x);

    // Shift and cut lower bits away. Cutting lower bits prevents potentially unexpected
    // results of rounding by the GPU later in the pipeline when transforming to TrueColor
    // the resulting subpixel value.
    // $c \in [0,255] \cap \mathbb Z.$
    // Multiplication is exact since it's just and increase of exponent by 8
    float c=floor(byteShift*q);
    return int(c);
}

// Input: any x acceptable to significand()
// Output: significand of x split to (8,8,8)-bit data vector
ivec3 significandAsIVec3(float x)
{
    ivec3 result;
    float sig=significand(x)/2.; // shift all bits to fractional part
    result.x=part(sig,0);
    result.y=part(sig,1);
    result.z=part(sig,2);
    return result;
}

// Input: any x such that !isnan(x)
// Output: IEEE 754 defined binary32 number, packed as ivec4(byte3,byte2,byte1,byte0)
ivec4 packIEEE754binary32(float x)
{
    int e = biasedExp(x);
    // sign to bit 7
    int s = x<0. ? 128 : 0;

    ivec4 binary32;
    binary32.yzw=significandAsIVec3(x);
    // clear the implicit integer bit of significand
    if(binary32.y>=128) binary32.y-=128;
    // put lowest bit of exponent into its position, replacing just cleared integer bit
    binary32.y+=128*int(mod(float(e),2.));
    // prepare high bits of exponent for fitting into their positions
    e/=2;
    // pack highest byte
    binary32.x=e+s;

    return binary32;
}

vec4 toColor(float x)
{
    ivec4 binary32=packIEEE754binary32(x);
    // Transform color components to [0,1] range.
    // Division is inexact, but works reliably for all integers from 0 to 255 if
    // the transformation to TrueColor by GPU uses rounding to nearest or upwards.
    // The result will be multiplied by 255 back when transformed
    // to TrueColor subpixel value by OpenGL.
    return vec4(binary32)/255.;
}

现有的答案都是好东西，但我想分享一小块宝石，这对于调试GLSL着色器中棘手的精度问题很有用。将非常大的int数表示为浮点数，需要注意正确使用floor(n)和floor(n + 0.5)才能将round()实现为精确的int。然后，可以通过以下逻辑渲染一个精确的int浮点值，以将字节分量打包为R，G和B输出值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  // Break components out of 24 bit float with rounded int value
  // scaledWOB = (offset >> 8) & 0xFFFF
  float scaledWOB = floor(offset / 256.0);
  // c2 = (scaledWOB >> 8) & 0xFF
  float c2 = floor(scaledWOB / 256.0);
  // c0 = offset - (scaledWOB << 8)
  float c0 = offset - floor(scaledWOB * 256.0);
  // c1 = scaledWOB - (c2 << 8)
  float c1 = scaledWOB - floor(c2 * 256.0);

  // Normalize to byte range
  vec4 pix;  
  pix.r = c0 / 255.0;
  pix.g = c1 / 255.0;
  pix.b = c2 / 255.0;
  pix.a = 1.0;
  gl_FragColor = pix;