WebGL Question: Trying to make 3d object. What am I doing wrong?

Question

I've tried changing the z in the vertices to a different number but it looks the same as when it has 0. I am a visual learner so any example or visual explanation will be greatly appreciated.

Without changes:

const vertices2 = [0, .4, 0, 
                    -.6, .0, 0,
                    .6, 0, 0];
  let dmColor2 =[1, 1, 1, 0, .5, 1,  0, .4,                         
                .5, .5, 1, 0, .5, 1, 0, .4, 0, 
                0, .5, 1, 0, .5, 1, 0, .9, 0,
                0, .5, 1, 0, .5, 1, 0, .9, 0]; 
  //creates object2
  dmVAO2 = gl.createVertexArray(); 
  gl.bindVertexArray(dmVAO2);
  dmVBO2 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, dmVBO2);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices2), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);  
  gl.enableVertexAttribArray(0);
  //creates color 2
  dmColorBuffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, dmColorBuffer2);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(dmColor2), gl.STATIC_DRAW);
    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(1);

  gl.bindVertexArray(dmVAO2);
    gl.vertexAttrib1f(3, 1.0);
    indices = [0, 1, 2];
    gl.vertexAttrib3f(2, -1, 0, -1);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.DYNAMIC_DRAW);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

and with changes:

const vertices2 = [0, .4, .8, 
                    -.6, .0, .8,
                    .6, 0, .8];
  let dmColor2 =[1, 1, 1, 0, .5, 1,  0, .4,                         
                .5, .5, 1, 0, .5, 1, 0, .4, 0, 
                0, .5, 1, 0, .5, 1, 0, .9, 0,
                0, .5, 1, 0, .5, 1, 0, .9, 0]; 
  //creates object2
  dmVAO2 = gl.createVertexArray(); 
  gl.bindVertexArray(dmVAO2);
  dmVBO2 = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, dmVBO2);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices2), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);  
  gl.enableVertexAttribArray(0);
  //creates color 2
  dmColorBuffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, dmColorBuffer2);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(dmColor2), gl.STATIC_DRAW);
    gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(1);

  gl.bindVertexArray(dmVAO2);
    gl.vertexAttrib1f(3, 1.0);
    indices = [0, 1, 2];
    gl.vertexAttrib3f(2, -1, 0, -1);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.DYNAMIC_DRAW);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

Am I doing something wrong or am I missing something, I really don't understand why it is not working. Looks like a 2d, Blue triangle either way.

Answer 1

You need to show your shaders. WebGL does not draw 3D by itself. All it does is execute 2 functions on the GPU, one, a vertex shader, to compute clip space vertices, From that it draw 2D points, lines, and triangles. While drawing those 2D points, lines, and triangles it calls the other, a fragment shader, to decide what color to make pixels. Adding a Z coordinate to your points will not provide 3d unless you write shaders that convert from 3D to 2D triangles.

Here's a whole set of articles on it with several diagrams. Be sure to read the prerequisite articles. It's not a small topic.