HTML5Canvas2D仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する3Dエンジン。本3Dエンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含める3Dコンテンツ。AdobeのFlashやMicrosoftのSliverlightを代表とするRIAのプラグインの技術の普及により、近年GoogleStreetViewやBingMapなどのプラグインに基づくパノラマビューが実現されて、ウェブページ上で全方位画像を立体的に表示できるようになっている。しかし、ブラウザやプラットフォームにより、対応されるプラグインが異なる。例えば、iPhone、iPadはFlashPlayerやSliverlightに対応していなく、ブラウザ上でGoogleStreetView利用することができない。iPhone、iPadの仕様に合わせて独自のバージョンを作らないといけなく、開発コストは高くなる。かかる問題に鑑み、本発明者らは、以上のような問題を解決するために、あらゆるブラウザ、プラットフォームに対応できる方法やシステム及びプログラムを開発した。本発明ではプラグインやマシンスペックに依存しないあらゆるブラウザや端末から利用できる3Dエンジンを作ることは本発明の課題である。本発明の3Dエンジンは、HTML5Canvas2D仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する。また、本発明の3Dコンテンツは、前記3Dエンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含めることがきできる。本発明ではプラグインやマシンスペックに依存しないHTML5Canvas2DAPIを利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3Dコンテンツを作ることができる3Dエンジンを作った。プラグインやマシンスペックに依存しない用件を満たすために、本発明はHTML5Canvas2Dを利用した。HTML5CanvasではJavascriptで利用可能な2D描画APIが実装され、Javascriptで2DAPIを使うことにより、FlashPlayerのようにブラウザ上であらゆる2D図形を描画することができ、画像を描画、変形、移動、色の調整などの二次元描画機能が実装されている。手順としてまず3Dモデリングを実現する。本発明ではHTML5Canvasの2DAPIを利用し、3Dオブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体を描画することを実現する。平面のスクリーンの上で3Dオブジェクトを表現する場合は、まず3Dオブジェクトの三次元頂点座標を指定する。例えば立方体や球体などの簡単なオブジェクトであれば三次元座標は簡単にわかるが、構造が複雑なオブジェクトの場合は、専用の3Dモデリングソフトを使い、3Dオブジェクトの各頂点座標を得る必要である。3Dオブジェクトを平面のスクリーンの上で描画するために、3Dオブジェクトの三次元座標を平面上で描画する二次元座標に変換する。スクリーンの後ろにあるような三次元座標は相似な三角の性質を利用し、スクリーン上にある変換後の二次元座標は数式1によって求めることができる。この計算式は遠いものが小さいく見える、近いものは大きく見えるのことを表している。3Dオブジェクトの頂点が決まれば、ワイヤーフレームつきの3Dモデルが作ることができる。3Dモデリングの次は3Dオブジェクトが三次元空間での変形、回転、移動の部分に入る。3Dオブジェクトは複数の頂点で構成されるものなので、3Dオブジェクトの形や位置の変化は基本頂点座標の変化に基づく。線形代数によると、三次元空間での点の移動はこの点の三次元座標とある特定の行列の積により行うので、回転、移動、変形、この三つの処理を満たせるために、ここではこの特定の行列を四次元行列として定義する。3Dオブジェクトの回転ある点Aの座標はとすると、X軸でR度回転する場合、変換後の座標は数式2によって求める。Y軸でR度回転する場合、変換後の座標は数式2で求める。Z軸でR度回転する場合、変換後の座標は数式4で求める。3Dオブジェクトの変形の場合は数式5で求めることができる。Sx、Sy、SyはそれぞれscaleX、scaleY、scaleZを意味する。3Dオブジェクトの移動はそれぞれx軸、y軸、z軸での移動量を示す。次はテクスチャマッピングの部分に入る。3Dオブジェクト作成後にテクスチャマッピングを行う。テクスチャマッピングは物体の表面の質感を表現するために画像をオブジェクトに貼ることを意味するので、平面の画像は三次元物体の形状に合わせて貼られる必要がある。このような効果を実現するために、大きい画像を小さいパーツに分割してから、それぞれ変形効果をかけて、指定される座標に置く。オブジェクト変形あるいは移動する場合はオブジェクトに貼られているテクスチャもオブジェクトの頂点座標に変化に合わせて変形する。HTML5Canvas2D仕様における画像の変形はcontexttransform関数より行う。HTML5Canvasでは画像に数式7の変形行列にかけると、画像は頂点の変化に合わせて、変形することができ、分割する三角形の画像の枚数が多ければ、十分に細かくなり、画像が3Dオブジェクトに貼られているように見える。これによりテクスチャマッピングを実現する。本発明はHTML5Canvas2D仕様のみであらゆるブラウザや端末に対応する3Dエンジンであるため、本3Dエンジンを利用し、各主流ブラウザやスマートフォンを代表とするiPhone、Androidに対応するパノラマビューを含める3Dコンテンツを作成することができる。GoogleStreetViewのようなブラウザ上で全方位画像を表示するパノラマビューの場合はAdobeFlashPlayerに依存し、iPhone、iPadのようなAdobeFlashPlayerのプラグインの入っていない端末ではGoogleStreetViewのようなパノラマビューをブラウザ上で利用することができない。本発明の場合は、プラグインに利用せず、本発明により作られた全方位画像を表示するパノラマビューはiPhone、iPadを含め、あらゆる主流スマートフォン、PCブラウザ上で利用することが可能となる。またWebGLの場合はプラグインに依存しないが、マシンのOpenGL20をサポートするグラフィックカードに依存する。OpenGL20をサポートするグラフィックカードの入っていない端末では利用できない。本発明の場合は、OpenGL20をサポートするグラフィックカードに依存しなく、スマートフォンを含めるスペックの低いマシンでの利用も可能となる。HTML5Canvas2DAPI1を利用し、3Dオブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体の3Dモデリング2を実現する。また線形代数による三次元空間での3Dオブジェクトの移動、変形を計算し、3Dオブジェクトは三次元空間での変形、移動、回転を実現する。画像を三角形パーツに分割し、変形し、3Dオブジェクトの表面に貼り付けることによりテクスチャマッピング3を実現する。Canvas2DAPI仕様のみでモデリング、テクスチャマッピング機能を持つ3Dエンジンを実装し、この3Dエンジンを利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3Dコンテンツを作る。本発明を利用し、ブラウザ上で閲覧できるテクスチャ付きの自由回転できる球体を実装した。球体の各頂点の決め方は地球儀の緯線、経線のように、プログラムの中で二重ループを使い、各頂点の三次元座標を計算し出す。そして、二次座標に変換し、直線で頂点を結びつけることにより、図1のようにワイヤーフレームつきの球体を作り出すことができる。次に、図2が示すように球体の緯線、経線の本数にあわせて、球体に貼る画像を三角形パーツ分割し、各三角形画像の頂点座標と3Dオブジェクトのスクリーン上の二次元座標を使い、数式1の変形行列を作り出すことができ、画像を変する。図3のように変形した画像は球体の指定場所に貼ることができる。全天球パノラマビューの実装、本発明によりブラウザ上で閲覧できる球体を作成し、図4のように本件研究では全方位写真画像を左右反転で球体の表面に貼り、ビューポイントを球体の内部の中央に設定することにより、ユーザは球体の内部から見るとき、左右反転で球体の表面に貼られた画像は正しく見える。図5のように、ビューポイントの後ろにあるものを描画する必要がないため、球体の前方半分だけを描画する。図6のように球の外側を見せないように、矩形のビューポートに沿ってズームインする。それから、球を回すことにより、パノラマビューの視野角は調整できる。アイコン、矢印の画像にパノラマビュー上の三次元座標を与え、図8、図9のようにパノラマビューに載せることができる。PCでの各主流ブラウザで動作する状況を図10に示す。HTML5Canvasをサポートするブラウザでの本3Dエンジンの動作が確認できた。またモバイル端末においても動作を確認している。図11はiPhoneのモバイルSafariとAndroidの標準ブラウザでの動作を示す、HTCdesire。