JP2013041500A - 3d engine operating with only html5 2d-drawing specification - Google Patents

3d engine operating with only html5 2d-drawing specification Download PDF

Info

Publication number
JP2013041500A
JP2013041500A JP2011178991A JP2011178991A JP2013041500A JP 2013041500 A JP2013041500 A JP 2013041500A JP 2011178991 A JP2011178991 A JP 2011178991A JP 2011178991 A JP2011178991 A JP 2011178991A JP 2013041500 A JP2013041500 A JP 2013041500A
Authority
JP
Japan
Prior art keywords
plug
browser
coordinates
sphere
dimensional
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Withdrawn
Application number
JP2011178991A
Other languages
Japanese (ja)
Inventor
Wing Keung Cheung
永強 張
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to JP2011178991A priority Critical patent/JP2013041500A/en
Publication of JP2013041500A publication Critical patent/JP2013041500A/en
Withdrawn legal-status Critical Current

Links

Landscapes

  • Processing Or Creating Images (AREA)
  • Image Generation (AREA)

Abstract

PROBLEM TO BE SOLVED: To create a 3D content which does not depend upon any plug-in and is adaptive to a browser of a smart phone and main PC browsers.SOLUTION: A three-dimensional body is drawn on a plane by changing three-dimensional coordinates of a 3D object into two-dimensional coordinates which can be displayed on a screen by utilizing a 2D API of HTML5 Canvas. Further, the 3D object can be deformed, moved, and rotated in a three-dimensional space by linear algebra by calculating movement and deformation of the 3D object in the three-dimensional space. Texture mapping is actualized by dividing an image into triangular parts and deforming and pasting the triangular parts on a surface of the 3D object. A 3D engine which has a modeling function and a texture mapping function only with HTML5 Canvas 2D API specifications is mounted and used to create the 3D content that many browsers and terminals are adaptive without depending upon any plug-in.

Description

本発明は、各主流ブラウザやスマートフォン上でプラグインを利用せずに閲覧できる3Dコンテンツを生成する3Dエンジンに関するものである。 The present invention relates to a 3D engine that generates 3D content that can be viewed on each mainstream browser or smartphone without using a plug-in.

AdobeのFlashやMicrosoftのSliverlightを代表とするRIA(Rich Internet Application)のプラグインの技術の普及により、近年Google Street View
やBing Map
などのプラグインに基づくパノラマビューが実現されて、ウェブページ上で全方位画像を立体的に表示できるようになっている。 ブラウザやプラットフォームにより、対応するプラグインが異なる。 例えば、iPhone、iPad はFlash Player やSliverlight に対応していなく、ブラウザ上でGoogle Street Viewを利用することができない。iPhone、iPadの仕様に合わせて独自のバージョンを作らないといけなく、開発コストは高くなる。従来ウェブブラウザ上でパノラマビュー（球体）のような三次元コンテンツを表示する場合はいくつの主流の技術がある。しかし、どれでも以上の問題を解決することができない。 Due to the spread of RIA (Rich Internet Application) plug-in technology represented by Adobe's Flash and Microsoft's Sliverlight, in recent years Google Street View
And Bing Map
A panoramic view based on such plug-ins is realized, and an omnidirectional image can be displayed stereoscopically on a web page. The corresponding plug-ins differ depending on the browser and platform. For example, the iPhone and iPad do not support Flash Player or Sliverlight, and Google Street View cannot be used on the browser. The development cost will be high because you have to make your own version according to the specifications of iPhone and iPad. Conventionally, there are several mainstream techniques for displaying a three-dimensional content such as a panoramic view (sphere) on a web browser. However, none can solve the above problems.

一つ目はAdobe Flash。Adobe Flashはウェブ向きの動画を表示、作成することを目的とする技術として作られた。Flash機能向上により、3Dコンテンツやパノラマニューを表示できるようになった。しかし、Adobe Flash
Player というプラグインに依存するので、iPhone、iPad などの端末には対応しない。iPhone、iPadのブラウザ上でGoogle Street ViewのようなAdobe Flash技術で作られたコンテンツを閲覧することができない。 The first is Adobe Flash. Adobe Flash was created as a technology aimed at displaying and creating web-oriented videos. With the improved Flash function, 3D content and Panorama New can be displayed. But Adobe Flash
It depends on a plug-in called Player, so it doesn't support devices such as iPhone and iPad. You can't view content created with Adobe Flash technology like Google Street View on your iPhone or iPad browser.

