微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

WebGL问题:试图制作3d对象我究竟做错了什么?

如何解决WebGL问题:试图制作3d对象我究竟做错了什么?

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

不变:

const vertices2 = [0,.4,-.6,.0,.6,0];
  let dmColor2 =[1,1,.5,.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);  
  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,0);
    gl.enabLevertexAttribArray(1);
  gl.bindVertexArray(dmVAO2);
    gl.vertexAttrib1f(3,1.0);
    indices = [0,2];
    gl.vertexAttrib3f(2,-1,-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,.8,.8];
  let dmColor2 =[1,0);

我做错了什么还是错过了什么,我真的不明白为什么它不起作用。看起来像是2d的蓝色三角形。

解决方法

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

在这里a whole set of articles上有几张图。确保阅读先决条件文章。这不是一个小话题。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。