Javascript 在webgl中调试GLSL代码
与webgl一起使用时,是否可以调试GLSL代码或从GLSL代码中打印变量值?three.js或scene.js是否包含任何此类功能?您可以为此尝试。不太可能 我通常调试GLSL的方法是输出颜色。例如,给定两个着色器,如Javascript 在webgl中调试GLSL代码,javascript,three.js,glsl,webgl,Javascript,Three.js,Glsl,Webgl,与webgl一起使用时,是否可以调试GLSL代码或从GLSL代码中打印变量值?three.js或scene.js是否包含任何此类功能?您可以为此尝试。不太可能 我通常调试GLSL的方法是输出颜色。例如,给定两个着色器,如 // vertex shader uniform mat4 worldViewProjection; uniform vec3 lightWorldPos; uniform mat4 world; uniform mat4 viewInverse; uniform mat4 w
// 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);
如果法线看起来没问题,我可以用
gl_FragColor = vec4(v_texCoord, 0, 1);
等等。不幸的是,它调试来自Javascript的调用,而不是实际的GLSL。如果着色器在执行
gl_FragColor=vec4(v_normal*0.5+0.5,1)时中断,该怎么办代码>“着色器中断”是什么意思?您使用的库是什么?这些错误意味着您的着色器未编译或链接。当着色器无法编译或程序链接失败时,您的库应该(或您应该)使用gl.getShaderInfoLog
和gl.getProgramInfoLog
打印着色器folog和programInfoLog。这将/应该告诉您着色器中的错误位置。您好@gman,您知道2019年webgl着色器调试的一些情况吗?在这个问题中的最后一个活动之后发生了什么变化?谢谢你我什么都不知道。Safari添加了一个canvas调试器,因此您可以单步执行WebGL调用,但对于GLSL没有任何特别的功能