canvas 中没有任何渲染

Question

我无法在 canvas 中呈现任何内容，控制台也没有显示任何错误。我觉得我的眼睛漏掉了什么。我什么也没做，只是试图在 canvas 中渲染立方体坐标，但没有显示任何内容。

（括号内的这句话只是不需要的文本，用于使这个问题通过 post 的错误主要是 Whosebug 的代码）

"use strict";

var vs = `#version 300 es
in vec4 a_position;
uniform mat4 MVPmatrix;


void main(){
  gl_Position = MVPmatrix*a_position;

}`;

var fs = `#version 300 es 
precision mediump float;

out vec4 FragColor;

void main(){
  FragColor = vec4(1, 0.5, 0.5, 1);
}
`;

function main() {
  var canvas = document.querySelector("#canvas");
  console.log(canvas);
  let gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }

  const program = webglUtils.createProgramFromSources(gl, [vs, fs]);

  var positionLocation = gl.getAttribLocation(program, "a_position");
  var matrixLocation = gl.getUniformLocation(program, "MVPmatrix");

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  let positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  setGeometry(gl);
  gl.enableVertexAttribArray(positionLocation);

  let size = 3;
  let type = gl.FLOAT;
  let normalize = false;
  let stride = 0;
  let offset = 0;

  gl.vertexAttribPointer(
    positionLocation,
    size,
    type,
    normalize,
    stride,
    offset
  );

  function degreeToRadian(degree) {
    return (degree * Math.PI) / 180;
  }
  let fieldOfViewRadian = degreeToRadian(60);

  drawScene();

  function drawScene() {
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0.5, 0.7, 1.0, 1.0);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.enable(gl.CULL_FACE);

    gl.enable(gl.DEPTH_TEST);

    gl.useProgram(program);

    gl.bindVertexArray(vao);

    let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    let zNear = 0.001;
    let zFar = 2000;

    let projectionMatrix = m4.perspective(
      fieldOfViewRadian,
      aspect,
      zNear,
      zFar
    );

    let modelMatrix = m4.identity();
    modelMatrix = m4.translate(modelMatrix, 0, 0, -4);
    modelMatrix = m4.xRotate(modelMatrix, 0.5);
    modelMatrix = m4.yRotate(modelMatrix, 0.5);

    let cameraMatrix = m4.yRotation(0);
    cameraMatrix = m4.translate(cameraMatrix, 0, 0, 200);
    let viewMatrix = m4.inverse(cameraMatrix);

    let modelView = m4.multiply(viewMatrix, modelMatrix);
    let viewProjectionMatrix = m4.multiply(projectionMatrix, modelView);

    gl.uniformMatrix4fv(matrixLocation, false, viewProjectionMatrix);

    let primitiveType = gl.TRAINGLES;
    let offset = 0;
    let count = 6 * 6;
    gl.drawArrays(primitiveType, offset, count);
  }
}

main();

function setGeometry(gl) {
  let positionData = new Float32Array([
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    -10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    10,
    10,
    -10,
    10,
    10,
    -10,
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    10,
    10,
    -10,
    10,
    -10,
    -10,
    -10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    10,
    10,
    10,
    10,
    10,
    -10,
  ]);
  gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
}

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>

  <style>
    #canvas {
      width: 100vw;
      height: 100vh;
    }
  </style>
  <body>
    <canvas id="canvas"></canvas>
    <script src="js/script.js" async defer></script>
    <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>
    <script src="https://greggman.github.io/webgl-helpers/webgl-gl-error-check.js"></script>
    <script src="js/webgl.js"></script>
  </body>
</html>

Answer 1

我将我的 webgl 助手移动到 <script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>

添加它我得到这个错误

error in drawArrays(/*UNKNOWN WebGL ENUM*/ undefined, 0, 36): argument 0 is undefined
with WebGLVertexArrayObject() bound

正在检查问题所在的代码

let primitiveType = gl.TRAINGLES;

应该是

let primitiveType = gl.TRIANGLES;

