序文の代わりに
これは、WebGLに基づいた3次元JavaScriptエンジンの開発者によって書かれた小さなシリーズの最初の記事です。 この記事はレビューですが、以降の記事では、エンジン自体とその機能について、例、デモなどを使用して説明する予定です。 そして、コメントで考えられる質問に答えられるだけでなく、私を介さずに自分自身でこの主題に関する後続の記事を公開できるように、誰かが彼の招待を共有する場合、著者は感謝します。
ウェブ上の3D
すべてのhabrazhitelamiにこんにちは。 この記事では、Web上の3次元グラフィックスの分野の現状と、Webで3D関連のプロジェクトを実装したいが、テクノロジーの選択を疑うかどうかにかかわらず、チームが提供できるものについて少しお話したいと思います。 「掘る」方法を知っています。 また、この記事がWebテクノロジーの開発を監視するすべての人にとって興味深いものになることを願っています。
デスクトップアプリケーションで使用される3次元グラフィックステクノロジーは非常に長い間進歩しており、過去10年間でいくつかの世代の3D APIとグラフィックハードウェアが成功したという事実にもかかわらず、Web開発者は3Dで作業できるWebのネイティブテクノロジーを持っていませんでした。
3次元グラフィックスを使用してプロジェクトを作成している企業は、ブラウザ用の独自のプラグインを開発するか、3Dグラフィックスを提供するサードパーティのプラグインを使用する必要がありました。 これらのアプローチには、プラグインをサポートする別のチームを含めるか、ブラウザで3Dグラフィックスのソリューションを作成する企業が提供する機能とサポートのレベルによって制限する必要があります。
状況は数年前にAppleがWeb上で3Dを操作するためのAPIを提案したときに改善し始めました。 Appleの始まりは、GoogleとMozilla、そして少し後にOperaによってサポートされました。 これがWebGL仕様の誕生方法です。
ほぼ同時期に、AdobeはFlash 11に3次元グラフィックスを操作するためのAPIがあると発表しました。 私の意見では、議論の余地のない利点にもかかわらず、Flashはプラグインであり、他のプラグインと同様、Webのネイティブテクノロジーではありません。 ブラウザのエコシステムとの統合は非常に不十分であり、実際にはモバイルプラットフォームから生き残ります。 さらに、Stage3D APIは、定評のある人気のある3D APIに基づいていません。つまり、機能、ボトルネックなどの調査と理解に時間がかかります。たとえば、既存のシェーダーソースコードを転送することは困難です。 さらに、Flashでプロジェクトを作成する場合、複雑な組版のためにHTMLツールに依存することは難しく、Flashを使用して作成されたDOMページとコンテンツを調整（オーバーレイ、対話）することは難しく、ActionScriptで開発する場合、Web開発者のコミュニティによって作成された豊富なライブラリをすべて使用することは不可能です。
私の意見では、WebGLにはより多くの視点があります。 私はあなたにこれを納得させることを望みます。
WebGLの概要
WebGLはOpenGL APIに基づいており、ある程度の条件付きで、WebGLはJavaScriptのOpenGLバインディングであると言えます。 WebGLは、OpenGL ES 2.0が提供する一連の機能に焦点を当てており、デスクトップとモバイルプラットフォームの両方の幅広い機器で使用できるようになっています。 もちろん、ほとんどの場合、デスクトップコンピューターの機能は、WebGLが提供できる機能を大きく超えています。 しかし、このようなソリューションにより、モバイルプラットフォームである程度の均一性を実現できました。3Dグラフィックスアクセラレータが比較的最近落ち着き、現時点では、機能とパフォーマンスの点で、5〜7歳のデスクトップコンピュータ用の中級クラスのグラフィックスアクセラレータにほぼ対応しています。
OpenGLと同様に、WebGLは比較的低レベルのAPIであり、WebGLを直接使用してプロジェクトを作成するには、3次元グラフィックスの非常に多くの困難な側面を理解する必要があります。 ただし、Direct3D 7 Retained Modeが忘却に陥ったため、MicrosoftはDirect3Dのバージョン8向けの開発を停止したなど、高レベルの3D APIは開発者の間で根を下ろさないことを歴史が示しています。 私の意見では、この理由は3D開発者が直面しているタスクの非常に強い違いにあります。 多くの人々は、リアルタイムで動作する最もリアルなグラフィックスを作成するタスクに直面しており、汎用性やややシンプルさのためにパフォーマンスのかなりの部分を犠牲にしたい人はいません。 低レベルAPIを使用する場合、普遍的ではない（ただしタスクを解決する）機会を得ることがよくありますが、時にはより高速かつ/またはよりシンプルなソリューションになることもあります。 多くの人がドナルドクヌースの有名なフレーズを思い出すことができます：「早すぎる最適化はすべての問題の根源です」が、少なくとも30秒、できれば60フレーム/秒を表示する3次元グラフィックの場合、それは単なる欲望ではなく、必要です。 同時に、魅力的で競争力のあるレベルのアプリケーショングラフィックスを提供する必要があります。
これらの矛盾を考慮すると、WebGL規格の開発者は、WebGLでの作業の複雑さが多数のライブラリによって直接補償されることを期待しています。 したがって、複雑なアプリケーションと初心者を作成する経験豊富な開発者は満足します。彼らは一度に低レベルAPIのすべての詳細に触れることなくプロジェクトを作成でき、1つまたは別のライブラリ/フレームワークを使用します。
WebGLは現在、Windows、Linux、MacOS向けのGoogle ChromeとMozilla Firefox、Android向けのFirefoxでサポートされています。 第12バージョンのOperaは、WebGL実装も導入しました（かなり粗雑ですが）。MacOSのSafariナイトリービルドには、WebGLサポートを有効にする機能があります。 iOSでは、これまでプライベートAPIを使用していましたが、UIWebViewコンポーネントでWebGLをアクティブ化できます（したがって、そのようなアプリケーションはAppStoreに公開できません）。
IEWebGLの概要
この時点で注意深い読者は、WebGLに対するMicrosoftのサポートの問題を回避したことにすでに気付いているでしょう。 残念なことに、この記事の範囲をはるかに超える多くの理由で、マイクロソフトは、WebGLがWebの精神、現代のインターネットが成長したという考え、および既存のWebGL標準には多くのセキュリティ問題があると適切に対応していないと判断しました。 。
これは、十分なWeb開発経験があり、ブラウザーメーカー間でサポートのレベルが大幅に異なるテクノロジでソリューションを構築することがどれほど難しいかを知っている人をがっかりさせることはできません。
私たちのチームは、WebGLでプロジェクトを作成すると同時に、Internet Explorerブラウザーのユーザーを見逃したくない人々に可能なソリューションを提供できることを嬉しく思います。 私たちの開発はIEWebGLです。 これはIEのActiveXプラグインで、6日から10日までのすべてのバージョンのブラウザーで動作し、WebGL APIを実装します。 IEWebGLは完全に無料です。 これを使用して、制限なしでプロジェクトを作成できます。 このプラグインは、Windows XPからWindows 8までのオペレーティングシステム上のInternet Explorerブラウザーの32ビット版と64ビット版の両方で動作します（MetroスタイルIEおよびWindows 8のARMバージョンを除き、次のバージョンではさらに詳しく記事）。
IEWebGLの仕組みについてもう少し説明します。
Windowsに付属のドライバーはDirect3Dハードウェアアクセラレーションのみを提供するため、通常のOpenGLがWindowsで機能するには、ビデオカードの製造元からドライバーをインストールする必要があることをご存知かもしれません。 この点で、GoogleとMozillaは、Direct3Dを介してOpenGL APIをエミュレートするオープンソースライブラリANGLEを開発したため、システム内のOpenGLドライバーの存在に依存しません。 ANGLEレンダラーは、WindowsのChromeとFirefoxでデフォルトで使用されます。 ANGLEには、GLSLシェーダー言語（OpenGL / WebGLで使用）からDirect3Dで使用されるHLSL言語へのトランスレーターも含まれています。 現在、ANGLEライブラリによるOpenGL ES 2.0標準の実装は、ES 2.0.3互換性のすべてのテストに合格しています。
IEWebGLプラグインはANGLEに基づいているため、Google ChromeおよびMozilla Firefoxの実装に匹敵する品質のWebGL標準の高品質の実装を提供します。 さらに、IEの最新バージョンは、プラグインのページおよびグラフィックコンテンツのハードウェアアクセラレーションによる合成に新しいAPIを使用し、グラフィックコンテンツがビデオアダプターの制限を超えず、中央処理装置による処理を必要としないため、高速および低消費電力を保証します。
もちろん、プラグインはブラウザの一部ではないため、主にWebGLコンテキストの取得に関して、非常に小さな違いがいくつかあります。 標準に従って、WebGLコンテキストはcanvas要素の.getContext（“ webgl”）要素を呼び出すことで作成されますが、プラグインはobject要素を使用してページ上に作成されるため、サイト開発者はIEや他のブラウザ用に異なるHTMLコードを生成するか、JavaScriptを使用して動的に作成する必要がありますブラウザーに応じた要素（オブジェクトまたはキャンバス）。 幸いなことに、違いはほとんど終わりました。 IEでは、オブジェクト要素に対して同じ.getContext（“ webgl”）呼び出しを使用し、WebGL APIに完全に従ってコンテキストを操作します。
組み込みのWebGLサポートを備えたブラウザーのコード：
<！doctype html>
<html>
<head>
<script type = "text / javascript">
関数initWebGL（）{
var glCanvas = document.getElementById（ "renderArea"）;
var glCtx = glCanvas.getContext（ "experimental-webgl"）;
if（glCtx）アラート（「WebGLコンテキストを取得」）;
}
</ script>
</ head>
<body onload = "initWebGL（）">
<canvas id = "renderArea"> </ canvas>
</ body>
</ html>
Internet Explorerブラウザーのコード：
<！doctype html>
<html>
<head>
<script type = "text / javascript">
関数initWebGL（）{
var glCanvas = document.getElementById（ "renderArea"）;
var glCtx = glCanvas.getContext（ "experimental-webgl"）;
if（glCtx）アラート（「WebGLコンテキストを取得」）;
}
</ script>
</ head>
<body onload = "initWebGL（）">
<object id = "renderArea" type = "application / x-webgl">
</ object>
</ body>
</ html>
IEWebGLは、バージョン9までのIEのTypedArray標準の完全なサポートも実装しています。 IE10では、IEWebGLはブラウザーに組み込まれたTypedArray実装を使用します。 したがって、サイトが3Dグラフィックスで動作しない場合でも、IEWebGLを使用して、標準APIを使用してIEバージョン9以下のバイナリデータで動作する機能を追加できます。
要約すると、今日、Web上で3Dを表示するためのテクノロジーを選択する場合、ほとんどのブラウザーで確実に機能する古いアプローチの真の代替手段としてWebGLを検討する価値があります。
IEWebGLウェブサイト： iewebgl.com
次の記事では、3次元視覚化にWebGLを使用するJavaScriptエンジンについて直接説明します。