Java3DとはJava技術をベースとする三次元グラフィックス拡張APIである。ウェブページ上ではJava Applet、OpenGLやDirectXなどの3Dグラフィックス用のAPIを呼び出す事によって3D 動画を再生する3D動画技術として開発されたが、ウェブ上で3D
コンテンツを表示する速度はマシンスペックに対しての依存が大きい。コンテンツの表示はJava
Appletというプラグインに依存し、Java Appletの入っていない端末ではJava3Dにより作られたコンテンツを表示することができない。 Java3D is a 3D graphics extension API based on Java technology. Developed as a 3D video technology that plays 3D video by calling APIs for 3D graphics such as Java Applet, OpenGL and DirectX on the web page.
The speed at which content is displayed is highly dependent on machine specifications. Content display is Java
It depends on a plug-in called Applet, and content created by Java3D cannot be displayed on devices that do not have Java Applet.

WebGLはOpenGL
2.0 をサポートするプラットフォーム上で、ウェブブラウザで3 次元コンピュータグラフィックスを表示させるための技術である。しかし、マシンのOpenGL
2.0をサポートするグラフィックカードに依存する。 そして実行速度などの問題で、対応しているブラウザがや対応している端末が少ない。iPhoneに代表されるスマートフォン上での利用もできない。 WebGL is OpenGL
It is a technology for displaying 3D computer graphics in a web browser on a platform that supports 2.0. But the machine OpenGL
Depends on graphics card that supports 2.0. And due to issues such as execution speed, supported browsers and few terminals are compatible. It cannot be used on smartphones such as iPhone.

かかる問題に鑑み、本発明者は、あらゆるブラウザ、プラットフォームに対応できる3Dエンジンを開発した。 In view of this problem, the present inventor has developed a 3D engine that can be applied to all browsers and platforms.

特許公表2000−500598Patent publication 2000-500598

「Sandy3D CS3 tutorials」,http://www.flashsandy.org/, http://www.flashsandy.org/tutorials/3.0“Sandy3D CS3 tutorials”, http://www.flashsandy.org/, http://www.flashsandy.org/tutorials/3.0 「Papervision3D」 papervision3d.org,http://code.***.com/p/papervision3d/"Papervision3D" papervision3d.org, http://code.***.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
エンジンを作ることは本発明の課題である。 Adobe Flash
And Microsoft
Sliverlight
RIA (Rich)
With the spread of Internet Application) plug-in technology,
Street View and Bing
A panoramic view based on plug-ins such as Map has been realized, and omnidirectional images can be displayed in three dimensions on a web page. However, supported plug-ins differ depending on the browser and platform. For example, the iPhone and iPad do not support Flash Player or Liverlight, and Google Street View cannot be used on the browser. The development cost will be high because you have to make your own version according to the specifications of iPhone and iPad. In view of this problem, the present inventors have developed a method, a system, and a program that can be applied to all browsers and platforms in order to solve the above problems. In the present invention, 3D can be used from any browser or terminal that does not depend on plug-ins or machine specifications.
Making an engine is the subject of the present invention.

本発明の３Ｄエンジンは、HTML5 Canvas 2D 仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する。また、本発明の３Ｄコンテンツは、前記3D エンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含めることがきできる。 The 3D engine of the present invention is compatible with all the latest mainstream PC browsers using only the HTML5 Canvas 2D specification, smartphones represented by iPhone, and Android. Further, the 3D content of the present invention can include a panoramic view corresponding to any latest mainstream PC browser, iPhone, or smartphone terminal represented by Android, using the 3D engine.

本発明ではプラグインやマシンスペックに依存しないHTML5
Canvas 2D API を利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3D
コンテンツを作ることができる3Dエンジンを作った。 In the present invention, HTML5 that does not depend on plug-ins or machine specifications
3D that supports all browsers and devices without relying on plug-ins using the Canvas 2D API
Created a 3D engine that can create content.

プラグインやマシンスペックに依存しない用件を満たすために、本発明はHTML5
Canvas 2D を利用した。 In order to satisfy requirements that do not depend on plug-ins or machine specifications, the present invention is HTML5.
Canvas 2D was used.

