在 webgl 中调试 GLSL 代码 [英] Debug GLSL code in webgl

问题描述

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

Is it possible to debug GLSL code or print the variable values from within the glsl code while using it with webgl ? Do three.js or scene.js contain any such functionality?

推荐答案

不是真的，

我通常调试 GLSL 的方式是输出颜色.例如，给定 2 个着色器，如

The way I usually debug GLSL is to output colors. So for example, given 2 shaders like

// 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);
}

如果我在屏幕上没有看到任何东西，我会首先通过在末尾添加一行来更改片段着色器

If I didn't see something on the screen I'd first change the fragment shader to by just adding a line at the end

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

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

If I started to see my geometry then I'd know the issue is probably in the fragment shader. I might check my normals by doing this

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

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

If the normals looked okay I might check the UV coords with

gl_FragColor = vec4(v_texCoord, 0, 1);

等等...

这篇关于在 webgl 中调试 GLSL 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！