简介在尝试JavaScriptWebGL3D相关概念中的一些效果时，遇到了一个新问题，于是查了资料，自己尝试后总结。OriginMyGitHub的二维绘图顺序之前并没有产生明显的不良影响，但是现在三维绘图的影响更大了。我们来看一下同一二维顶点集不同阶的效果：二维面序例1二维面序例2两个面的形状和对应的颜色总是一致的，即是，缓冲的顺序发生了变化。发现WebGL默认会按照缓冲区中的顺序进行绘制，即后面绘制的图形会覆盖前面绘制的图形。这就像是一层贴纸，比较符合一般认知，所以二维画的时候并没有明显的错误。先想想3D绘图序列：3D顶点坐标有三个分量，第三个分量表示z轴上的深度信息。默认竖屏是负向内，所以z值越大越靠近屏幕。既然有区分依据，直接按这个顺序画应该就够了。在实践中尝试：3D表面序列示例13D表面序列示例2示例1和示例2顶点和对应的颜色保持相同，只是z分量和缓冲区的顺序不同。如果是用z分量区分的，应该是一致的。是的，但是我发现例2还是和二维绘图面一样的顺序，z分量的设置没有任何效果。查了资料说需要开启隐藏面消除功能：gl.enable(gl.DEPTH_TEST)看例子2，开启DEPTH_TEST，还是没有效果。在网上找了一些例子对比一下。我发现需要投影才能看到效果。请参阅示例2以打开DEPTH_TEST并生成正确的投影。DepthConflict启用隐藏面消除功能后，绘制两个非常接近的面时可能会出现显示异常。这种现象称为深度冲突（Zfighting）。下面是这种现象的两个例子：drawArrays执行一个绘图，其中包含两个面。示例1drawArrays执行两次绘制，分别绘制两个面。例2例1的情况下，一次画了多个面，通过调整z分量比较容易解决。例2的情况，多个曲面被多次绘制，不确定性比较强。这时候可以使用多边形偏移来解决。指定绘图之间的偏移量：//代码省略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是设备能够分辨偏移的最小值。此方法可用于渲染隐藏线图像、将贴花应用到表面以及渲染具有突出显示边缘的实体图形。参考资料polygonOffsetmdnWebGL编程指南网络版
