javascript – 我的webgl着色器程序有什么问题：它在控制台中没有抛出错误？

我检查了错误并验证了程序,它无法验证,但着色器编译,程序链接正常.我,为了我的生活,不明白为什么有警告说无效的程序,它正确链接.

function log(msg) {
  var pre = document.createElement("pre");
  pre.appendChild(document.createTextNode(msg));
  document.body.appendChild(pre);
}

function init() {
  var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var gl = canvas.getContext('webgl');
  var vertexShaderText = document.querySelector("#vs").text;
  var fragmentShaderText = document.querySelector("#fs").text;
  shaderProgram = gl.createProgram();
  // compilation stuff here

  //
  // Create shaders
  //
  vertexShader = gl.createShader(gl.VERTEX_SHADER);
  fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertexShader,vertexShaderText);
  gl.shaderSource(fragmentShader,fragmentShaderText);

  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)) {
    log('ERROR compiling vertex shader!',gl.getShaderInfoLog(vertexShader));
    return;
  }

  gl.compileShader(fragmentShader);
  if (!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)) {
    log('ERROR compiling fragment shader!',gl.getShaderInfoLog(fragmentShader));
    return;
  }

  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram,vertexShader);
  gl.attachShader(shaderProgram,fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)) {
    log('ERROR linking program!',gl.getProgramInfoLog(shaderProgram));
    return;
  }
  gl.useProgram(shaderProgram);
  // make sure you have vertex,vertex normal,and texture coordinate
  // attributes located in your shaders and attach them to the shader program
  if (!shaderProgram) {
    log('no shader');
    return;
  }
  if (!gl.validateProgram(shaderProgram)) {
    log("info: " + gl.getProgramInfoLog(shaderProgram));
    return;
  }
  log("success");
}
init();

<script id="vs" type="notjs">
precision mediump float;

attribute vec3 aVertexPosition;
attribute vec3 aVertexnormal;
attribute vec3 aTextureCoord;
varying vec3 fragTextCoord;
void main()
{
  fragTextCoord = aVertexPosition;
  gl_Position = vec4(aVertexPosition,1.0);
}
</script>
<script id="fs" type="notjs">
precision mediump float;

varying vec3 fragTextCoord;
uniform sampler2D sampler;

void main()
{
  gl_FragColor = texture2D(sampler,vec2(fragTextCoord[0],fragTextCoord[1]));
}
</script>

解决方法

您的着色器程序没有任何问题

您的问题中的代码是检查gl.validateProgram的结果,它不返回任何内容.没有什么是UNDEFINED所以if语句

if (!gl.validateProgram(...))

永远都是真的.

作为per the docs验证程序,你这样做

gl.validateProgram(someProgram);
if (!gl.getProgramParameter(someProgram,gl.VALIDATE_STATUS)) {
  // validation Failed
}

这是固定代码

function log(msg) {
  var pre = document.createElement("pre");
  pre.appendChild(document.createTextNode(msg));
  document.body.appendChild(pre);
}

function init() {
  var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var gl = canvas.getContext('webgl');
  var vertexShaderText = document.querySelector("#vs").text;
  var fragmentShaderText = document.querySelector("#fs").text;
  shaderProgram = gl.createProgram();
  // compilation stuff here

  //
  // Create shaders
  //
  vertexShader = gl.createShader(gl.VERTEX_SHADER);
  fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertexShader,and texture coordinate
  // attributes located in your shaders and attach them to the shader program
  if (!shaderProgram) {
    log('no shader');
    return;
  }
  
  gl.validateProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram,gl.VALIDATE_STATUS)) {
    log("info: " + gl.getProgramInfoLog(shaderProgram));
    return;
  }
  log("success");
  getAttribLoc("aVertexPosition");
  getAttribLoc("aVertexnormal");
  getAttribLoc("aTextureCoord");
  getUniformloc("sampler");


  function getAttribLoc(name) {
    var loc = gl.getAttribLocation(shaderProgram,name);
    log("attribute: '" + name + "' location " +  (loc >= 0 ? ("= " + loc) : "does not exist or was optimized away"));
  }

  function getUniformloc(name) {
    var loc = gl.getAttribLocation(shaderProgram,name);
    log("uniform: '" + name + "' " + (loc ? "exists" : "does not exist or was optimized away"));
  }
}
init();

<script id="vs" type="notjs">
precision mediump float;

attribute vec3 aVertexPosition;
attribute vec3 aVertexnormal;
attribute vec3 aTextureCoord;
varying vec3 fragTextCoord;
void main()
{
  fragTextCoord = aVertexPosition;
  gl_Position = vec4(aVertexPosition,fragTextCoord[1]));
}
</script>