然后正如 LJ 指出的那样只有 24 个顶点但是对 drawArrays 的调用有 36 个作为计数

error in drawArrays(TRIANGLES, 0, 36): INVALID_OPERATION
WebGLBuffer("*unnamed*") assigned to attribute 0 used as attribute 'a_position' in current program is too small for draw parameters.
index of highest vertex accessed: 35
attribute size: 3, type: FLOAT, stride: 0, offset: 0, divisor: 0
needs 432 bytes for draw but buffer is only 336 bytes
with WebGLProgram("*unnamed*") as current program
with WebGLVertexArrayObject() bound

"use strict";

var vs = `#version 300 es
in vec4 a_position;
uniform mat4 MVPmatrix;


void main(){
  gl_Position = MVPmatrix*a_position;

}`;

var fs = `#version 300 es 
precision mediump float;

out vec4 FragColor;

void main(){
  FragColor = vec4(1, 0.5, 0.5, 1);
}
`;

function main() {
  var canvas = document.querySelector("#canvas");
  console.log(canvas);
  let gl = canvas.getContext("webgl2");
  if (!gl) {
    return;
  }

  const program = webglUtils.createProgramFromSources(gl, [vs, fs]);

  var positionLocation = gl.getAttribLocation(program, "a_position");
  var matrixLocation = gl.getUniformLocation(program, "MVPmatrix");

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  let positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  setGeometry(gl);
  gl.enableVertexAttribArray(positionLocation);

  let size = 3;
  let type = gl.FLOAT;
  let normalize = false;
  let stride = 0;
  let offset = 0;

  gl.vertexAttribPointer(
    positionLocation,
    size,
    type,
    normalize,
    stride,
    offset
  );

  function degreeToRadian(degree) {
    return (degree * Math.PI) / 180;
  }
  let fieldOfViewRadian = degreeToRadian(60);

  drawScene();

  function drawScene() {
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0.5, 0.7, 1.0, 1.0);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.enable(gl.CULL_FACE);

    gl.enable(gl.DEPTH_TEST);

    gl.useProgram(program);

    gl.bindVertexArray(vao);

    let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    let zNear = 0.001;
    let zFar = 2000;

    let projectionMatrix = m4.perspective(
      fieldOfViewRadian,
      aspect,
      zNear,
      zFar
    );

    let modelMatrix = m4.identity();
    modelMatrix = m4.translate(modelMatrix, 0, 0, -4);
    modelMatrix = m4.xRotate(modelMatrix, 0.5);
    modelMatrix = m4.yRotate(modelMatrix, 0.5);

    let cameraMatrix = m4.yRotation(0);
    cameraMatrix = m4.translate(cameraMatrix, 0, 0, 200);
    let viewMatrix = m4.inverse(cameraMatrix);

    let modelView = m4.multiply(viewMatrix, modelMatrix);
    let viewProjectionMatrix = m4.multiply(projectionMatrix, modelView);

    gl.uniformMatrix4fv(matrixLocation, false, viewProjectionMatrix);

    let primitiveType = gl.TRIANGLES;
    let offset = 0;
    let count = 24;//6 * 6;
    gl.drawArrays(primitiveType, offset, count);
  }
}

main();

function setGeometry(gl) {
  let positionData = new Float32Array([
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    -10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    10,
    10,
    -10,
    10,
    10,
    -10,
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    10,
    10,
    -10,
    10,
    -10,
    -10,
    -10,
    -10,
    -10,
    10,
    10,
    -10,
    10,
    10,
    -10,
    -10,
    -10,
    10,
    -10,
    -10,
    10,
    10,
    10,
    10,
    10,
    10,
    10,
    -10,
  ]);
  gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
}

#canvas {
  width: 100vw;
  height: 100vh;
}

<canvas id="canvas"></canvas>
<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>
<script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>
<script src="js/webgl.js"></script>

canvas 中没有任何渲染

Nothing is rendering in a canvas

webgl

webgl2