WebGL got weird drawing(loop not closed) with gl.TRIANGLES [closed] - webgl

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I am trying to use gl.TRIANGLES to draw an "I" shape, I have meshed it in 24 triangles, the first 22 gives me this shape, however, whenever I added the last two triangle vertices, I got this weird shape, I double-checked the coordinates of the last two triangles, and they are correct, so not sure what could be wrong in my code, which I pasted it here.
shape "I" with 22 triangles
weird shape "I" with 24 triangles
/**
* #file A simple WebGL example drawing a triangle with colors
* #author Eric Shaffer <shaffer1#eillinois.edu>
*/
/** #global The WebGL context */
var gl;
/** #global The HTML5 canvas we draw on */
var canvas;
/** #global A simple GLSL shader program */
var shaderProgram;
/** #global The WebGL buffer holding the triangle */
var vertexPositionBuffer;
/** #global The WebGL buffer holding the vertex colors */
var vertexColorBuffer;
/**
* Creates a context for WebGL
* #param {element} canvas WebGL canvas
* #return {Object} WebGL context
*/
function createGLContext(canvas) {
var context = null;
context = canvas.getContext("webgl2");
if (context) {
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
}
/**
* Loads Shaders
* #param {string} id ID string for shader to load. Either vertex shader/fragment shader
*/
function loadShaderFromDOM(id) {
var shaderScript = document.getElementById(id);
// If we don't find an element with the specified id
// we do an early exit
if (!shaderScript) {
return null;
}
var shaderSource = shaderScript.text;
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
/**
* Setup the fragment and vertex shaders
*/
function setupShaders() {
vertexShader = loadShaderFromDOM("shader-vs");
fragmentShader = loadShaderFromDOM("shader-fs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}
/**
* Populate buffers with data
*/
function setupBuffers() {
vertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
var triangleVertices = [
/*triangle*/
-0.7, -1.0, 0.0,
-0.6, -0.9, 0.0,
0.7, -1.0, 0.0,
/*triangle*/
-0.6, -0.9, 0.0,
0.7, -1.0, 0.0,
0.6, -0.9, 0.0,
/*triangle*/
0.7, -1.0, 0.0,
0.7, -0.5, 0.0,
0.6, -0.6, 0.0,
/*triangle*/
0.6, -0.9, 0.0,
0.6, -0.6, 0.0,
0.7, -1.0, 0.0,
/*triangle*/
0.6, -0.6, 0.0,
0.7, -0.5, 0.0,
0.3, -0.5, 0.0,
/*triangle*/
0.6, -0.6, 0.0,
0.3, -0.5, 0.0,
0.2, -0.6, 0.0,
/*triangle*/
0.3, -0.5, 0.0,
0.2, -0.6, 0.0,
0.3, 0.5, 0.0,
/*triangle*/
0.2, -0.6, 0.0,
0.3, 0.5, 0.0,
0.2, 0.6, 0.0,
/*triangle*/
0.3, 0.5, 0.0,
0.2, 0.6, 0.0,
0.6, 0.6, 0.0,
/*triangle*/
0.3, 0.5, 0.0,
0.6, 0.6, 0.0,
0.7, 0.5, 0.0,
/*triangle*/
0.6, 0.6, 0.0,
0.7, 0.5, 0.0,
0.7, 1.0, 0.0,
/*triangle*/
0.6, 0.6, 0.0,
0.7, 1.0, 0.0,
0.6, 0.9, 0.0,
/*triangle*/
0.7, 1.0, 0.0,
0.6, 0.9, 0.0,
-0.6, 0.9, 0.0,
/*triangle*/
0.7, 1.0, 0.0,
-0.6, 0.9, 0.0,
-0.7, 1.0, 0.0,
/*triangle*/
-0.7, 1.0, 0.0,
-0.7, 0.5, 0.0,
-0.6, 0.9, 0.0,
/*triangle*/
-0.7, 0.5, 0.0,
-0.6, 0.6, 0.0,
-0.6, 0.9, 0.0,
/*triangle*/
-0.7, 0.5, 0.0,
-0.6, 0.6, 0.0,
-0.3, 0.5, 0.0,
/*triangle*/
-0.6, 0.6, 0.0,
-0.3, 0.5, 0.0,
-0.2, 0.6, 0.0,
/*triangle*/
-0.3, 0.5, 0.0,
-0.2, 0.6, 0.0,
-0.3, -0.5, 0.0,
/*triangle*/
-0.2, 0.6, 0.0,
-0.3, -0.5, 0.0,
-0.2, -0.6, 0.0,
/*triangle*/
-0.3, -0.5, 0.0,
-0.2, -0.6, 0.0,
-0.7, -0.5, 0.0,
/*triangle*/
-0.2, -0.6, 0.0,
-0.7, -0.5, 0.0,
-0.6, -0.6, 0,0,
/*triangle*/
-0.7, -0.5, 0.0,
-0.6, -0.6, 0,0,
-0.7, -1.0, 0.0,
/*triangle*/
-0.6, -0.6, 0,0,
-0.7, -1.0, 0.0,
-0.6, -0.9, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
vertexPositionBuffer.itemSize = 3;
vertexPositionBuffer.numberOfItems = 72;
vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
vertexColorBuffer.itemSize = 4;
vertexColorBuffer.numItems = 72;
}
/**
* Draw model...render a frame
*/
function draw() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
vertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numberOfItems);
}
/**
* Startup function called from html code to start program.
*/
function startup() {
console.log("No bugs so far...");
canvas = document.getElementById("myGLCanvas");
gl = createGLContext(canvas);
setupShaders();
setupBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
draw();
}

Answer 1

You have 3 places in your vertex data were you have 0,0 instead of 0.0
var triangleVertices = [
...
/*triangle*/
-0.2, -0.6, 0.0,
-0.7, -0.5, 0.0,
-0.6, -0.6, 0,0, // <==---
/*triangle*/
-0.7, -0.5, 0.0,
-0.6, -0.6, 0,0, // <==---
-0.7, -1.0, 0.0,
/*triangle*/
-0.6, -0.6, 0,0, // <==---
-0.7, -1.0, 0.0,
-0.6, -0.9, 0.0,
];