HTML5 Canvas ではJavascript で利用可能な2D 描画API が実装され、Javascript で2D API を使うことにより、Flash Player のようにブラウザ上であらゆる2D 図形を描画することができ、画像を描画、変形、移動、色の調整などの二次元描画機能が実装されている。 HTML5 Canvas implements 2D drawing API that can be used with Javascript. By using 2D API with Javascript, you can draw any 2D figure on the browser like Flash Player, and draw, transform, move, Two-dimensional drawing functions such as color adjustment are implemented.

手順としてまず３Ｄモデリングを実現する。本発明ではHTML5
Canvas の2D
API を利用し、3D
オブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体を描画することを実現する。 平面のスクリーンの上で3D オブジェクトを表現する場合は、まず3D
オブジェクトの三次元頂点座標を指定する。例えば立方体や球体などの簡単なオブジェクトであれば三次元座標は簡単にわかるが、構造が複雑なオブジェクトの場合は、専用の3D
モデリングソフトを使い、3Dオブジェクトの各頂点座標を得る必要である。3D
オブジェクトを平面のスクリーンの上で描画するために、3D
オブジェクトの三次元座標を平面上で描画する二次元座標に変換する。 スクリーンの”後ろ”にあるような三次元座標は相似な三角の性質を利用し、スクリーン上にある変換後の二次元座標は数式1によって求めることができる。この計算式は”遠いものが小さいく見える、近いものは大きく見える”のことを表している。3D
オブジェクトの頂点が決まれば、ワイヤーフレームつきの3D
モデルが作ることができる。
First, 3D modeling is realized as a procedure. In the present invention, HTML5
Canvas 2D
3D using API
By changing the three-dimensional coordinates of the object to two-dimensional coordinates that can be displayed on the screen, it is possible to draw a three-dimensional object on a plane. If you want to represent a 3D object on a flat screen,
Specifies the 3D vertex coordinates of the object. For example, a simple object such as a cube or a sphere can easily understand the 3D coordinates, but in the case of an object with a complicated structure, a dedicated 3D
It is necessary to obtain each vertex coordinate of the 3D object using modeling software. 3D
3D to draw objects on a flat screen
Convert 3D coordinates of an object into 2D coordinates to be drawn on a plane. Three-dimensional coordinates such as “behind” the screen use the similar triangular property, and converted two-dimensional coordinates on the screen can be obtained by Equation 1. This formula shows that “the far one looks small, the near one looks big”. 3D
Once the vertex of the object is determined, 3D with wireframe
A model can be made.

3D モデリングの次は3D
オブジェクトが三次元空間での変形、回転、移動の部分に入る。3D
オブジェクトは複数の頂点で構成されるものなので、3D
オブジェクトの形や位置の変化は基本頂点座標の変化に基づく。 線形代数によると、三次元空間での点の移動はこの点の三次元座標(x、y、z) とある特定の行列の積により行うので、回転、移動、変形、この三つの処理を満たせるために、ここではこの特定の行列を四次元行列として定義する。 Next to 3D modeling is 3D
The object enters the part of deformation, rotation and movement in 3D space. 3D
Since an object consists of multiple vertices, 3D
Changes in object shape and position are based on changes in basic vertex coordinates. According to linear algebra, the movement of a point in 3D space is performed by the product of the 3D coordinates (x, y, z) of this point and a specific matrix, so that the three processes can be satisfied. For this reason, this particular matrix is defined here as a four-dimensional matrix.

3D オブジェクトの回転ある点A の座標は(x、y、z) とすると、X 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ ) は数式２によって求める。
Assuming that the coordinates of the point A at which the 3D object is rotated are (x, y, z), the coordinates (x ′, y ′, z ′) after conversion are obtained by Equation 2 when rotating by X degrees on the X axis.

Y 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ )は数式2で求める。
In the case of rotating R degrees on the Y axis, the converted coordinates (x ′, y ′, z ′) are obtained by Equation 2.

Z 軸でR 度回転する場合、変換後の座標(x’ 、y’ 、z’ ) は数式4で求める。
In the case of rotation by R degrees on the Z axis, the converted coordinates (x ′, y ′, z ′) are obtained by Equation 4.

3D オブジェクトの変形の場合は数式5で求めることができる。Sx、Sy、Sy はそれぞれscaleX、scaleY、scaleZ を意味する。
In the case of 3D object deformation, it can be calculated by Equation 5. Sx, Sy, and Sy mean scaleX, scaleY, and scaleZ, respectively.

