Nothing is rendering in a canvas

Question

I am not able to render anything in canvas and the console is not showing any error. I think my eye is missing something. I am doing nothing just trying to render the cube coordinate in canvas but nothing is being displayed.

( this sentence inside the bracket is just unwanted text for making this question pass the error of post is mostly code by StackOverflow)

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

well I'm getting `[.WebGL-0x1217bd166500]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0` in my console... your dataset contains 24 points yet your draw call requests 6 * 6 triangles = 108 points. — LJᛃ, Jul 22 '20 at 14:47
Thanks I can't believe I did such a blunder !!! I don't get that error !! What is your system and browser? — Pravin Poudel, Jul 22 '20 at 15:36

gman · Accepted Answer · 2020-07-22T16:58:11.047

I moved my webgl helper to <script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>

Adding it I get this error

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

Checking the code the issue is

let primitiveType = gl.TRAINGLES;

it should be

let primitiveType = gl.TRIANGLES;

And then as LJ points out there are only 24 vertices but the call to drawArrays has 36 as count

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>

Thanks @greggman !!! The wrong spelling of the triangle is so deeply rooted in my mind that it gives me trouble every time and I can't even find with an eye that it is wrong. I will put sticky note from now. — Pravin Poudel, Jul 22 '20 at 15:51
AND there in code, there are 24 vertex position data to position buffer but in drawArray, it calls for 36 triangles, there it needs 36 vertex position. What happen to the other 12 vertices? — Pravin Poudel, Jul 22 '20 at 16:02

Nothing is rendering in a canvas

1 Answers1