Japedia logo
japedia.wiki
🔍

ウェブGL

J
Japedia 編集部
|更新日: 不明
ウェブGL
原作者モジラ財団
開発者クロノス WebGL ワーキンググループ
初回リリース2011年3月3日; 13年前[1] ( 2011-03-03 )
安定リリース
2.0 / 2017年1月17日; 7年前 ( 2017-01-17 )
プラットフォームクロスプラットフォーム
タイプ翻訳
Webサイトクロノス

WebGL （ Web Graphics Libraryの略）は、プラグインを使用せずに、互換性のあるWebブラウザー内でインタラクティブな2Dおよび3DグラフィックスをレンダリングするためのJavaScript APIです。[2] WebGLは他のWeb標準と完全に統合されており、HTMLキャンバスで物理、画像処理、および効果をGPUアクセラレーションで使用できます。WebGL要素は他のHTML要素と混在させることができ、ページの他の部分やページの背景と合成することもできます。[3]

WebGL プログラムは、JavaScript で記述された制御コードと、CやC++に似た言語であるOpenGL ES シェーディング言語(GLSL ES、ESSL と呼ばれることもあります) で記述されたシェーダーコードで構成されます。WebGL コードは、コンピューターの GPU 上で実行されます。

WebGLは非営利団体の クロノス・グループによって設計・保守されています。[4] 2022年2月9日、クロノス・グループはすべての主要ブラウザでWebGL 2.0をサポートすることを発表しました。[5]

デザイン

WebGL 1.0はOpenGL ES 2.0に基づいており、3Dグラフィックス用のAPIを提供します。 [6] HTML5の キャンバス要素を使用し、ドキュメントオブジェクトモデル（DOM）インターフェイス を使用してアクセスします。

WebGL 2.0はOpenGL ES 3.0をベースにしており、WebGL 1.0の多くのオプション拡張機能の利用を保証し、新しいAPIを公開しています。[7] 自動メモリ管理はJavaScriptによって暗黙的に提供されます。[4]

OpenGL ES 2.0 と同様に、WebGL にはOpenGL 1.0 で導入され、 OpenGL 3.0 で非推奨となった固定機能API がありません。この機能は、必要な場合は、開発者がシェーダー コードと JavaScript を使用して実装する必要があります。

WebGL のシェーダーは GLSL で記述され、テキスト文字列として WebGL API に渡されます。WebGL 実装はこれらの文字列を GPU コードにコンパイルします。このコードは、API を介して送信された各頂点と、画面に ラスタライズされた各ピクセルに対して実行されます。

歴史

WebGLは、MozillaのVladimir Vukićevićが始めたCanvas 3D実験から発展しました。Vukićevićは2006年に初めてCanvas 3Dプロトタイプを披露しました。2007年末までに、Mozilla [8]とOpera [9]の両社がそれぞれ独自の実装をしていました。

2009年初頭、非営利技術コンソーシアムの クロノス・グループがWebGLワーキンググループを立ち上げ、当初はApple、Google、Mozilla、Operaなどが参加した。[4] [10] WebGL仕様のバージョン1.0は2011年3月にリリースされた。[1]

WebGLの初期のアプリケーションはZygote Bodyでした。[11] [12] 2012年11月、Autodeskは、ほとんどのアプリケーションをローカルWebGLクライアントで実行されるクラウドに移植したことを発表しました。これらのアプリケーションには、Fusion 360とAutoCAD 360が含まれていました。[13]

WebGL 2仕様の開発は2013年に始まり、2017年1月に終了しました。[14]この仕様はOpenGL ES 3.0に基づいています。[15] 最初の実装はFirefox 51、Chrome 56、Opera 43です。[16]

実装

ほぼネイティブなグラフィックレイヤーエンジン

Almost Native Graphics Layer Engine (ANGLE) は、WebGL 1.0 (ES 3.0 に厳密に準拠する 2.0) とOpenGL ES 2.0 および 3.0 標準を実装するオープンソースのグラフィック エンジンです。これは、Windows プラットフォーム上の Google Chrome と Mozilla Firefox の両方のデフォルトのバックエンドであり、WebGL および OpenGL 呼び出しを利用可能なプラットフォーム固有の API に変換することによって機能します。ANGLE は現在、デスクトップ OpenGL、OpenGL ES、Direct3D 9、および Direct3D 11 API に OpenGL ES 2.0 および 3.0 へのアクセスを提供します。[17]「[Google] Chrome は、高速化された Canvas2D 実装と Native Client サンドボックス環境を含む、Windows 上のすべてのグラフィック レンダリングに ANGLE を使用します。」[17]

