Javascript WebGL无法初始化着色器程序

我正在尝试为WebGL编写一对着色器，它将允许我渲染颜色立方体。但是，当我尝试打开文件时，收到错误“无法初始化着色器程序”。我应该如何调试它，从哪里开始查找着色器？我已经能够对更具体的错误进行一些调试，但我不知道从何处开始这种一般性的消息。任何帮助都将不胜感激

代码如下：

-----------------------编辑--------------------------------- 我已经根据下面的建议进行了更改，现在打开文件时屏幕完全空白。以前显示黑色画布，但现在屏幕为白色。如果您能给我任何建议，我将不胜感激。谢谢

    <script id="shader-fs" type="x-shader/x-fragment">

  varying lowp vec4 vColor;

  varying mediump vec3 vLighting;


  void main(void) {

    gl_FragColor = vColor * vec4(vLighting, 1.0);
  }

</script>



<!-- Vertex shader program -->



<script id="shader-vs" type="x-shader/x-vertex">

  attribute mediump vec3 aVertexNormal;

  attribute mediump vec3 aVertexPosition;

  attribute mediump vec4 aVertexColor;



  uniform mediump mat4 uNormalMatrix;

  uniform mediump mat4 uMVMatrix;

  uniform mediump mat4 uPMatrix;



  varying mediump vec3 vLighting;

  varying mediump vec4 vColor;



  void main(void) {

    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);



    //Apply the coloration to the cube

    vColor = aVertexColor;



    // Apply lighting effect



    mediump vec3 ambientLight = vec3(0.6, 0.6, 0.6);

    mediump vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);

    mediump vec3 directionalVector = vec3(0.85, 0.8, 0.75);



    mediump vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);



    mediump float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);

    vLighting = ambientLight + (directionalLightColor * directional);

  }

</script> 

可变低通vec4彩色；
可变介质矢量照明；
真空总管（真空）{
gl_FragColor=vColor*vec4（亮度，1.0）；
}
属性mediump vec3 aVertexNormal；
属性mediump vec3；
属性mediump vec4颜色；
均匀mediump mat4非正态矩阵；
均匀介质mat4 UMV矩阵；
均匀介质mat4上矩阵；
可变介质矢量照明；
可变介质vec4彩色；
真空总管（真空）{
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
//将着色应用于立方体
vColor=excolor；
//应用灯光效果
mediump vec3环境光=vec3（0.6,0.6,0.6）；
mediump vec3 directionalLightColor=vec3（0.5,0.5,0.75）；
mediump vec3方向向量=vec3（0.85,0.8,0.75）；
mediump vec4 transformedNormal=非正常矩阵*vec4（aVertexNormal，1.0）；
mediump float directive=max（点（transformedNormal.xyz，directionalVector），0.0）；
V照明=环境光+（方向性灯光颜色*方向性）；
}

也许您应该更新您的框架，以便在编译时遇到错误时向WebGL查询并打印错误？编译着色器后，如果未成功，请调用

gl.getShaderInfoLog

，如中所示

// Compile the shader
gl.compileShader(shader);

// Check the compile status
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
  // Something went wrong during compilation; get the error
  console.error(gl.getShaderInfoLog(shader));

在链接时，您应该执行与中类似的操作

gl.linkProgram(program);

// Check the link status
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
  // something went wrong with the link
  console.error(gl.getProgramInfoLog(program));

当我尝试使用我的框架时，我从WebGL得到了这个错误

var canvas=document.getElementById（“c”）；
var gl=canvas.getContext（“webgl”）；
var program=twgl.createProgramFromScripts(
gl、[“材质球vs”、“材质球fs”]、[“a_位置”]

可变低通vec3彩色；
可变高亮度vec3照明；
真空总管（真空）{
gl_FragColor=vec4（vColor*vLighting，1.0）；
}
属性highp vec3异常；
属性highpvec3；
属性highp vec4颜色；
均匀高p mat4非正态矩阵；
均匀高密度mat4矩阵；
均匀高阶mat4矩阵；
可变高亮度vec3照明；
可变高分辨率vec4彩色；
真空总管（真空）{
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
//将着色应用于立方体
vColor=excolor；
//应用灯光效果
highp vec3环境光=vec3（0.6,0.6,0.6）；
highp vec3 directionalLightColor=vec3（0.5,0.5,0.75）；
HighpVec3方向向量=vec3（0.85,0.8,0.75）；
highp vec4 transformedNormal=非正常矩阵*vec4（aVertexNormal，1.0）；
highp float directive=max（点（transformedNormal.xyz，directionalvective），0.0）；
V照明=环境光+（方向性灯光颜色*方向性）；
}
在我的脑海中，我唯一看到的错误是你在片段着色器中无条件地使用了
highp
。WebGL不保证对此提供支持，您需要首先检查预处理器定义
片段\u精度\u高
。如果未定义，请改用
mediump
。谢谢你的建议，等等，我已经尝试用mediump替换所有highp实例，但仍然出现相同的错误。你能分享加载着色器的代码吗？谢谢你，gman，我已经在帖子中添加了用于编译着色器的代码。当我下班后，我会尝试使用你的建议来找出我机器中的错误，看看我是否能修复它。因此，对于你上面发布的代码，你可以在上面的答案中看到错误，上面的答案是
vColor
在两个着色器中声明不同。查看您发布的代码，其中一个声明为
vec3
，另一个声明为
vec4
。我已尝试更正错误，但现在打开文件时屏幕完全为白色。我已经发布了上面修改过的着色器，如有任何建议，我将不胜感激。谢谢
// Compile the shader
gl.compileShader(shader);

// Check the compile status
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
  // Something went wrong during compilation; get the error
  console.error(gl.getShaderInfoLog(shader));

gl.linkProgram(program);

// Check the link status
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
  // something went wrong with the link
  console.error(gl.getProgramInfoLog(program));