Gỡ lỗi mã GLSL trong webgl

Question

Có thể gỡ lỗi mã GLSL hoặc in các giá trị biến từ trong mã glsl trong khi sử dụng nó với webgl không? Do ba.js hoặc scene.js chứa bất kỳ chức năng nào như vậy?

Answer 1

Không thực sự,

Cách tôi thường gỡ lỗi GLSL là màu đầu ra. Vì vậy, ví dụ, đưa ra 2 shaders như

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

Nếu tôi không nhìn thấy một cái gì đó trên màn hình lần đầu tiên tôi muốn thay đổi shader đoạn tới bởi chỉ cần thêm một dòng ở cuối

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

Nếu Tôi bắt đầu thấy hình học của tôi sau đó tôi muốn biết vấn đề có lẽ là trong shader fragment. Tôi có thể kiểm tra normals của tôi bằng cách làm này

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

Nếu normals nhìn sao tôi có thể kiểm tra các coords UV với

gl_FragColor = vec4(v_texCoord, 0, 1); 

vv ...

Answer 2

Bạn có thể thử WebGL-Inspector cho mục đích này.