WebGL 问题：尝试制作 3d 对象。我究竟做错了什么？答案

【问题标题】：WebGL Question: Trying to make 3d object. What am I doing wrong?WebGL 问题：尝试制作 3d 对象。我究竟做错了什么？
【发布时间】：2021-01-18 17:46:36
【问题描述】：

我尝试将顶点中的 z 更改为不同的数字，但它看起来与它为 0 时相同。我是视觉学习者，因此任何示例或视觉解释都将不胜感激。

没有变化：

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);

和有变化：

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);

我是做错了什么还是错过了什么，我真的不明白为什么它不起作用。无论哪种方式，看起来都像是一个二维的蓝色三角形。

【问题讨论】：

标签： html 3d webgl vertices xyz

【解决方案1】：

您需要显示您的着色器。 WebGL 本身并不绘制 3D。它所做的只是在 GPU 上执行 2 个函数，一个是顶点着色器，用于计算剪辑空间顶点，然后绘制 2D 点、线和三角形。在绘制这些 2D 点、线和三角形时，它调用另一个片段着色器来决定像素的颜色。除非您编写从 3D 转换为 2D 三角形的着色器，否则向您的点添加 Z 坐标不会提供 3d。

这是a whole set of articles，上面有几个图表。请务必阅读先决条件文章。这不是一个小话题。

【讨论】：