webgl入门（四）:使用webgl绘制贝塞尔曲线

参考文章: WebGL 三维几何加工

webgl没有可能直接绘制曲线的基本图元, 我们选择LINE_STRIP图元类型, 表示以首尾连接的线段方式绘制. 所以我们可以在贝塞尔曲线上采样, 从而形成一条近似的曲线, 采样点越密集, 曲线越光滑.

下图展示了webgl支持的基本图元类型以及它们示意图:

function getPointOnBezierCurve(points, offset, t) {
  const invT = (1 - t);
  return v2.add(v2.mult(points[offset + 0], invT * invT * invT),
                v2.mult(points[offset + 1], 3 * t * invT * invT),
                v2.mult(points[offset + 2], 3 * invT * t * t),
                v2.mult(points[offset + 3], t * t  *t));
}
/**

*/

function getPointsOnBezierCurve(points, offset, numPoints) {
  const points = [];
  for (let i = 0; i < numPoints; ++i) {
    const t = i / (numPoints - 1);
    points.push(getPointOnBezierCurve(points, offset, t));
  }
  return points;
}