3D オブジェクトの移動(Tx、Ty、Tz) はそれぞれx 軸、y 軸、z 軸での移動量を示す。
3D object movement (Tx, Ty, Tz) indicates the amount of movement on the x, y, and z axes, respectively.

次はテクスチャマッピングの部分に入る。3D
オブジェクト作成後にテクスチャマッピングを行う。 テクスチャマッピングは物体の表面の質感を表現するために画像をオブジェクトに貼ることを意味するので、平面の画像は三次元物体の形状に合わせて貼られる必要がある。 このような効果を実現するために、大きい画像を小さいパーツに分割してから、それぞれ変形効果をかけて、指定される座標に置く。 Next, the texture mapping part is entered. 3D
Perform texture mapping after creating the object. Since texture mapping means that an image is pasted on the object in order to express the texture of the surface of the object, the planar image needs to be pasted according to the shape of the three-dimensional object. In order to realize such an effect, a large image is divided into small parts, and each is subjected to a deformation effect and placed at designated coordinates.

オブジェクト変形あるいは移動する場合はオブジェクトに貼られているテクスチャもオブジェクトの頂点座標に変化に合わせて変形する。HTML5
Canvas 2D 仕様における画像の変形はcontext.
transform(m11、m12、m21、m22、dx、dy) 関数より行う。HTML5 Canvas では画像に数式7の変形行列にかけると、画像は頂点の変化に合わせて、変形することができ、分割する三角形の画像の枚数が多ければ、十分に細かくなり、画像が3D
オブジェクトに貼られているように見える。 これによりテクスチャマッピングを実現する。
When the object is deformed or moved, the texture attached to the object is also deformed according to the change in the vertex coordinates of the object. HTML5
Image deformation in the Canvas 2D specification is context.
Performed by transform (m11, m12, m21, m22, dx, dy) function. In HTML5 Canvas, when the image is subjected to the transformation matrix of Equation 7, the image can be deformed according to the change of the vertex, and if the number of triangle images to be divided is large, the image will be fine enough and the image will be 3D
Looks like it is affixed to the object. This implements texture mapping.

本発明はHTML5
Canvas 2D 仕様のみであらゆるブラウザや端末に対応する3D
エンジンであるため、本3D
エンジンを利用し、各主流ブラウザやスマートフォンを代表とするiPhone、Android に対応するパノラマビューを含める３Ｄコンテンツを作成することができる。 The present invention is HTML5
3D compatible with all browsers and devices with only the Canvas 2D specification
Because this is an engine, this 3D
Using the engine, you can create 3D content including panoramic views that are compatible with iPhones and Androids, such as each mainstream browser and smartphone.

Google Street Viewのようなブラウザ上で全方位画像を表示するパノラマビューの場合はAdobe
Flash Playerに依存し、iPhone、iPadのようなAdobe Flash Playerのプラグインの入っていない端末ではGoogle
Street Viewのようなパノラマビューをブラウザ上で利用することができない。本発明の場合は、プラグインに利用せず、本発明により作られた全方位画像を表示するパノラマビューはiPhone、iPadを含め、あらゆる主流スマートフォン、ＰＣブラウザ上で利用することが可能となる。 Adobe for panoramic views that display omnidirectional images on browsers like Google Street View
Google depends on Flash Player, and does not include Adobe Flash Player plug-in such as iPhone and iPad.
Panorama view like Street View cannot be used on the browser. In the case of the present invention, the panoramic view that displays the omnidirectional image created by the present invention without using the plug-in can be used on all mainstream smartphones and PC browsers including the iPhone and iPad.

またWebGL の場合はプラグインに依存しないが、マシンのOpenGL
2.0をサポートするグラフィックカードに依存する。
OpenGL 2.0をサポートするグラフィックカードの入っていない端末では利用できない。本発明の場合は、OpenGL
2.0をサポートするグラフィックカードに依存しなく、スマートフォンを含めるスペックの低いマシンでの利用も可能となる。 WebGL does not depend on the plug-in, but the machine's OpenGL
Depends on graphics card that supports 2.0.
It cannot be used on terminals that do not have a graphics card that supports OpenGL 2.0. In the case of the present invention, OpenGL
It can be used on low-spec machines, including smartphones, without relying on a graphics card that supports 2.0.

