在webgl中調試GLSL代碼

Question

在webgl中使用glsl代碼時，是否可以調試GLSL代碼或從glsl代碼中打印變量值？ three.js或scene.js包含任何這樣的功能嗎？

Answer 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 COORDS與

gl_FragColor = vec4(v_texCoord, 0, 1); 

等檢查我的法線...

Answer 2

您可以嘗試WebGL-Inspector用於此目的。