WebGL无法初始化着色器程序

Question

我试图为WebGL编写一对着色器,这将允许我渲染一个颜色立方体.但是,当我尝试打开文件时,收到错误"无法初始化着色器程序".我该如何调试这个以及在哪里开始查看着色器？我已经能够使用更具体的错误进行一些调试,但我不知道从哪种一般消息开始.任何帮助将不胜感激!

这是代码:

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

  varying lowp vec3 vColor;

  varying highp vec3 vLighting;





  void main(void) {

    gl_FragColor = vec4(vColor * vLighting, 1.0);



  }

</script>



<!-- Vertex shader program -->



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

  attribute highp vec3 aVertexNormal;

  attribute highp vec3 aVertexPosition;

  attribute highp vec4 aVertexColor;



  uniform highp mat4 uNormalMatrix;

  uniform highp mat4 uMVMatrix;

  uniform highp mat4 uPMatrix;



  varying highp vec3 vLighting;

  varying highp vec4 vColor;



  void main(void) {

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



    //Apply the coloration to the cube

    vColor = aVertexColor;



    // Apply lighting effect



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

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

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



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



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

    vLighting = ambientLight + (directionalLightColor * directional);

  }

</script>

这是编译着色器的代码:

    //
// initShaders
//
// Initialize the shaders, so WebGL knows how to light our scene.
//
function initShaders() {
  var fragmentShader = getShader(gl, "shader-fs");
  var vertexShader = getShader(gl, "shader-vs");

  // Create the shader program

  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  // If creating the shader program failed, alert

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Unable to initialize the shader program.");
  }

  gl.useProgram(shaderProgram);

  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(vertexPositionAttribute);

  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
  gl.enableVertexAttribArray(vertexColorAttribute);

  vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
  gl.enableVertexAttribArray(vertexNormalAttribute);
}

//
// getShader
//
// Loads a shader program by scouring the current document,
// looking for a script with the specified ID.
//
function getShader(gl, id) {
  var shaderScript = document.getElementById(id);

  // Didn't find an element with the specified ID; abort.

  if (!shaderScript) {
    return null;
  }

  // Walk through the source element's children, building the
  // shader source string.

  var theSource = "";
  var currentChild = shaderScript.firstChild;

  while(currentChild) {
    if (currentChild.nodeType == 3) {
      theSource += currentChild.textContent;
    }

    currentChild = currentChild.nextSibling;
  }

  // Now figure out what type of shader script we have,
  // based on its MIME type.

  var shader;

  if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.type == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
    return null;  // Unknown shader type
  }

  // Send the source to the shader object

  gl.shaderSource(shader, theSource);

  // Compile the shader program

  gl.compileShader(shader);

  // See if it compiled successfully

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
    return null;
  }

  return shader;
}

- - - - - - - - - - - -编辑 - - - - - - - - - - - - - -------我根据下面的建议进行了更改,现在打开文件时屏幕完全空白.以前,显示黑色画布,但现在屏幕是白色的.我很感激你能给出的任何建议.谢谢!

    <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> 

Answer 1

也许你应该更新你的框架,所以当它收到错误编译它会查询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, ["shader-vs", "shader-fs"], ["a_position"]);

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

  varying lowp vec3 vColor;

  varying highp vec3 vLighting;





  void main(void) {

    gl_FragColor = vec4(vColor * vLighting, 1.0);



  }

</script>



<!-- Vertex shader program -->



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

  attribute highp vec3 aVertexNormal;

  attribute highp vec3 aVertexPosition;

  attribute highp vec4 aVertexColor;



  uniform highp mat4 uNormalMatrix;

  uniform highp mat4 uMVMatrix;

  uniform highp mat4 uPMatrix;



  varying highp vec3 vLighting;

  varying highp vec4 vColor;



  void main(void) {

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



    //Apply the coloration to the cube

    vColor = aVertexColor;



    // Apply lighting effect



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

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

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



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



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

    vLighting = ambientLight + (directionalLightColor * directional);

  }

</script>
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<canvas id="c"></canvas>

Error in program linking:Varyings with the same name but different type,
or statically used varyings in fragment shader are not declared in 
vertex shader: vColor

这似乎指出了错误.