ソフトウェア

WebGLは、最新のブラウザで広くサポートされています。ただし、その可用性は、GPUがサポートしているかどうかなど、他の要因にも依存します。WebGLの公式ウェブサイトでは、簡単なテストページを提供しています。[18]より詳細な情報（ブラウザが使用するレンダラーや利用可能な拡張機能など）は、サードパーティのウェブサイトで確認できます。[19] [20]

デスクトップブラウザ[2]

  • Google Chrome – WebGL 1.0は、2011年2月にリリースされたバージョン9以降、対応グラフィックカードと更新されたドライバーを搭載したすべてのプラットフォームで有効になっています。 [21] [22] Windowsではデフォルトで、ChromeはANGLE（Almost Native Graphics Layer Engine）レンダラーを使用して、OpenGL ESを、より優れたドライバーサポートを持つDirect X 9.0cまたは11.0に変換します。[23]ただし、LinuxとMac OS Xでは、デフォルトのレンダラーはOpenGLです。[24] Windowsでは、レンダラーとしてOpenGLを強制することも可能です。[23] 2013年9月以降、Chromeには新しいDirect3D 11レンダラーもあり、新しいグラフィックカードが必要になります。[25] [26] Chrome 56以降はWebGL 2.0をサポートしています。
  • Firefox – WebGL 1.0は、バージョン4.0以降、更新されたドライバーを搭載した対応グラフィックカードを搭載したすべてのプラットフォームで有効になっています。[27] 2013年以降、FirefoxはANGLE経由でWindowsプラットフォームでもDirectXを使用しています。[23] Firefox 51以降はWebGL 2.0をサポートしています。
  • Safari – OS X Mountain Lion、Mac OS X LionにインストールされたSafari 6.0以降のバージョン、およびMac OS X Snow LeopardのSafari 5.1では、WebGL 1.0のサポートが実装されていますが、Safari 8.0より前ではデフォルトで無効になっています。[28] [29] [30] [31] [32] Safariバージョン12（MacOS Mojaveで利用可能）では、WebGL 2.0のサポートが「実験的」機能として利用可能です。Safari 15では、すべてのユーザーに対してWebGL 2.0が有効になっています。[33]
  • Opera – WebGL 1.0はOpera 11と12に実装されていましたが、2014年にデフォルトで無効になりました。[34] [35] Opera 43以降はWebGL 2.0をサポートしています。
  • Internet Explorer – WebGL 1.0はInternet Explorer 11で部分的にサポートされています。[36] [37] [38] [39] Internet Explorerは当初、公式のWebGL適合性テストのほとんどに合格しませんでしたが、Microsoftは後にいくつかのアップデートをリリースしました。最新の0.94 WebGLエンジンは現在、Khronosテストの約97％に合格しています。[40] WebGLサポートは、IEWebGLなどのサードパーティのプラグインを使用して、以前のバージョンのInternet Explorerに手動で追加することもできます。[41]
  • Microsoft Edge – Microsoft Edge Legacyの場合、最初の安定版リリースでは、オープンソースのGLSLからHLSLへの トランスパイラを備えたWebGLバージョン0.95（コンテキスト名：「experimental-webgl」）がサポートされています。 [42]バージョン10240以降では、プレフィックスとしてWebGL 1.0がサポートされています。最新のChromiumベースのEdgeは、WebGL 2.0をサポートしています。

モバイルブラウザ

ツールとエコシステム

ユーティリティ

WebGL API の低レベルな性質は、それ自体では望ましい 3D グラフィックスを迅速に作成するための機能をほとんど提供しないため、一般的な操作 (たとえば、特定の形式でのシーン グラフや 3D オブジェクトの読み込み、シェーダーやビュー フラスタムへの線形変換の適用) を抽象化する高レベルのライブラリの作成につながりました。そのようなライブラリの一部は、他の言語から JavaScript に移植されました。高レベルの機能を提供するライブラリの例には、A-Frame (VR)、BabylonJS、PlayCanvas、three.js、OSG.JS、Googleのモデル ビューア、CopperLichtなどがあります。Web3D は、 X3DおよびVRMLコンテンツを WebGL で実行するための X3DOM というプロジェクトも作成しました。

ゲーム

