1

過去数か月間、私は WebGL に手を出していました。greggman によるWebGL Fundamentalsでは、使い慣れたピクセル空間を作成する手順を順を追って説明しています。(0, 0)は左上隅で、行列は拡大縮小、回転、移動などを可能にします。これについて考えさせられたことの 1 つは、gl コンテキストで2 次元の単純な多角形canvas2dを作成することですsvg。

これを行うために、さまざまなリソースをオンラインでまとめて、ブラウザーでレンダリングされる点の配列を三角測量しました。ポイントの配列は次のようになります。

  1. Catmull Rom 曲線計算は、点の配列を取り、各点にハンドル座標u, vプロパティを追加します。
  2. 肉眼ではカーブしているように見えながら、カーブを直線セグメントに分割するアダプティブ サブディビジョン。
  3. ループのある形状をチェックして個別の単純なポリゴンに分離するための線分交差。
  4. 最後に、分割された各シェイプにテッセレーションが適用されます。三角形の最終的な配列が返され、WebGL によってレンダリングされます。

これらの操作の実際の例は、ここにあります。(WebGL対応ブラウザが必要)

svgとの同じ例canvas2d。

現在、これはすべて JavaScript で行われており、「見た目も音も非常に高価だ」というあなたの考えに同意します。そのため、更新ループで頂点を変更すると、またはrequestAnimationFrameよりもはるかに遅くなります。これは、効率的なアルゴリズムを書き写す私の能力と関係があります。しかし、それは、私が低レベルで概説した同様の一連のアルゴリズムを作成することによって、アフォーダンスとパフォーマンスの向上を実現するブラウザー ベンダーの能力に関係しているに違いありません。canvas2dsvg

私の質問は、ブラウザ ベンダーがレンダリングに使用し、開発者が使用できるように公開する方法はありcanvas2dますsvgか?

ナイーブに聞こえるかもしれませんが、それはおそらくナイーブだからです。しかし、WebGL が Web 開発者向けのよりネイティブなアクセスと制御のサンプル API である場合、WebGL と連携する他のメソッドが利用できないのはなぜでしょうか?

4

1 に答える 1

2

凸多角形のみに関心がある場合は、シンプルなTRIANGLE_FANWebGL で十分です。凹面ポリゴンを描画する場合は、WebGL でステンシル バッファー トリックを使用できます。しかし、あなたの 1 文の質問のタイトルに対する答えは「いいえ」です。

JavaScript は驚くほど高速な場合があります。たとえば、ここには凹面ポリゴンを処理できるポリゴン テッセレーション アルゴリズムがあり、インタラクティブな速度で実行されます。

于 2013-03-08T16:24:27.250 に答える