図１は本発明を利用しブラウザ上で三次元のワイヤーフレーム付きの球体を描画した写真である。（実施例１）FIG. 1 is a photograph of a sphere with a three-dimensional wire frame drawn on a browser using the present invention. Example 1 図2は本発明を利用しブラウザ上で三次元のワイヤーフレーム付きの球体にテクスチャマッピングをする様子の図である。（実施例1)FIG. 2 is a diagram showing how texture mapping is performed on a sphere with a three-dimensional wire frame on a browser using the present invention. (Example 1) 図3は球体のテクスチャマッピング完了した後の写真である。（実施例１）FIG. 3 is a photograph after the texture mapping of the sphere is completed. Example 1 図4は本発明を利用し、パノラマビューを作成するために、球体への全方位写真画像の貼り方を示す図である。（実施例2)FIG. 4 is a diagram showing how to paste an omnidirectional photographic image on a sphere to create a panoramic view using the present invention. (Example 2) 図5は本発明を利用し、パノラマビューを作成するために、球体の半分だけ描画することを示す図である。（実施例2)FIG. 5 is a diagram showing that only half of a sphere is drawn to create a panoramic view using the present invention. (Example 2) 図6は本発明を利用し、パノラマビューを作成するために、描画した半分の球体をズームインする写真である。（実施例2)FIG. 6 is a photograph of zooming in on a half of the drawn sphere in order to create a panoramic view using the present invention. (Example 2) 図7はパノラマビューの球体を回すことにより、各角度パノラマビューを示す写真である。（実施例2)FIG. 7 is a photograph showing each angle panoramic view by rotating the panoramic view sphere. (Example 2) 図8は本発明を使い、本発明で構築したパノラマビュー上にアイコンを載せる写真である。（実施例2)FIG. 8 is a photograph in which icons are placed on a panoramic view constructed according to the present invention using the present invention. (Example 2) 図9は本発明で、構築したパノラマビューに方向矢印を載せる時の写真である。（実施例2)FIG. 9 is a photograph when a direction arrow is put on the constructed panoramic view in the present invention. (Example 2) 図11は本発明により構築されたパノラマビューは各主流ＰＣブラウザ上で利用可能ということを示す写真である。（実施例2)FIG. 11 is a photograph showing that the panoramic view constructed according to the present invention can be used on each mainstream PC browser. (Example 2) 図11は本発明により構築されたパノラマビューはiPhone、Androidに代表されるスマートフォンのブラウザ上で利用可能ということを示す写真である。（実施例2)FIG. 11 is a photograph showing that a panoramic view constructed according to the present invention can be used on a browser of a smartphone represented by iPhone and Android. (Example 2)

HTML5 Canvas 2D API １を利用し、3D オブジェクトの三次元座標をスクリーン上に表示できる二次元座標に変化することにより、平面上で三次元物体の3Dモデリング ２を実現する。 また線形代数による三次元空間での3D
オブジェクトの移動、変形を計算し、3D
オブジェクトは三次元空間での変形、移動、回転を実現する。 画像を三角形パーツに分割し、変形し、3D
オブジェクトの表面に貼り付けることによりテクスチャマッピング ３ を実現する。Canvas 2D API 仕様のみでモデリング、テクスチャマッピング機能を持つ3D
エンジンを実装し、この3D
エンジンを利用し、プラグインに依存せずにあらゆるブラウザや端末が対応する3D
コンテンツを作る。 Use HTML5 Canvas 2D API 1 to change 3D coordinates of 3D objects to 2D coordinates that can be displayed on the screen, thereby realizing 3D modeling 2 of 3D objects on a plane. 3D in 3D space with linear algebra
Calculate object movement, deformation, 3D
Objects realize deformation, movement, and rotation in a three-dimensional space. Split the image into triangular parts, transform and 3D
Texture mapping 3 is realized by pasting on the surface of the object. 3D with modeling and texture mapping functions only with Canvas 2D API specifications
This engine implements this 3D
3D that all browsers and devices support without relying on plug-ins using the engine
Make content.