WebGL用の2​​Dおよび3Dゲームエンジンが登場している。 [56] Unreal Engine 4やUnityなど。[57] Stage3D /FlashベースのAway3D高レベルライブラリも、 TypeScriptを介してWebGLに移植されている。[25] [58]シェーダー用のベクトルおよび行列計算ユーティリティのみを提供する、より軽量なユーティリティライブラリはsylvester.jsである。[59] [60]これは、glUtils.jsと呼ばれるWebGL固有の拡張機能と組み合わせて使用​​されることもある。[59] [61]

また、 Cocos2d -xやPixi.jsなど、WebGL上に構築された2Dライブラリもいくつかあります。これらは、Flashの世界でStarling FrameworkがStage3Dよりも優先されたのと同じような動きで、パフォーマンス上の理由からこのように実装されました。WebGLベースの2Dライブラリは、WebGLが利用できない場合はHTML5 canvasにフォールバックします。[62] GPUにほぼ直接アクセスできるようにすることでレンダリングのボトルネックを解消したことで、JavaScript実装のパフォーマンスの限界が露呈しました。いくつかはasm.jsとWebAssemblyによって対処されました（同様に、Stage3Dの導入によりActionScript内のパフォーマンスの問題が露呈しましたが、これはCrossBridgeなどのプロジェクトによって対処されました）。[62]

コンテンツ作成

他のグラフィックスAPIと同様に、WebGLシーンのコンテンツを作成するには、3Dコンテンツ作成ツールを使用して、ビューアまたはヘルパーライブラリで読み取り可能な形式でシーンをエクスポートする必要があります。この目的には、 Blender、Autodesk Maya 、SimLab Composerなどのデスクトップ3Dオーサリングソフトウェアを使用できます。特に、Blend4Webを使用すると、WebGLシーンをBlenderで完全にオーサリングし、スタンドアロンのWebページとしてもワンクリックでブラウザーにエクスポートできます。[63] CopperCubeやオンラインのWebGLベースのエディターClara.ioなどのWebGL固有のソフトウェアもいくつかあります。SketchfabやClara.ioなどのオンラインプラットフォームでは、ユーザーが3Dモデルを直接アップロードし、ホストされたWebGLビューアを使用して表示できます。

環境ベースのツール

MozillaはFirefoxバージョン27から、頂点とフラグメントシェーダーの編集を可能にするWebGLツールをFirefoxに組み込みました。 [64]他にも多くのデバッグおよびプロファイリングツールが登場しています。[65]

参照

