WebGL笔记：图形转面的原理与实现

1 ）回顾 WebGL 三种面的适应场景

• TRIANGLES 单独三角形
• TRIANGLE_STRIP 三角带
• TRIANGLE_FAN 三角扇
• 备注
  • 在实际的引擎开发中，TRIANGLES 是用得最多的
  • TRIANGLES 的优势是可以绘制任意模型，缺点是比较费点

2 ）适合 TRIANGLES 单独三角形的的模型

• 比如上述这个不规则图形

3 ）TRIANGLE_STRIP 和TRIANGLE_FAN 的优点和缺点

• TRIANGLE_STRIP 和TRIANGLE_FAN 的优点是相邻的三角形可以共用一条边，比较省点
• 然而其缺点也太明显，因为它们只适合绘制具备相应特点的模型
• 适合TRIANGLE_STRIP三角带的模型如下

• 适合TRIANGLE_FAN三角扇的模型如下

• 扩展：
  • three.js 使用的绘制面的方式就是TRIANGLES，可以在其 WebGLRenderer 对象的源码的 renderBufferImmediate 方法中查看

    _gl.drawArrays(_gl.TRIANGLES, 0, object.count);
    

4 ）图形转面的基本步骤

• 在three.js 里有一个图形几何体ShapeGeometry，可以把图形变成面。

• 只要有数学支撑，就可以实现这种效果

5 ）使用TRIANGLES 独立三角形的方式，将图形转成面

• 原理

  • 使用的方法叫做“砍角”
  • 其原理就是从起点将多边形中符合特定条件的角逐个砍掉，然后保存到一个集合里
  • 直到把多边形砍得只剩下一个三角形为止。
  • 这时候集合里的所有三角形就是我们想要的独立三角形。

• 举个例子

• 已知：逆时针绘图的路径G

• 求：将其变成下方网格的方法

• 求解步骤
  • 1）寻找满足以下条件的 ▲ABC
    • ▲ABC 的顶点索引位置连续，如：012、123、234
    • 比如，012时，A是0，B是1，C是2
    • 点C在向量AB的正开半平面里，可以理解为你站在A点，面朝B点，点C要在你的左手边
    • ▲ABC 中没有包含 路径G 中的其它顶点
  • 2）当找到 ▲ABC 后，就将点B从路径的顶点集合中删掉，并将ABC三个点存入集合中，然后继续往后找。
  • 3）当路径的定点集合只剩下3个点时，就结束。
  • 4）由所有满足条件的 ▲ABC 构成的集合就是我们要求的独立三角形集合。

• 在上述坐标系示例中，可辅助我们找到C点
• A是起点，B是第二个点，C则是第三个点，用这个方法，可以看到C点是否在向量AB(A->B)的左手边
• 砍角的精髓就在于不断消耗B，让图形可砍，逐渐砍完，比如B点是5时满足条件，5被干掉，下一轮砍角就可组 4,6,7 这个三角形
• 每一轮都是按照顺序(不一定是升序，因为可能从最后一个点x,0,1这样组)找三个点组成一个三角形，判断这个三角形是否符合被砍的标准

• 上面这个图形, 进一步理解如何判断一个点，比如B，在一个向量OA的左侧还是右侧
  • 从 OA 转到 OB 需要 $\theta$ 度，如果 这个角度大于零，则B在OA的左侧，反之，则在右侧
  • 如何判断 这个 $\theta$ 是 大于零 还是 小于零, 有一个算法可以使用：
    • $sin\theta \ast |OA|\ast |OB|=ax\ast by-ay\ast bx$
    • 在这个公式中，|OA|, |OB| 都是绝对值，都是 >=0 的，所以，只要后面的 $ax\ast by-ay\ast bx>0$, 则 $sin\theta >0$, $\theta >0$
    • 这样就可判断出一个点在向量的哪一侧了

图形转面的实现

1 ）绘制路径G

• 路径G的顶点数据

  const pathData = [
    0, 0,
    600, 0,
    600, 100,
    100, 100,
    100, 500,
    500, 500,
    500, 300,
    300, 300,
    300, 400,
    200, 400,
    200, 200,
    600, 200,
    600, 600,
    0, 600
  ];
  

  • 这一些数据是CSS的顶点数据，走的是CSS的坐标系
  • 画CSS的时候，需要逆时针绘图
  • 在CSS坐标系，水平的是 x轴(向右为正)，垂直的是 y轴(向下为正), 原点在左上角

• 在上图中，就是数据对应的图形，原点 (0, 0) 对应左上角，逆时针绘制出来的
• 在pathData里两个数字为一组，分别代表顶点的ｘ位和ｙ位
• pathData里的数据是我以像素为单位画出来的，在实际项目协作中，UI给我们的svg文件可能也是以像素为单位画出来的，这个我们要做好心理准备
• 因为，webgl画布的宽和高永远都是两个单位
• 所以，我们要将上面的点画到webgl 画布中，就需要做一个数据映射