今日、Canvasが優れたパフォーマンスを誇ることができず、複雑なシーンをリアルタイムでレンダリングすることが問題になることがあります。 WebGLを使用すると、パフォーマンスの状況ははるかに改善されますが、 一般的なブラウザーのすべてがこの標準をサポートしているわけではありません。特に、MicrosoftはIEでのサポートの実装を計画していません(このため、サードパーティの開発者はすでにプラグインを作成し始めています )。
WebGL-2dを接続して2、3行追加するだけで、WebGLをサポートするブラウザーでCanvas 2d APIを使用して実装されたグラフィックレンダリングを大幅に高速化し、通常の2dコンテキストへのフォールバックを提供できます。
幸いなことに、ブラウザ開発者はCanvasグラフィックスのパフォーマンスの問題に取り組んでおり、2Dコンテキストのハードウェアアクセラレーションがサポートされているため、近い将来(できれば)このライブラリは需要がなくなるでしょうが、今日では間違いなく必要になっています。
WebGL-2dを初期化し、コンテキストを取得する例:
var cvs = document.getElementById("myCanvas");
WebGL2D.enable(cvs);
var ctx = cvs.getContext('webgl-2d');
プロジェクトリポジトリはGitHubにあります 。
リポジトリからのいくつかの例とベンチマークは、htmlファイルを直接開くと機能しません(この起動パターンでCookieを設定できないため、キャッチされないエラー:SECURITY_ERR:DOM例外18が発生します)。それをローカルWebサーバーで実行します。
WebGL-2dは現在、次の標準2dコンテキストメソッドをサポートしています。
- strokeStyle
- fillStyle
- strokeRect
- fillRect
- 翻訳する
- 回転させる
- スケール
- 保存する
- 復元する
- lineWidth
- drawImage
- createImageData
- getImageData
- putImageData
- beginPath
- closePath
- moveTo
- lineTo
- 直します
- 塗りつぶす*
- ストローク*
*現在のリリースの塗りつぶしとストロークのメソッドは、円弧と曲線をサポートしていません。
残念ながら、現時点では、作者は彼の頭脳の開発を放棄しています(最後のコミットは2011年4月に行われました)が、いずれにしても、プロジェクトは注目に値します。