泰延WebGLThreemacOSのようなカバーフローのデモをHTML5とWebGLを使って作ってみました。TypeScriptの両方のバージョンでデモを用意しています(どちらもコードはTypeScriptで記述して、JavaScriptに変換しています)。1.0)以下では2つのJSライブラリの違いを紹介します。プログラミング」で詳しく説明しているので、コードのロジックを知りたい方はこの書籍を参考くださいませ。(Flash)で説明していますが、JavaScriptのロジックとほとんど同じなので、WebGL+JavaScriptの方にも役立つかと思います。3D空間の配置方法などを図解にて説明しています。リフレクション編ここからは技術的に深い話になります。3D表現の機能としてはAway3DとThree.jsのどちらのJSライブラリもそれほど大差ないと思うのですが、Away3Dの利点としてFlash互換のAPIが充実しています(前回の記事「HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ」を参考に)。Away3DのBitmapDataクラスを利用し、次のような処理で床への反射のグラデーションを実現しました。BitmapDataChannel.ALPHA);3Dにおいては結果的には次のようにAway3DとThree.jsでの見栄えに違いがでています。Three.jsで床への反射のグラデーションを実装していないのは、それを実現する容易な方法がなかったためです。CanvasRenderingContext2Dを使って画像加工するか、シェーダーを書けばできるのですが、デモのコード量が増えてしまうのとコードの難易度が高まってしまうので、ブログ記事として実装は見送りました。クラスとして用意されています。それぞれのコードの使い方は下記に示します。Away3Dでは事前に読み込みを完了させておく必要がありますが、Three.jsでは非同期で読み込み完了後に自動的にテクスチャが転送される作りになっています。ほうが手間がいらないので便利だと思いました。作り方だとバラバラと読み込まれてしまい、読み込み順番制御や負荷分散制御に向かないので、コンテンツを作りこむ場合はどちらのJSライブラリでも自作プリローダーを作る必要があると思います。最後にWebGLといえばThree.jsばかりJSライブラリとして扱われますが、他の3Dライブラリと比較してみるとメリット/デメリットが見えてきます。(Alternativa3DというAS3ライブラリ)を使って実装したこともあるので、Flash版のデモも紹介しておきます。Flash版だとIE6をはじめ幅広いブラウザで安定して動作しますし、アンチエイリアス周りが綺麗なので、まだまだFlashの技術は素敵だなぁと思いました。TypeScriptのデモを作成して紹介していこうと思います。Facebook公式ページをフォローするなどして、当サイトの更新をチェックくださいませ。平成27年11月17日に内容をメンテナンスしています。