TypeScriptとThreeJSで遊ぶ(WebGLのフォールバックを考える) #TypeScript

この記事はTypeScript Advent Calendarの16日目の記事です。

この記事では、WebGLの普及率と、 CSS3DRenderer について書きます。
ほとんどTypeScript関係なく、しかも「Naverまとめ」みたいになってしまいました。

Three.js のレンダラについて

three.jsで3DプログラミングというとWebGL必須な印象がありますが、three.js は他の種類のレンダリング方法にも対応しています。
本体の three.min.js に同梱されているのはWebGLRendererのみですが、リポジトリのexample ディレクトリを見てみると、example/js/renderer 内にいろいろな種類のレンダラが格納されています。
このうち、特に使用頻度が高いのは CSS3DRenderer、CanvasRenderer の2種類だと思います。

CanvasRenderer と CSS3DRenderer の特徴

CanvasRenderer はシェーダ関連の機能を除き WebGLRendererと互換性があります（つまり、WebGLRenderer用のコードはそのままCanvasRendererでも動作します）が、実際には明らかにパフォーマンスが悪く、3Dモデルデータなどは到底表示できません。
ですので、作成するコンテンツは単純なプリミティブ(新鮮でフレッシュ、みたいですが...)の組み合わせにする必要があります。
CSS3Drenderer はWebGLRendererとは根本的に仕組みが異なっており、通常three.js で使用するGeometry や Mesh などのクラスは使用できません。
CSS3DObject、CSS3DSprite(CSS3DSpriteはカメラに対して常に正面を向くという以外、この二つは同じです)のみを使用してコンテンツを作成します。
CSS3DObject は任意のDOM要素をthree.jsから扱うためにラップすることができ、実際の描画は、CSS3 のtransform 3Dを使用して行われます。

各ブラウザのWebGL対応状況

現在、WebGLはどれほどのブラウザでサポートされているのでしょうか？
Can I Use ではこちらのような結果になっています。

Firefox、Chromeは比較的以前から対応しています。
Safariも対応していることになっていますが、ユーザーが自分で設定変更をしないとWebGLを表示することはできず、デフォルトで有効になったのはYosemite からです。
IEは11から（リリースは2013年10月）。
iOSは8（リリースは2014年9月）。
Android ブラウザは「37」となっていますが、これはAndroidOS 5 (リリースは2014年11月) において、標準ブラウザがChromeベースになったことによるものです。それ以前の標準ブラウザでは、端末メーカーごとに対応状況が異なり混沌としています。

対応する可能性が低かったiOSでも有効化され、WebGLは将来普通に使用できるようになることが確定しました。
しかし、現状ではまだ、フォールバックを考慮しないWebGLのみのコンテンツは、PCで3～4割(2年ほど前のHTML5 Canvasと似てますね)、スマートフォンだと大半のユーザーが閲覧できないことになります。
そこで、上記のCanvasRenderer、CSS3DRenderer をフォールバックとして使用する必要性があります。
WebGLを使用する際、主に問題となるブラウザについて、各レンダラの対応状況は以下のようになっています。

IE8	IE9	IE10	IE11
非対応	CanvasRenderer	CanvasRenderer	WebGLRenderer

iOS

iOS6	iOS7	iOS8
CanvasRenderer/CSS3DRenderer	CanvasRenderer/CSS3DRenderer	WebGLRenderer

Android(標準ブラウザ)

< Android4	Android4.x	Android5
非対応(※CanvasRenderer)	CanvasRenderer/CSS3DRenderer または WebGLRenderer (端末により異なる)	WebGLRenderer

※遅すぎて実用的ではありません。

大まかに言うと、PCではCanvasRenderer (特別な理由がなければ、そもそもWebGLではなくFlashを使用したほうがよいのですが)、スマートフォンではCSS3DRenderer がフォールバック先として有効、ということになります。
というより、現状ではスマートフォンのブラウザ向けに3Dコンテンツを作成する場合、むしろWebGLRenderer よりも CSS3DRenderer のほうが第一候補のような気がします。

※2014/12/19 追記
スマートフォン向けのWebGLにチャレンジしているサイトも既にあるようです。
一流クリエイティブエージェンシーAKQA のWebGLデモサイトです。
http://webgl.souhonzan.org/entry/?v=0090

サンプル

それでは、CSS3DRenderer ではどんなことができるのか？というところですが、既に色々とサンプルが存在しています。

まとめ

WebGLで3Dコンテンツを作成するのは将来必ず可能にはなりましたが、現状のブラウザ対応状況を考えると色々と悩ましいところです。
CSS3DRenderer は通常のWebGLRenderer とは作り方が異なるが、DOMをそのまま表示できるので、また違った種類の表現が可能です。
TypeScript のthree.js 型定義ファイルでも、CSS3DRendererは使用できます。