在 webgl 中调试 GLSL 代码

Posted

技术标签:

【中文标题】在 webgl 中调试 GLSL 代码【英文标题】:Debug GLSL code in webgl 【发布时间】:2013-03-23 18:53:31 【问题描述】:

在与 webgl 一起使用时,是否可以调试 GLSL 代码或从 glsl 代码中打印变量值? three.js 或 scene.js 是否包含任何此类功能?

【问题讨论】:

【参考方案1】:

不是,

我通常调试 GLSL 的方式是输出颜色。因此,例如,给定 2 个着色器,例如

// vertex shader
uniform mat4 worldViewProjection;
uniform vec3 lightWorldPos;
uniform mat4 world;
uniform mat4 viewInverse;
uniform mat4 worldInverseTranspose;
attribute vec4 position;
attribute vec3 normal;
attribute vec2 texCoord;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main() 
  v_texCoord = texCoord;
  v_position = (worldViewProjection * position);
  v_normal = (worldInverseTranspose * vec4(normal, 0)).xyz;
  v_surfaceToLight = lightWorldPos - (world * position).xyz;
  v_surfaceToView = (viewInverse[3] - (world * position)).xyz;
  gl_Position = v_position;


// fragment-shader    
precision highp float;

uniform vec4 colorMult;
varying vec4 v_position;
varying vec2 v_texCoord;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;

uniform sampler2D diffuseSampler;
uniform vec4 specular;
uniform sampler2D bumpSampler;
uniform float shininess;
uniform float specularFactor;

vec4 lit(float l ,float h, float m) 
  return vec4(1.0,
              max(l, 0.0),
              (l > 0.0) ? pow(max(0.0, h), m) : 0.0,
              1.0);

void main() 
  vec4 diffuse = texture2D(diffuseSampler, v_texCoord) * colorMult;
  vec3 normal = normalize(v_normal);
  vec3 surfaceToLight = normalize(v_surfaceToLight);
  vec3 surfaceToView = normalize(v_surfaceToView);
  vec3 halfVector = normalize(surfaceToLight + surfaceToView);
  vec4 litR = lit(dot(normal, surfaceToLight),
                    dot(normal, halfVector), shininess);
  gl_FragColor = vec4((
  vec4(1,1,1,1) * (diffuse * litR.y
                        + specular * litR.z * specularFactor)).rgb,
      diffuse.a);

如果我在屏幕上没有看到任何内容,我会先将片段着色器更改为,只需在末尾添加一行

gl_FragColor = vec4(1,0,0,1);  // draw red

如果我开始看到我的几何图形,那么我就会知道问题可能出在片段着色器中。我可能会通过这样做来检查我的法线

gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1);

如果法线看起来没问题,我可能会检查 UV 坐标

gl_FragColor = vec4(v_texCoord, 0, 1);

等等……

【讨论】:

如果在执行gl_FragColor = vec4(v_normal * 0.5 + 0.5, 1);时着色器中断怎么办? “着色器中断”是什么意思? 你用的是什么库?这些错误意味着您的着色器没有编译或链接。当着色器无法编译或程序无法链接时,您的库应该(或者您应该)使用 gl.getShaderInfoLoggl.getProgramInfoLog 打印 shaderInfoLog 和 programInfoLog。这将/应该告诉您着色器中的错误在哪里。 Here's one example of calling those functions 嗨@gman,你知道2019年的webgl shaders debug吗?在这个问题的最后一次活动之后发生了什么变化?谢谢 我一无所知。 Safari 添加了一个画布调试器,因此您可以单步执行 WebGL 调用,但没有专门针对 GLSL 【参考方案2】:

您可以为此尝试WebGL-Inspector。

【讨论】:

不幸的是,它调试来自 javascript 的调用,而不是实际的 GLSL。

以上是关于在 webgl 中调试 GLSL 代码的主要内容,如果未能解决你的问题,请参考以下文章

有啥方法可以调试 GLSL 着色器?

2019浏览器不存在Canvas、WebGL调试功能?

WebGL调试和分析工具

如何调试GLSL Fragment shader

我的 GLSL 着色器程序链接正常,但是当我尝试使用它时出错——我该如何调试它?

第二篇: WebGL 着色器和GLSL