本発明を利用し、ブラウザ上で閲覧できるテクスチャ付きの自由回転できる球体を実装した。球体の各頂点の決め方は地球儀の緯線、経線のように、プログラムの中で二重ループを使い、各頂点の三次元座標を計算し出す。 そして、二次座標に変換し、直線で頂点を結びつけることにより、図1 のようにワイヤーフレームつきの球体を作り出すことができる。次に、図2 が示すように球体の”緯線”、”経線”の本数にあわせて、球体に貼る画像を三角形パーツ分割し、各三角形画像の頂点座標(U、V) と3D オブジェクトのスクリーン上の二次元座標(x、y) を使い、数式1の変形行列を作り出すことができ、画像を変する。図3 のように変形した画像は球体の指定場所に貼ることができる。 Using the present invention, a freely rotatable sphere with a texture that can be viewed on a browser was implemented. The method of determining each vertex of the sphere is to calculate the three-dimensional coordinates of each vertex using a double loop in the program, like the parallels and meridians of the globe. Then, by converting to secondary coordinates and connecting vertices with straight lines, a sphere with a wire frame can be created as shown in Fig. 1. Next, as shown in Fig. 2, the image to be pasted on the sphere is divided into triangle parts according to the number of “lattices” and “meridians” of the sphere, and the vertex coordinates (U, V) of each triangle image and the 3D object screen are displayed. Using the two-dimensional coordinates (x, y) above, we can create the transformation matrix of Equation 1 and transform the image. The deformed image as shown in Fig. 3 can be pasted at the specified location of the sphere.

