我的 webgl 着色器程序有什么问题:它在控制台中没有抛出任何错误

Question

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

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>

Answer 1

着色器程序没有任何问题

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

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

将永远是真的。

根据文档来验证您执行此操作

的程序

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, 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;
  }
  
  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, 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>