(57)【要約】      （修正有）【課題】プラグインに依存せずスマートフォンのブラウザや主流PCブラウザに対応する3Dコンテンツを作る。【解決手段】HTML5Canvasの2DAPIを利用し、3Dオブジェクトの三次元座標をスクリーン上で表示できるニ次元座標に変化することにより、平面上で三次元物体を描画することを実現する。また線形代数による三次元空間での3Dオブジェクトの移動、変形を計算し、3Dオブジェクトは三次元空間での変形、移動、回転を実現する。画像を三角形パーツに分割し、変形し、3Dオブジェクトの表面に貼り付けることによりテクスチャマッピングを実現する。HTML5Canvas 2D API仕様のみでモデリング、テクスチャマッピング機能を持つ3Dエンジンを実装し、この3Dエンジンを利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3Dコンテンツを作ることができる。【選択図】図１１
2013041500.tif 000002
【特許請求の範囲】
【請求項１】
HTML5 Canvas 2D 仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する3D
エンジン。
【請求項２】
本3D エンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含める３Ｄコンテンツ。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、各主流ブラウザやスマートフォン上でプラグインを利用せずに閲覧できる3Dコンテンツを生成する3Dエンジンに関するものである。
【背景技術】
【０００２】
AdobeのFlashやMicrosoftのSliverlightを代表とするRIA(Rich Internet Application)のプラグインの技術の普及により、近年Google Street View
やBing Map
などのプラグインに基づくパノラマビューが実現されて、ウェブページ上で全方位画像を立体的に表示できるようになっている。 ブラウザやプラットフォームにより、対応するプラグインが異なる。 例えば、iPhone、iPad はFlash Player やSliverlight に対応していなく、ブラウザ上でGoogle Street Viewを利用することができない。iPhone、iPadの仕様に合わせて独自のバージョンを作らないといけなく、開発コストは高くなる。従来ウェブブラウザ上でパノラマビュー（球体）のような三次元コンテンツを表示する場合はいくつの主流の技術がある。しかし、どれでも以上の問題を解決することができない。
【０００３】
一つ目はAdobe Flash。Adobe Flashはウェブ向きの動画を表示、作成することを目的とする技術として作られた。Flash機能向上により、3Dコンテンツやパノラマニューを表示できるようになった。しかし、Adobe Flash
Player というプラグインに依存するので、iPhone、iPad などの端末には対応しない。iPhone、iPadのブラウザ上でGoogle Street ViewのようなAdobe Flash技術で作られたコンテンツを閲覧することができない。
【０００４】
Java3DとはJava技術をベースとする三次元グラフィックス拡張APIである。ウェブページ上ではJava Applet、OpenGLやDirectXなどの3Dグラフィックス用のAPIを呼び出す事によって3D 動画を再生する3D動画技術として開発されたが、ウェブ上で3D
コンテンツを表示する速度はマシンスペックに対しての依存が大きい。コンテンツの表示はJava
Appletというプラグインに依存し、Java  Appletの入っていない端末ではJava3Dにより作られたコンテンツを表示することができない。
【０００５】
WebGLはOpenGL
2.0 をサポートするプラットフォーム上で、ウェブブラウザで3 次元コンピュータグラフィックスを表示させるための技術である。しかし、マシンのOpenGL
2.0をサポートするグラフィックカードに依存する。 そして実行速度などの問題で、対応しているブラウザがや対応している端末が少ない。iPhoneに代表されるスマートフォン上での利用もできない。
【０００６】
かかる問題に鑑み、本発明者は、あらゆるブラウザ、プラットフォームに対応できる3Dエンジンを開発した。
【先行技術文献】
【特許文献】
【０００７】
【特許文献１】特許公表2000−500598
【非特許文献】
【０００８】
【非特許文献１】「Sandy3D CS3 tutorials」,http://www.flashsandy.org/, http://www.flashsandy.org/tutorials/3.0
【非特許文献２】「Papervision3D」 papervision3d.org,http://code.google.com/p/papervision3d/
【発明の概要】
【発明が解決しようとする課題】
【０００９】
Adobe のFlash
やMicrosoft
のSliverlight
を代表とするRIA(Rich
Internet Application)のプラグインの技術の普及により、近年Google
Street View やBing
Map などのプラグインに基づくパノラマビューが実現されて、ウェブページ上で全方位画像を立体的に表示できるようになっている。 しかし、ブラウザやプラットフォームにより、対応されるプラグインが異なる。 例えば、iPhone、iPad はFlash Player やSliverlight に対応していなく、ブラウザ上でGoogle Street View利用することができない。iPhone、iPadの仕様に合わせて独自のバージョンを作らないといけなく、開発コストは高くなる。 かかる問題に鑑み、本発明者らは、以上のような問題を解決するために、あらゆるブラウザ、プラットフォームに対応できる方法やシステム及びプログラムを開発した。本発明ではプラグインやマシンスペックに依存しないあらゆるブラウザや端末から利用できる3D
エンジンを作ることは本発明の課題である。
【課題を解決するための手段】
【００１０】
本発明の３Ｄエンジンは、HTML5 Canvas 2D 仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する。また、本発明の３Ｄコンテンツは、前記3D エンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含めることがきできる。
【００１１】
本発明ではプラグインやマシンスペックに依存しないHTML5
Canvas 2D API を利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3D
コンテンツを作ることができる3Dエンジンを作った。
【００１２】
プラグインやマシンスペックに依存しない用件を満たすために、本発明はHTML5
Canvas 2D を利用した。
【００１３】
HTML5 Canvas ではJavascript で利用可能な2D 描画API が実装され、Javascript で2D API を使うことにより、Flash Player のようにブラウザ上であらゆる2D 図形を描画することができ、画像を描画、変形、移動、色の調整などの二次元描画機能が実装されている。
【００１４】
手順としてまず３Ｄモデリングを実現する。本発明ではHTML5
Canvas の2D
API を利用し、3D
オブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体を描画することを実現する。 平面のスクリーンの上で3D オブジェクトを表現する場合は、まず3D
オブジェクトの三次元頂点座標を指定する。例えば立方体や球体などの簡単なオブジェクトであれば三次元座標は簡単にわかるが、構造が複雑なオブジェクトの場合は、専用の3D
モデリングソフトを使い、3Dオブジェクトの各頂点座標を得る必要である。3D
オブジェクトを平面のスクリーンの上で描画するために、3D
オブジェクトの三次元座標を平面上で描画する二次元座標に変換する。 スクリーンの”後ろ”にあるような三次元座標は相似な三角の性質を利用し、スクリーン上にある変換後の二次元座標は数式1によって求めることができる。この計算式は”遠いものが小さいく見える、近いものは大きく見える”のことを表している。3D
オブジェクトの頂点が決まれば、ワイヤーフレームつきの3D
モデルが作ることができる。
【数１】
2013041500.tif 000003
【００１５】
3D モデリングの次は3D
オブジェクトが三次元空間での変形、回転、移動の部分に入る。3D
オブジェクトは複数の頂点で構成されるものなので、3D
オブジェクトの形や位置の変化は基本頂点座標の変化に基づく。 線形代数によると、三次元空間での点の移動はこの点の三次元座標(x、y、z) とある特定の行列の積により行うので、回転、移動、変形、この三つの処理を満たせるために、ここではこの特定の行列を四次元行列として定義する。
【００１６】
3D オブジェクトの回転ある点A の座標は(x、y、z) とすると、X 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ ) は数式２によって求める。
【数２】
2013041500.tif 000004
【００１７】
Y 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ )は数式2で求める。
【数３】
2013041500.tif 000005
【００１８】
Z 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ ) は数式4で求める。
【数４】
2013041500.tif 000006
【００１９】
3D オブジェクトの変形の場合は数式5で求めることができる。Sx、Sy、Sy はそれぞれscaleX、scaleY、scaleZ を意味する。
【数５】
2013041500.tif 000007
【００２０】
3D オブジェクトの移動(Tx、Ty、Tz) はそれぞれx 軸、y 軸、z 軸での移動量を示す。
【数６】
2013041500.tif 000008
【００２１】
次はテクスチャマッピングの部分に入る。3D
オブジェクト作成後にテクスチャマッピングを行う。 テクスチャマッピングは物体の表面の質感を表現するために画像をオブジェクトに貼ることを意味するので、平面の画像は三次元物体の形状に合わせて貼られる必要がある。 このような効果を実現するために、大きい画像を小さいパーツに分割してから、それぞれ変形効果をかけて、指定される座標に置く。
【００２２】
オブジェクト変形あるいは移動する場合はオブジェクトに貼られているテクスチャもオブジェクトの頂点座標に変化に合わせて変形する。HTML5
Canvas 2D 仕様における画像の変形はcontext.
transform(m11、m12、m21、m22、dx、dy) 関数より行う。HTML5 Canvas では画像に数式7の変形行列にかけると、画像は頂点の変化に合わせて、変形することができ、分割する三角形の画像の枚数が多ければ、十分に細かくなり、画像が3D
オブジェクトに貼られているように見える。 これによりテクスチャマッピングを実現する。
【数７】
2013041500.tif 000009
【発明の効果】
【００２３】
本発明はHTML5
Canvas 2D 仕様のみであらゆるブラウザや端末に対応する3D
エンジンであるため、本3D
エンジンを利用し、各主流ブラウザやスマートフォンを代表とするiPhone、Android に対応するパノラマビューを含める３Ｄコンテンツを作成することができる。
【００２４】
Google Street Viewのようなブラウザ上で全方位画像を表示するパノラマビューの場合はAdobe
Flash Playerに依存し、iPhone、iPadのようなAdobe Flash Playerのプラグインの入っていない端末ではGoogle
Street Viewのようなパノラマビューをブラウザ上で利用することができない。本発明の場合は、プラグインに利用せず、本発明により作られた全方位画像を表示するパノラマビューはiPhone、iPadを含め、あらゆる主流スマートフォン、ＰＣブラウザ上で利用することが可能となる。
【００２５】
またWebGL の場合はプラグインに依存しないが、マシンのOpenGL
2.0をサポートするグラフィックカードに依存する。
OpenGL 2.0をサポートするグラフィックカードの入っていない端末では利用できない。本発明の場合は、OpenGL
2.0をサポートするグラフィックカードに依存しなく、スマートフォンを含めるスペックの低いマシンでの利用も可能となる。
【図面の簡単な説明】
【００２６】
【図１】図１は本発明を利用しブラウザ上で三次元のワイヤーフレーム付きの球体を描画した写真である。（実施例１）
【図２】図2は本発明を利用しブラウザ上で三次元のワイヤーフレーム付きの球体にテクスチャマッピングをする様子の図である。（実施例1)
【図３】図3は球体のテクスチャマッピング完了した後の写真である。（実施例１）
【図４】図4は本発明を利用し、パノラマビューを作成するために、球体への全方位写真画像の貼り方を示す図である。（実施例2)
【図５】図5は本発明を利用し、パノラマビューを作成するために、球体の半分だけ描画することを示す図である。（実施例2)
【図６】図6は本発明を利用し、パノラマビューを作成するために、描画した半分の球体をズームインする写真である。（実施例2)
【図７】図7はパノラマビューの球体を回すことにより、各角度パノラマビューを示す写真である。（実施例2)
【図８】図8は本発明を使い、本発明で構築したパノラマビュー上にアイコンを載せる写真である。（実施例2)
【図９】図9は本発明で、構築したパノラマビューに方向矢印を載せる時の写真である。（実施例2)
【図１０】図11は本発明により構築されたパノラマビューは各主流ＰＣブラウザ上で利用可能ということを示す写真である。（実施例2)
【図１１】図11は本発明により構築されたパノラマビューはiPhone、Androidに代表されるスマートフォンのブラウザ上で利用可能ということを示す写真である。（実施例2)
【発明を実施するための形態】
【００２７】
HTML5 Canvas 2D API １を利用し、3D オブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体の3Dモデリング ２を実現する。 また線形代数による三次元空間での3D
オブジェクトの移動、変形を計算し、3D
オブジェクトは三次元空間での変形、移動、回転を実現する。 画像を三角形パーツに分割し、変形し、3D
オブジェクトの表面に貼り付けることによりテクスチャマッピング ３ を実現する。Canvas 2D API 仕様のみでモデリング、テクスチャマッピング機能を持つ3D
エンジンを実装し、この3D
エンジンを利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3D
コンテンツを作る。
【実施例】
【００２８】
本発明を利用し、ブラウザ上で閲覧できるテクスチャ付きの自由回転できる球体を実装した。球体の各頂点の決め方は地球儀の緯線、経線のように、プログラムの中で二重ループを使い、各頂点の三次元座標を計算し出す。 そして、二次座標に変換し、直線で頂点を結びつけることにより、図1 のようにワイヤーフレームつきの球体を作り出すことができる。次に、図2 が示すように球体の”緯線”、”経線”の本数にあわせて、球体に貼る画像を三角形パーツ分割し、各三角形画像の頂点座標(U、V) と3D オブジェクトのスクリーン上の二次元座標(x、y) を使い、数式1の変形行列を作り出すことができ、画像を変する。図3 のように変形した画像は球体の指定場所に貼ることができる。
【００２９】
全天球パノラマビューの実装、本発明によりブラウザ上で閲覧できる球体を作成し、図4 のように本件研究では全方位写真画像を左右反転で球体の表面に貼り、ビューポイントを球体の内部の中央に設定することにより、ユーザは球体の内部から見るとき、左右反転で球体の表面に貼られた画像は正しく見える。図5のように 、ビューポイントの後ろにあるものを描画する必要がないため、球体の前方半分だけを描画する。図6 のように球の外側を見せないように、矩形のビューポートに沿ってズームインする。それから、球を回すことにより、パノラマビューの視野角は調整できる(図7)。アイコン、矢印の画像にパノラマビュー上の三次元座標を与え、図8、図9のようにパノラマビューに載せることができる。PC
での各主流ブラウザ(Intenet
Explorer 9.0。7916.6000、Firefox 3.6、Chrome 9.0、safari 5.01、Opera 10.61) で動作する状況を図10 に示す。 HTML5 Canvas をサポートするブラウザでの本3D エンジンの動作が確認できた。またモバイル端末においても動作を確認している。図11はiPhone のモバイルSafariとAndroid の標準ブラウザでの動作を示す((iPhone 4 (iOS 4.1)、HTC desire(Android 2.2)）。
【産業上の利用可能性】
【００３０】
Google Street Viewを代表とするブラウザ上で閲覧できるパノラマビューはFlash
Playerを体表とするプラグインに依存するため、iPhone、iPad上ブラウザで閲覧することができない。iPhone、iPadの特殊仕様に合わせてローカルで動作するアプリケーションの形で独自のパノラマビューを作らないといけないため、人力などのコストが上がある。本発明に利用することにより、簡単にプラグインに依存せずiPhoneを含め、各主流スマートフォン、主流PCブラウザ上で使用できるパノラマビューを作成することができる、従来の方法より多くの端末に対応でき、コストも下がることできる。
【符号の説明】
【００３１】
１   HTML5
Canvas 2D API
２   3Dモデリング
３ 
テクスチャマッピング
【図１】
2013041500.tif 000010
【図２】
2013041500.tif 000011
【図３】
2013041500.tif 000012
【図４】
2013041500.tif 000013
【図５】
2013041500.tif 000014
【図６】
2013041500.tif 000015
【図７】
2013041500.tif 000016
【図８】
2013041500.tif 000017
【図９】
2013041500.tif 000018
【図１０】
2013041500.tif 000019
【図１１】
2013041500.tif 000020