canvas 中未呈现任何内容

Question

这是我的代码：

我只是想在 webgl 中渲染三角形，但我做不到。

控制台中没有错误或警告，而 canvas 中没有呈现任何内容。

`use strict`;
const vsTriangle = `#version 300 es
    in vec3 a_position;
    out vec3 varying_color;

    uniform mat4 u_vpMatrix;

    void main(){
        gl_Position = u_vpMatrix*vec4(a_position, 1.0);
        varying_color = a_position;
    }
`;

const fsTriangle = `#version 300 es

    precision mediump float;
    in vec3 varying_color;

    out vec4 outColor;

    void main(){
        outColor = vec4(1.0, 0.0, 0.0, 0.7);
    }
`;


const up = [0, 1, 0];
let modelDegree = 0;
let cameraYposition = 2.0;

const positionTriangle = [0.0, 1.0, 0.0, 0.5, 0.5, 0.0, 1.0, 0.0, 0.0];


(function() {
  const canvas = document.querySelector("#main-canvas");
  let gl = canvas.getContext("webgl2");
  if (!gl) {
    console.log("webgl2 not found");
    return;
  }
  var ext = gl.getExtension("OES_element_index_uint");

  let programTriangle = webglUtils.createProgramFromSources(gl, [
    vsTriangle,
    fsTriangle,
  ]);

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  let position = gl.getAttribLocation(programTriangle, "a_position");
  let modelMatrixLocation = gl.getUniformLocation(programTriangle, "u_vpMatrix");

  let posTriangleBuffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(positionTriangle),
    gl.STATIC_DRAW
  );


  let cameraDegree = 0;

  function degToRadian(deg) {
    return (Math.PI / 180) * deg;
  }

  function initialCameraSetup(cameraPosition, up) {
    let cameraMatrix = m4.lookAt(cameraPosition, [1, 0, 0], up);
    return cameraMatrix;
  }

  function drawScene() {
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0.5, 0.5, 0.5, 0.5);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);

    let cameraRadian = degToRadian(cameraDegree);

    let cameraMatrix = m4.yRotation(cameraRadian);

    cameraMatrix = m4.translate(cameraMatrix, 0.0, 0.0, 1.5);

    cameraPosition = [cameraMatrix[12], cameraMatrix[13], cameraMatrix[14]];
    cameraMatrix = initialCameraSetup(cameraPosition, up);

    viewMatrix = m4.inverse(cameraMatrix);

    let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    let fieldofView = degToRadian(90);
    let projectionMatrix = m4.perspective(fieldofView, aspect, 0.01, 1000);

    let vProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);

    gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
    gl.enableVertexAttribArray(position);

    gl.vertexAttribPointer(
      position,
      3,
      gl.FLOAT,
      false,
      0,
      0
    );

    gl.useProgram(programTriangle);

    gl.uniformMatrix4fv(
      modelMatrixLocation,
      false,
      vProjectionMatrix
    );

    gl.drawArrays(gl.TRIANGLES, 0, 3);

    window.requestAnimationFrame(drawScene);
  }

  requestAnimationFrame(drawScene);
})();

#main-canvas {
  width: 720px;
  height: 360px;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>test !!!</title>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
  <div class="canvas-container">
    <canvas id="main-canvas"></canvas>
  </div>
  <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
  <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  <script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>
</body>

</html>

Answer 1

你的“三角形”不是三角形而是直线。改变顶点坐标：

~~const positionTriangle = [0.0, 1.0, 0.0, 0.5, 0.5, 0.0, 1.0, 0.0, 0.0];~~

const positionTriangle = [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0];

正面的默认缠绕顺序是逆时针。由于启用了面剔除，您需要确保您的三角形具有逆时针缠绕顺序。参见 Face Culling

`use strict`;
const vsTriangle = `#version 300 es
    in vec3 a_position;
    out vec3 varying_color;

    uniform mat4 u_vpMatrix;

    void main(){
        gl_Position = u_vpMatrix*vec4(a_position, 1.0);
        varying_color = a_position;
    }
`;

const fsTriangle = `#version 300 es

    precision mediump float;
    in vec3 varying_color;

    out vec4 outColor;

    void main(){
        outColor = vec4(1.0, 0.0, 0.0, 0.7);
    }
`;


const up = [0, 1, 0];
let modelDegree = 0;
let cameraYposition = 2.0;

const positionTriangle = [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0];


(function() {
  const canvas = document.querySelector("#main-canvas");
  let gl = canvas.getContext("webgl2");
  if (!gl) {
    console.log("webgl2 not found");
    return;
  }
  var ext = gl.getExtension("OES_element_index_uint");

  let programTriangle = webglUtils.createProgramFromSources(gl, [
    vsTriangle,
    fsTriangle,
  ]);

  let vao = gl.createVertexArray();
  gl.bindVertexArray(vao);
  let position = gl.getAttribLocation(programTriangle, "a_position");
  let modelMatrixLocation = gl.getUniformLocation(programTriangle, "u_vpMatrix");

  let posTriangleBuffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(positionTriangle),
    gl.STATIC_DRAW
  );


  let cameraDegree = 0;

  function degToRadian(deg) {
    return (Math.PI / 180) * deg;
  }

  function initialCameraSetup(cameraPosition, up) {
    let cameraMatrix = m4.lookAt(cameraPosition, [1, 0, 0], up);
    return cameraMatrix;
  }

  function drawScene() {
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0.5, 0.5, 0.5, 0.5);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);

    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);

    let cameraRadian = degToRadian(cameraDegree);

    let cameraMatrix = m4.yRotation(cameraRadian);

    cameraMatrix = m4.translate(cameraMatrix, 0.0, 0.0, 1.5);

    cameraPosition = [cameraMatrix[12], cameraMatrix[13], cameraMatrix[14]];
    cameraMatrix = initialCameraSetup(cameraPosition, up);

    viewMatrix = m4.inverse(cameraMatrix);

    let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    let fieldofView = degToRadian(90);
    let projectionMatrix = m4.perspective(fieldofView, aspect, 0.01, 1000);

    let vProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);

    gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
    gl.enableVertexAttribArray(position);

    gl.vertexAttribPointer(
      position,
      3,
      gl.FLOAT,
      false,
      0,
      0
    );

    gl.useProgram(programTriangle);

    gl.uniformMatrix4fv(
      modelMatrixLocation,
      false,
      vProjectionMatrix
    );

    gl.drawArrays(gl.TRIANGLES, 0, 3);

    window.requestAnimationFrame(drawScene);
  }

  requestAnimationFrame(drawScene);
})();

#main-canvas {
  width: 720px;
  height: 360px;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>test !!!</title>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
  <div class="canvas-container">
    <canvas id="main-canvas"></canvas>
  </div>
  <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
  <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  <script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>
</body>

</html>

canvas 中未呈现任何内容

Nothing is being rendered in canvas

javascript

glsl

shader

webgl

webgl2