目前使用 varying Chrome 不起作用？

Question

嗯，我是 WebGl 的新手，我正在按照一些教程和书籍学习一些东西并开始构建我自己的应用程序，问题是几周前我停止了一个教程，因为当我开始使用 varying 时它从来没有用过，现在我在看一本书，其中发生了同样的事情，我的问题是最近关于如何实现变化的事情是否发生了变化？

这是我的代码，用于更改失败的 3 个顶点的颜色

// MultiPoint.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
     'v_Color = a_Color;\n' +
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
    '#ifdef GL_ES\n' +
  'precision mediump float;\n' + // Precision qualifier (See Chapter 6)
  '#endif GL_ES\n' +
  'varying vec4 v_Color;\n' + 
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 
  var n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
  }

  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw three points
  gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
  var verticesColors = new Float32Array([
    // Vertex coordinates and color
     0.0,  0.5,  1.0,  0.0,  0.0, 
    -0.5, -0.5,  0.0,  1.0,  0.0, 
     0.5, -0.5,  0.0,  0.0,  1.0, 
  ]);
  var n = 3; // The number of vertices

  // Create a buffer object
  var vertexColorBuffer = gl.createBuffer();  
  if (!vertexColorBuffer) {
    console.log('Failed to create the buffer object');
    return false;
  }

  // Write the vertex coordinates and colors to the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  //Get the storage location of a_Position, assign and enable buffer
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
  gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object

  // Get the storage location of a_Position, assign buffer and enable
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if(a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
  gl.enableVertexAttribArray(a_Color);  // Enable the assignment of the buffer object

  return n;
}

发现问题刚刚发生在 Chrome 有人可以解释一下为什么我是一个好奇的人吗？

Answer 1

这段代码有很多问题。一些真实，一些意见。

如果要绘制点，则需要在顶点着色器中设置点大小。例如
```
gl_PointSize = 10.0;
```
#endif GL_ES无效

需要
```
#endif // GL_ES
```
您应该有 initShader 函数打印着色器编译错误和程序 link 错误。如果这样做，您会在 JavaScript 控制台中看到此错误。 See example here

我认为这就是获取运行代码所需的全部内容，但是......其他问题

你不需要#ifdef GL_ES ... #endif

有些人在 webgl 运回之前添加了这些东西，当测试版需要它时。发布 WebGL 从不需要它。
initShaders 假设只有 1 个着色器程序

initShaders 将属性 program 添加到 WebGLRenderingContext gl。这真的没有意义。大多数 WebGL 程序都有多个着色器程序。 initShaders 确实应该 return 程序，然后您可以根据需要使用它。
在属性位置上检查 -1 通常不正确。

如果您想知道 program/shader 是否编译失败或 link 您可以使用 gl.getShaderInfo(gl.COMPILE_STATUS) 和 gl.getProgramInfo(gl.LINK_STATUS) 检查它们各自的状态。我猜 initShaders 已经这样做了，但你没有提供。

您不检查 -1 的原因是通常您希望能够进行调试。例如，假设您运行您的程序和事情发生在屏幕上。我要做的第一件事是编辑片段着色器以仅使用常量值，如
```
gl_FragColor = vec4(0,1,0,1); // green
```
如果我在我希望看到颜色的地方看到绿色，那么我至少知道顶点着色器的 gl_Position 部分正在工作。但！当我这样做时 v_Color 不再使用。这意味着 WebGL 可能会优化它。位置将为 -1，程序将不再运行无法调试。

相反，WebGL (OpenGL) 设计为在传递给 gl.enable/disableVertexAttrib 和 gl.vertex??? 函数时忽略 -1。当您进行调试并且事情得到优化时，您的程序可以继续正常工作。

统一定位也是如此。如果制服不存在，它的位置将为 null。如果您将 null 传递给任何 gl.uniform??? 函数，它将忽略它。
检查 gl.createBuffer returns null 一般不正确

gl.createBuffer() 将 return null 当且仅当您丢失了 webgl 上下文。但是，在那种情况下，WebGL api 的其余部分旨在保持正常运行而不会出现错误。从字面上看，没有任何情况可以从 gl.createBuffer() 中获取 null，您可以以任何有意义的方式对其进行响应，因此没有理由检查它。

这是包含所有这些更改的版本。注意我正在使用 twgl.js 因为你没有 post links 到你用来提供 getWebGLContext 和 initShaders.[=44= 的任何东西]

// MultiPoint.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
     'v_Color = a_Color;\n' +
     'gl_PointSize = 10.0;\n' + 
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  'precision mediump float;\n' + // Precision qualifier (See Chapter 6)
  'varying vec4 v_Color;\n' + 
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = canvas.getContext("webgl");
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  var program = twgl.createProgramFromSources(gl, [VSHADER_SOURCE, FSHADER_SOURCE]);
  if (!program) {
    console.log('Failed to intialize shaders.');
    return;
  }
  gl.useProgram(program);

  // 
  var n = initVertexBuffers(gl, program);
  if (n < 0) {
    console.log('Failed to set the vertex information');
    return;
  }

  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw three points
  gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl, program) {
  var verticesColors = new Float32Array([
    // Vertex coordinates and color
     0.0,  0.5,  1.0,  0.0,  0.0, 
    -0.5, -0.5,  0.0,  1.0,  0.0, 
     0.5, -0.5,  0.0,  0.0,  1.0, 
  ]);
  var n = 3; // The number of vertices

  // Create a buffer object
  var vertexColorBuffer = gl.createBuffer();  

  // Write the vertex coordinates and colors to the buffer object
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);

  var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  //Get the storage location of a_Position, assign and enable buffer
  var a_Position = gl.getAttribLocation(program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
  gl.enableVertexAttribArray(a_Position);  // Enable the assignment of the buffer object

  // Get the storage location of a_Position, assign buffer and enable
  var a_Color = gl.getAttribLocation(program, 'a_Color');
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
  gl.enableVertexAttribArray(a_Color);  // Enable the assignment of the buffer object

  return n;
}
    
main();

canvas { border: 1px solid red; }

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

目前使用 varying Chrome 不起作用？

Using varying at the moment Chrome not working?

webgl