Debug codice GLSL in webgl

Question

È possibile eseguire il debugging del codice GLSL o stampare i valori delle variabili dall'interno del codice glsl mentre lo si utilizza con webgl? Tre.js o scene.js contengono tali funzionalità?

Answer 1

Non proprio,

Il modo in cui di solito il debug GLSL è a colori di output. Così, per esempio, data 2 shader come

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

Se non ho visto qualcosa sullo schermo che avevo prima cambiare lo shader frammento semplicemente aggiungendo una riga alla fine

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

Se Ho iniziato a vedere la mia geometria, quindi saprei che il problema è probabilmente nel framment shader. Potrei controllare le mie normali in questo modo

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

Se le normali sembrava male potrei controllare le coordinate UV con

gl_FragColor = vec4(v_texCoord, 0, 1); 

ecc ...

Answer 2

Si può provare WebGL-Inspector per questo scopo.