続：WebGLでベジェ曲線を描いてみた | SONICMOOV LAB12月になり、各所でアドベントカレンダーが始まっていますね。ソニックムーブのスタッフブログも25日まで毎日更新となります。 ソニックムーブ Advent Calendar 2014 開催です！ 初日を担当します、フロントエンジニアのらくさんです。元々3日目を担当する予定だったので初日らしい内容というわけでもなく、WebGLでベジェ曲線を描いてみた の続きになります。前回、2次ベジェ曲線の断片ひとつをシェーダで描画することはできました。今回は、複数の2次ベジェ曲線で構成されるパスの内部を塗りつぶします。 ステンシルバッファを使って凹型ポリゴンを塗りつぶす 本題に入る前に、ステンシルバッファを使って凹型ポリゴンを塗りつぶす方法を紹介します。次節では、これを2次ベジェ曲線のパスを塗りつぶすのに応用します。 上図左の凹型ポリゴンABCDEを塗りつぶす場合を考えます。まず、このポリゴン上の頂点のうち
