乐趣区

关于javascript:JavaScript-WebGL-绘制顺序

jiezi

引子

在 JavaScript WebGL 三维相干概念中尝试一些成果的时候，又碰到了新问题，就去查了材料，本人尝试后总结下。

  • Origin
  • My GitHub

绘制程序

之前二维绘制程序并没有产生显著的不好成果，当初绘制三维影响就比拟大了。

先看看二维雷同一套顶点不同程序的成果：

  • 二维面程序示例 1
  • 二维面程序示例 2

面的色彩始终保持统一，但程序变了，发现 WebGL 默认状况下会依照缓冲区中程序绘制，也就是后绘制的图形会笼罩先绘制的图形。这个就像一层一层贴纸一样，比拟合乎个别认知，所以在二维绘制时并没发现显著不对劲的中央。

对于三维绘制程序先思考一下：三维的顶点坐标有三个重量，第三个重量是在 z 轴上示意深度信息，默认垂直屏幕向内为负方向，那么 z 值越大示意离屏幕越近，既然都有辨别的根据，间接依照这个程序绘制应该就能够了。理论试试：

  • 三维面程序示例 1
  • 三维面程序示例 2

发现示例 2 中 z 重量的设置并没有成果，还是跟二维绘制面程序一样。查资料说要开启 暗藏面打消 性能：

gl.enable(gl.DEPTH_TEST)

再来看看示例 2 开启 DEPTH_TEST，发现还是没有成果，找到网上的一些示例并进行比照，发现还须要投影，能力看到成果，见示例 2 开启 DEPTH_TEST 且产生正确投影。

深度抵触

开启暗藏面打消性能之后，在绘制两个很凑近的面时，可能会呈现显示异样的状况，这个景象称为 深度抵触(Z fighting)。这里有两类这个景象的示例：

  • drawArrays 执行一次绘制，外面蕴含了两个面示例 1
  • drawArrays 执行两次绘制，独自绘制的两个面示例 2

示例 1 的状况是一次绘制多个面，通过调整 z 重量比拟容易解决。

示例 2 的状况是屡次绘制多个面，不确定性绝对更强，这个时候能够借助 多边形偏移 (polygon offset) 来解决。在两次绘制之间指定偏移：

  // 代码省略
  gl.enable(gl.POLYGON_OFFSET_FILL);
  gl.drawArrays(gl.TRIANGLES, 0, 3); // 开启多边形偏移
  gl.polygonOffset(1, 1); // 指定偏移
  gl.drawArrays(gl.TRIANGLES, 3, 3);

这是示例。

polygonOffset(factor, units) 指定加到每个顶点绘制 z 值上的偏移量，两个参数都是比例因子，最终值的计算公式是 factor × DZ + r × units，其中 DZ 是顶点所在外表绝对于观察者眼帘的角度，r 是设施可能解析偏移量的最小值。这个办法对于渲染暗藏线图像、将贴花利用于外表以及渲染具备高亮显示边缘平面图形很有用。

参考资料

  • polygonOffset mdn
  • WebGL 编程指南在线版
退出移动版