全天球パノラマビューの実装、本発明によりブラウザ上で閲覧できる球体を作成し、図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)）。 Implementation of omnidirectional panoramic view, creating a sphere that can be viewed on the browser according to the present invention, and in this study as shown in Fig. 4, omnidirectional photo images are flipped horizontally and pasted on the surface of the sphere, and the viewpoint is placed inside the sphere. By setting to the center, when the user sees from the inside of the sphere, the image pasted on the surface of the sphere by right-and-left inversion looks right. As in Figure 5, it is not necessary to draw what is behind the viewpoint, so only the front half of the sphere is drawn. Zoom in along the rectangular viewport so that you do not see the outside of the sphere as in Figure 6. Then, the viewing angle of the panoramic view can be adjusted by turning the sphere (Figure 7). 3D coordinates on the panorama view can be given to the image of the icon and arrow, and it can be put on the panorama view as shown in FIGS. PC
Mainstream browsers (Intenet
Explorer 9.0. The situation that works with 7916.6000, Firefox 3.6, Chrome 9.0, Safari 5.01, Opera 10.61) is shown in Figure 10. The operation of this 3D engine in a browser that supports HTML5 Canvas was confirmed. The operation has also been confirmed on mobile terminals. Figure 11 shows the behavior of iPhone's mobile Safari and Android's standard browser ((iPhone 4 (iOS 4.1), HTC desire (Android 2.2)).

Google Street Viewを代表とするブラウザ上で閲覧できるパノラマビューはFlash
Playerを体表とするプラグインに依存するため、iPhone、iPad上ブラウザで閲覧することができない。iPhone、iPadの特殊仕様に合わせてローカルで動作するアプリケーションの形で独自のパノラマビューを作らないといけないため、人力などのコストが上がある。本発明に利用することにより、簡単にプラグインに依存せずiPhoneを含め、各主流スマートフォン、主流PCブラウザ上で使用できるパノラマビューを作成することができる、従来の方法より多くの端末に対応でき、コストも下がることできる。 The panoramic view that can be viewed on a browser such as Google Street View is Flash
Because it depends on a plug-in that uses Player as the body surface, it cannot be viewed on a browser on the iPhone or iPad. Because you have to create your own panoramic view in the form of an application that runs locally in accordance with the special specifications of the iPhone and iPad, the cost of human power is high. By using the present invention, it is possible to easily create a panoramic view that can be used on each mainstream smartphone and mainstream PC browser, including iPhone, without depending on plug-ins, and can support more terminals than conventional methods. Cost can also be reduced.

１ HTML5
Canvas 2D API
２ 3Dモデリング
３
テクスチャマッピング

1 HTML5
Canvas 2D API
2 3D modeling 3
Texture mapping

Claims (2)

HTML5 Canvas 2D 仕様のみを使用するあらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応する3D
エンジン。 3D compatible with all the latest mainstream PC browsers that use only the HTML5 Canvas 2D specification, iPhones, and smartphones represented by Android
engine. 本3D エンジンを利用し、あらゆる最新主流PCブラウザやiPhone、Androidに代表されるスマートフォン端末に対応するパノラマビューを含める３Ｄコンテンツ。

3D content that uses this 3D engine and includes panoramic views compatible with all the latest mainstream PC browsers, iPhones, and smartphones represented by Android.

JP2011178991A 2011-08-18 2011-08-18 3d engine operating with only html5 2d-drawing specification Withdrawn JP2013041500A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP2011178991A JP2013041500A (en) 2011-08-18 2011-08-18 3d engine operating with only html5 2d-drawing specification

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2011178991A JP2013041500A (en) 2011-08-18 2011-08-18 3d engine operating with only html5 2d-drawing specification

Publications (1)

Publication Number Publication Date
JP2013041500A true JP2013041500A (en) 2013-02-28

Family

ID=47889816

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2011178991A Withdrawn JP2013041500A (en) 2011-08-18 2011-08-18 3d engine operating with only html5 2d-drawing specification

Country Status (1)

Country Link
JP (1) JP2013041500A (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103336816A (en) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 Canvas element rendering method and device realized on Android system based on GPU (Graphic Processing Unit)
CN105069831A (en) * 2015-07-28 2015-11-18 广州爱拍网络科技有限公司 Method and system for acquiring OpenGL rendering picture based on Hook technology
CN106709864A (en) * 2016-12-08 2017-05-24 彭志勇 WebGL-based large-capacity image caching method

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103336816A (en) * 2013-06-28 2013-10-02 广州市动景计算机科技有限公司 Canvas element rendering method and device realized on Android system based on GPU (Graphic Processing Unit)
WO2014205993A1 (en) * 2013-06-28 2014-12-31 广州市动景计算机科技有限公司 Method and device for rendering canvas element on android system based on gpu
US10013503B2 (en) 2013-06-28 2018-07-03 Guangzhou Ucweb Computer Tecnology Co., Ltd. Canvas element rendering method and apparatus implemented on android system based on GPU
CN105069831A (en) * 2015-07-28 2015-11-18 广州爱拍网络科技有限公司 Method and system for acquiring OpenGL rendering picture based on Hook technology
CN105069831B (en) * 2015-07-28 2018-05-29 广州爱拍网络科技有限公司 A kind of method and system based on Hook technical limit spacing OpenGL rendered pictures
CN106709864A (en) * 2016-12-08 2017-05-24 彭志勇 WebGL-based large-capacity image caching method

Similar Documents

Publication Publication Date Title
US9652880B2 (en) 2D animation from a 3D mesh
US20140192164A1 (en) System and method for determining depth information in augmented reality scene
CN107369205B (en) Mobile terminal city two-dimensional and three-dimensional linkage display method
WO2017029885A1 (en) Image generating device and image display control device
KR20140100656A (en) Point video offer device using omnidirectional imaging and 3-dimensional data and method
WO2018188479A1 (en) Augmented-reality-based navigation method and apparatus
CA2981134A1 (en) Information processing apparatus, information processing method, and information processing program
KR20080090671A (en) Apparatus and method for mapping textures to object model
CN110568923A (en) unity 3D-based virtual reality interaction method, device, equipment and storage medium
WO2019076348A1 (en) Virtual reality (vr) interface generation method and apparatus
CN114419226A (en) Panorama rendering method and device, computer equipment and storage medium
WO2017113729A1 (en) 360-degree image loading method and loading module, and mobile terminal
JP2013041500A (en) 3d engine operating with only html5 2d-drawing specification
US10699372B2 (en) Image generation apparatus and image display control apparatus
JP6852224B2 (en) Sphere light field rendering method in all viewing angles
CN113724331A (en) Video processing method, video processing apparatus, and non-transitory storage medium
CN114452646A (en) Virtual object perspective processing method and device and computer equipment
CA3155612A1 (en) Method and system for providing at least a portion of content having six degrees of freedom motion
CN105808220A (en) Method and device for displaying three-dimensional effect by application program
KR20190028634A (en) Method and Electronic Apparatus for Producing of Digital Creature
KR101227155B1 (en) Graphic image processing apparatus and method for realtime transforming low resolution image into high resolution image
CN109961395A (en) The generation of depth image and display methods, device, system, readable medium
JP5921753B2 (en) Map drawing device
CN102368335A (en) Improved method for drawing scene model by billboard technology
JP4984257B2 (en) Venue setting simulation device, program, medium, simple image deformation synthesis method

Legal Events

Date Code Title Description
A300 Withdrawal of application because of no request for examination

Free format text: JAPANESE INTERMEDIATE CODE: A300

Effective date: 20141104