参考文献

  1. ^ ab 「Khronos、WebGL 1.0の最終仕様をリリース」。2011年3月3日。2015年5月18日閲覧。
  2. ^ ab 「WebGLの基礎」。HTML5 Rocks。
  3. ^ Parisi, Tony (2012-08-15). 「WebGL: Up and Running」. O'Reilly Media, Incorporated. 2013-02-01 時点のオリジナルよりアーカイブ。2012-07-13に取得。
  4. ^ abc 「WebGL – Web 向け OpenGL ES 2.0」。Khronos.org。2011年 5 月 14 日閲覧。
  5. ^ 「WebGL 2.0 はすべての主要 Web ブラウザーから広範なサポートを実現」。The Khronos Group。2022年 2 月 9 日。2022年 2 月 13 日閲覧。
  6. ^ 「WebGL仕様」Khronos.org . 2011年5月14日閲覧。
  7. ^ 「WebGL 2.0 仕様」。Khronos.org。2017年 2 月 27 日閲覧。
  8. ^ 「Canvas 3D: GL パワー、Web スタイル」。Blog.vlad1.com。2011 年 7 月 17 日時点のオリジナルよりアーカイブ。2011 年 5 月 14 日閲覧。
  9. ^ 「キャンバスを別の次元へ」 My.opera.com. 2007-11-26. 2007-11-17 にオリジナルからアーカイブ。2011-05-14に閲覧。
  10. ^ 「Khronos がハードウェア アクセラレーションによる 3D グラフィックスをインターネットに提供する WebGL イニシアチブの詳細を発表」Khronos.org。2009 年 8 月 4 日。2012 年 4 月 19 日時点のオリジナルよりアーカイブ。2011年 5 月 14 日閲覧。
  11. ^ 「Google Body – Google Labs」。Bodybrowser.googlelabs.com。2011年5月13日時点のオリジナルよりアーカイブ。2011年5月14日閲覧。
  12. ^ Bhanoo, Sindya N. (2010-12-23). 「Google の新機能: Body Browser」 Well.blogs.nytimes.com . 2011-05-14閲覧。
  13. ^ 「AUTODESK FUSION 360: CAD の未来、パート 1」。3dcadworld.com。2012 年 11 月 29 日。2013年 8 月 21 日閲覧。
  14. ^ 「WebGL 2 仕様」. khronos.org. 2013-09-26 . 2013-10-28閲覧。
  15. ^ 「WebGL 2.0仕様」。
  16. ^ 「WebGL - Web API」。MDN。2024年9月28日。
  17. ^ ab 「ANGLE - Almost Native Graphics Layer Engine」。2019年。 2019年6月21日閲覧。
  18. ^ 「WebGL テスト ページ」。webgl.org。
  19. ^ 「WebGLレポート」。webglreport.com。
  20. ^ 「WebGL ブラウザ レポート — WebGL 検出 — WebGL テスター — BrowserLeaks」。browserleaks.com。
  21. ^ Mah, Paul (2011 年 2 月 8 日)。「Google が Chrome 9 をリリース。Google Instant、WebGL を搭載 – FierceCIO:TechWatch」。FierceCIO。2011 年 10 月 25 日時点のオリジナルよりアーカイブ。2012 年 3 月 20 日閲覧。
  22. ^ 「WebGL in Chrome Stable! - Learning WebGL」。learningwebgl.com。2015年5月28日時点のオリジナルよりアーカイブ。2014年8月7日閲覧。
  23. ^ abc 「(WebGL) ブラウザでネイティブ OpenGL を有効にする方法 (Windows)」。geeks3d.com。2013年 6 月 11 日。
  24. ^ 「Chromium ブログ: ANGLE プロジェクトの紹介」。Chromiumブログ。
  25. ^ ab 「WebGL around the net, 2013年10月17日 - Learning WebGL」。learningwebgl.com。2014年8月8日時点のオリジナルよりアーカイブ。2014年8月5日閲覧。
  26. ^ 「ついに！Chrome D3D11の日が来ました！」。tojicode.com。
  27. ^ 「Mozilla Firefox 4 リリースノート」。Mozilla.com。2011 年 3 月 22 日。2012年 3 月 20 日閲覧。
  28. ^ 「OS X Lion の新機能: Safari 5.1 で WebGL、Do Not Track などが登場」Fairerplatform.com、2011 年 5 月 3 日。2012 年 3 月 19 日時点のオリジナルよりアーカイブ。2012年 3 月 20 日閲覧。
  29. ^ 「Safari で WebGL を有効にする」Ikriz.nl. 2011-08-23. 2012-03-04 にオリジナルからアーカイブ。2012-03-20に取得。
  30. ^ 「WebGL 実装の取得」Khronos.org。2012 年 1 月 13 日。2012年 3 月 20 日閲覧。
  31. ^ 「Implementations/WebKit」Khronos.org。2011年9月3日。 2012年3月20日閲覧。
  32. ^ 「WebGL が WebKit Nightlies で利用可能になりました」。Webkit.org。2012 年 3 月 8 日時点のオリジナルよりアーカイブ。2012年 3 月 20 日閲覧。
  33. ^ modeless (2021-09-24). 「Safari 15がリリースされました。WebGL 2はすべての主要なブラウザとプラットフォームでサポートされるようになりました！」r/webgl 。2023年10月18日閲覧。
  34. ^ 「WebGL とハードウェア アクセラレーション」。My.opera.com。2011 年 2 月 28 日。2011 年 3 月 3 日時点のオリジナルよりアーカイブ。2012年 3 月 20 日閲覧。
  35. ^ 「Opera 12 alpha の紹介」My.opera.com、2011 年 10 月 13 日。2011 年 10 月 15 日時点のオリジナルよりアーカイブ。2012年 3 月 20 日閲覧。
  36. ^ 「WebGL (Windows)」。microsoft.com。Microsoft。
  37. ^ 「Internet Explorer 11 Preview 開発者ガイド」。Microsoft。2013 年 7 月 17 日。2013 年 7 月 24 日閲覧。
  38. ^ 「WebGL」。Microsoft。2013年7月17日。 2013年7月24日閲覧。
  39. ^ 「Internet Explorer 11 が WebGL と MPEG Dash をサポート」。Engadget。2013 年 6 月 26 日。2013年 6 月 26 日閲覧。
  40. ^ 「IE11 は公式 WebGL 適合性テスト スイートのテストで半分以上失敗」。Microsoft Connect。
  41. ^ "IEWebGL". Iewebgl . 2014年8月14日閲覧。
  42. ^ 「GitHub - Microsoft Edge WebGL 実装」。Microsoft。2016 年 6 月 4 日。2016 年 6 月 10 日閲覧。
  43. ^ 「WebGL: Web 向け 2D および 3D グラフィックス - Web API - MDN」。2023 年 6 月 28 日閲覧。
  44. ^ abc 「WebGL 2.0 - 使用できますか...」2023年6月28日閲覧。
  45. ^ McDonough, Larry. 「WebGL: 3D Gaming on the Web Arrives」BerryReview。2013年4月13日時点のオリジナルよりアーカイブ。 2013年4月9日閲覧。
  46. ^ Halevy, Ronen. 「PlayBook OS 2.0 開発者ベータ版には WebGL、Flash 11、AIR 3.0 が含まれています」。BerryReview。2011年11 月 15 日閲覧。
  47. ^ 「モバイルデバイス上の WebGL」。iChemLabs。2011 年 11 月 12 日。2013 年 1 月 27 日時点のオリジナルよりアーカイブ。2011年 11 月 25 日閲覧。
  48. ^ abc 「iPhone、Android、Windows Phone、BlackBerry、Firefox OS、その他のモバイルデバイスでのモバイル HTML5 互換性」 。2015年 9 月 16 日閲覧。
  49. ^ Kersey, Jason. 「Android 向け Chrome ベータ版アップデート」。Chromeリリース ブログ。2013 年 8 月 23 日閲覧。
  50. ^ Voipio, Riku (2010-06-07). 「N900 上の WebGL」. Suihkulokki.blogspot.com . 2011-05-14閲覧。
  51. ^ 「開発者ガイド: WebGL – Microsoft Edge 開発」。Microsoft。2016 年 10 月 8 日時点のオリジナルよりアーカイブ。2016 年 6 月 10 日閲覧。
  52. ^ 「Opera Mobile 12」。Opera Software。2012年3月1日時点のオリジナルよりアーカイブ。2012年2月27日閲覧。
  53. ^ Cunningham, Andrew (2014-09-17). 「iOS 8、徹底レビュー」 Ars Technica . 2014-09-19閲覧。
  54. ^ 「HTML5test – ブラウザは HTML5 をどの程度サポートしていますか?」. 2015 年 9 月 16 日閲覧。
  55. ^ 「HTML5test – ブラウザは HTML5 をどの程度サポートしていますか?」. 2015 年 9 月 16 日閲覧。
  56. ^ パリシ、トニー (2014 年 2 月 13 日)。HTML5 と WebGL による 3D アプリケーションのプログラミング: Web ページの 3D アニメーションと視覚化。「O'Reilly Media, Inc.」。pp. 364–366。ISBN 978-1-4493-6395-6。
  57. ^ バレット、スティーブン。「Tegra K1 が Acer の最新 Chromebook に搭載」。anandtech.com。
  58. ^ 「ブログ > Away3D Typescript 4.1 Alpha > Away3D」。away3d.com。2014年8月8日時点のオリジナルよりアーカイブ。2014年8月5日閲覧。
  59. ^ ab Boreskov, Alexey; Shikin, Evgeniy (2014). コンピュータグラフィックス: ピクセルからプログラマブルグラフィックスハードウェアまで。CRC Press。p. 370。ISBN 978-1-4398-6730-3。
  60. ^ Anyuru, Andreas (2012). プロフェッショナル WebGL プログラミング: Web 用 3D グラフィックスの開発. John Wiley & Sons. p. 140. ISBN 978-1-119-94059-3。
  61. ^ スティーブ・フルトン;ジェフ・フルトン（2013）。 HTML5 キャンバス (第 2 版)。 「オライリー・メディア株式会社」。 p. 624.ISBN​ 978-1-4493-3588-5。
  62. ^ ab 「WebGL の可能性 - TypedArray.org」。typedarray.org。
  63. ^ 「Blend4Web公式サイト - 概要」。Blend4Web.com 。 2015年6月22日閲覧。
  64. ^ 「Firefox 開発ツールで WebGL シェーダーをライブ編集する」。Mozilla Hacks – Web 開発者ブログ。
  65. ^ 「リアルタイム レンダリング · WebGL デバッグおよびプロファイリング ツール」。realtimerendering.com。2013年 11 月 19 日。
「https://en.wikipedia.org/w/index.php?title=WebGL&oldid=1258608111」から取得
ウェブGL | japedia.wiki