Question

嗯，我有点新的WebGl和我跟随一些教程和书籍学习的东西，并开始构建我自己的应用程序，事情是我几周前停止了一个教程，因为当我开始使用它从来没有工作，现在我在一本书发生同样的事情之后，我的问题是，最近是否有关于如何实施变化的事情发生了变化？

这是关于更改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函数打印着色器编译错误和程序链接错误。如果你这样做，你在JavaScript控制台中看到了这个错误。 See example here

我认为只需要运行代码即可......但其他问题

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

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

initShaders向program WebGLRenderingContext添加了一个属性gl。这没有任何意义。大多数WebGL程序都有多个着色器程序。 initShaders应该真正返回您可以根据需要使用的程序。
检查属性位置-1通常不正确。

如果您想知道程序/着色器是否无法编译或链接，请使用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是否返回null通常不正确
当且仅当您丢失了webgl上下文时，
gl.createBuffer（）才会返回null。但是，在这种情况下，WebGL api的其余部分旨在保持运行而没有错误。从gl.createBuffer()开始，您无法以任何有意义的方式回复，因此没有理由可以检查它。

这是包含所有这些更改的版本。请注意我使用的是twgl.js，因为您没有发布指向您提供getWebGLContext和initShaders所用内容的链接。

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

目前Chrome使用不变？

1 个答案: