Away3Dでつくる3DのHTML5コンテンツ [Edit]
投稿者：野中 文雄 | 投稿日：2014.07.29 | [Away3D][HTML5]Away3D はオープンソースのリアルタイム3Dエンジンです。もとはFlashプラットフォーム向けに開発されました。そのAway3Dエンジンが、「 Away3D TypeScript 」としてJavaScriptライブラリへの移植が進んでおり、現在アルファリリースが公開されています。いよいよHTML5とJavaScriptを使って、本格的に3次元表現ができるようになるのです。そのAway3Dを学ぶための入門的な解説を、リンクでご紹介します。
01 HTML5とJavaScriptではじめる3D表現
2014年7月25日金曜日に催されたAway3D勉強会では、Away3Dを使ってどのようにJavaScriptのコーディングを行うのか。さらに、実際に3次元表現を用いたブラウザコンテンツやその可能性について解説しました。
01-01 Away3D TypeScriptで立方体を回してみる
Away3D TypeScriptで、具体的にどのようなコーディングをするのか。3次元空間に立方体を描き、それを回してみるサンプルでご紹介しました。最新の2014年6月24日付ビルドにもとづく解説です。
[Vol. 1]
Broadcast live streaming video on Ustream
[Vol. 2]
Broadcast live streaming video on Ustream
[Vol. 3]
Broadcast live streaming video on Ustream
01-02 WebGLを活用したブラウザにおける3D表現
IE11をはじめ各種PCブラウザでWebGLが対応したことで、商用案件でもWebGLが利用できる土台が整ってきました。3DライブラリのAway3Dを利用すると、表現の幅が広く品質の高い3Dコンテンツの制作が可能です。Away3Dを利用したブラウザコンテンツの3D表現の可能性やワークフローを説明しました。また類似のThree.jsと比較してのAway3Dの利点も紹介しています。
[Vol. 1]
Broadcast live streaming video on Ustream
[Vol. 2]
Broadcast live streaming video on Ustream
[Vol. 3]
Broadcast live streaming video on Ustream
02 立方体を回してみる
Away3D TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回します。Away3Dの3次元表現で用意しなければならないのは3つです。第1に、舞台となる3次元空間をつくります。第2に、その舞台に照明を備えます。そして第3に、役者となる物体を舞台に登場させます。そのうえで、カメラの位置や向きをドラッグで動かしてみます。
サンプル001■Away3D 14/06/24: Panning and tilting the camera in the 3D space
03 パーティクルのアニメーション
Away3D TypeScriptサイトの「Examples」に掲げられた「Animating particles simulating fire」を参考にして、パーティクルのアニメーションで燃える炎を表現します。サンプルスクリプトは、この作例のソースコードをわかりやすく簡略化し、整理してまとめたものです。また、スクリプトの組立ては前出「Away3D: 立方体を回してみる」のJavaScriptコードと基本的に揃えてあります。
サンプル002■Away3D 14/06/24: Animating particle fires shot by the interactive camera
04 テクスチャの凹凸と反射 ー 法線マップとスペキュラマップ
前項の燃える炎のサンプルの床にテクスチャを与えます。均一な平面のテクスチャに凹凸と反射の違いを加えると、質感が大きく変わります。もっとも、3次元のオブジェクトのかたちそのものに細かな凹凸を加えたら、負荷が上がるばかりです。そこで、テクスチャに与えるマップで、光の反射の仕方を変えてみます。
サンプル003■Away3D 14/06/24: Animating particle fires on a floor with texture finished
