EON Studio - Tutorial 携帯電話

主な内容

• ファイルのインポート

• インタラクティブ性の追加

1. オブジェクトのナビゲーション方法を変える

2. マウスクリックで携帯電話のカバーを開閉させる

3. ライトマップ（反射）を液晶画面に適用する

4. 対話性を制御する 2D ボタン（テキストフィールド）を作る

5. 2D ボタンを押すことで、カバーを半透明にする

6. イメージファイルを背景画にして、キーボードで表示のオン・オフをする

• パフォーマンスの最適化方法

1. テクスチャの最適化

2. 幾何データの圧縮

• コンテンツの配信

1. EON Web Publisher Wizard を使って web に配信する

１． ファイルのインポート

(1) メインメニュの File>Import から 3ds ファイルを選択し、

Phone.3ds ((C:\Program Files\EON Reality\TutorialFiles) をオープンします。

(2) 3D Studio Geometry Import Plug-in

上から１番目、４，５，６番目のチェックを外しあとは ON

(3) Geometry Import ダイアログ

Target Path を設定 (c:\temp など)

No scaling

Center geometry (0,0,0)

Make texture square

Set material of texture surface to white を確認。あとはデフォルト。その後 OK

(4) Simulation Tree 内に Phone が読み込まれたのを確認し、サブ･ツリーの内容も確認する。

２． シミュレーションの確認

三角ボタンを押してシミュレーションを起動。

３． マウスによるオブジェクトのナビゲーション方法を変えます

Component Window の左端にある Prototype Tab を選び、

そ こ に あ る ”ObjectNavLITE” プ ロ ト タ イ プ を Simulation Tree の Scene の 下 に ド ラ ッ グ

Simulation tree 内の Scene/Camera にある WALK ノードを削除

シミュレーションを起動。

マウスの左、右、センターボタンを使ってナビゲーションを確認。

Selection Tool の隣にある Initial View ボタンを押すと、現在のビューポイントが

次回起動時の初期位置となります。

４． マウスクリックで、携帯電話のカバーを開閉させる対話性をつける

Component Node Window か ら ”Place” ノ ー ド を 選 択 し Simulation Tree の

Scene/Phone/Phone/Phone0/TOP に２回ドラッグ。それぞれを”Open”と”Close”に名前を変え

ます

“Open”ノードをダブルクリック。

Pitch を１２０（度）に変更

Time to move の p を２（秒）に変更

Type は Pitch（AbsP）以外は全て Relative タイプに変更

Active は NO

“Close”ノードをダブルクリック。

Pitch を０（度）に変更

Time to move の p を２（秒）に変更

Type は Pitch（AbsP）以外は全て Relative タイプに変更

Active は NO

Latch ノードと ClickSensor ノードを先ほどの Place ノードと同じ場所にドラッグ

Latch ノードと ClickSensor ノード及び２つの Place ノードを全て、

Simulation Tree から Route View にドラッグ。

Routes ウィンドウにて以下のようにノードを接続

① ClickSensor の Out を OnButtonDownTrue

Latch の IN を Toggle

② Latch の OUT を OnSet

Open の IN を SetRun

③ Latch の OUT を OnClear

Close の IN を SetRun

シミュレーションを起動し、カバーの上をクリックして開閉を確認します。

５． ライトマップ（光の反射効果）を 携帯の液晶画面に適用する

Component/Node から Texture2 ノードを、Scene/Resources/Textures にドラッグし、

Lightmap と名前を変えます。

Lightmap ノードをクリックし、属性バーの右上にある”File Open”のアイコンをクリック。

Lightmap[Texture2] フ ァ イ ル と し て Tutorial の フ ォ ル ダ ー に あ る サ ン プ ル フ ァ イ ル

の”clouds_soft.jpg”を選択します。

Scene/ResourcesMaterials/material #6 に行き”+”を押して、”LightmapTexture”フォルダを表示

します。再び Lightmap texture ノードに行き、右クリックから”Copy as Link”を選択。material #6

ノードに戻って、Lightmap Texture フォルダー内に Paste します。

material #6 ノードを選んで属性バーに行きます。

Lightmap の intensity を 0.3 に変更：

（intensity は、高くすると反射率が上がり、低くすると下がる。例えば金属・クロム状のオブジェク

トでは 1 にすると良く、木材や家具のようなソフトな反射を持つ物体には 0.2-0.3 が適している）

LightmapAdd を 0.25 0.25 0.25 に設定。スペースで区切る。（色／明度を lightmap に加える）

シミュレーションを起動し、カバーを開き、液晶画面上に適用された効果を確認します。

６． 対話性を制御する 2D ボタン（テキストフィールド）を作る

Components/Prototype から ”TextBoxButton”を選び、Scene/Camera へドラッグ。

ノード名を”ChangeTransparencyButton”に変更

テキストフィールドに”Transparency”と入力。

この文字列が、シミュレーションにボタンとして表示されます。

TBPosition を 0.05 0.8 へ変更 （変更しなくても ok）

TBSize を 105 22 へ変更 （変更しなくても ok）

７． 2D ボタンをクリックすると、カバーを透明に変更するという対話性をつける

“SmoothOperator”プロトタイプを Scene/Phone へドラッグ。

属性バーの State0Value フィールドを 0.5 に設定。（“0.5”で 50%の透明度という意味）

Latch ノードを Scene/Phone に追加

Latch、 ChangeTransparencyButton と SmoothOperator と（Scene/Resources/Materials

にある）material #27 ノードをルートビューにドラッグ

ChangeTransparencyButton -> Latch -> SmoothOperator -> material #27 の順に並べる

ルートウィンドウで以下のように接続

① ChangeTransparencyButton OnDown -> Latch Toggle

② Latch OnChanged -> SmoothOperator Toggle

③ SmoothOperator FloatValue -> material #27 Opacity

シミュレーションを起動し、Transparency ボタンを押して確認する。

８． イメージファイルを背景画にして、表示のオン・オフをする

プロトタイプより Background を選び Camera の下にドラッグします。

Latch ノードを Camera の下にドラッグします。

KeyboardSensor ノードを Camera の下にドラッグする。ノードをダブルクリックして、Virtual key

name を VK_B に設定する。これによって、キーボードの B のキーを押す度に、シミュレーション

の背景を変えるようにします。

Background プロトタイプと Latch ノード、 KeyboardSensor ノードを全て Route view に持って

くる。 Latch ノードは True と False の値を毎秒 B キーが押され度に、Background プロトタイプ

に変更を加え、背景イメージを on/off します。

ルートウィンドウにて、次のようなコネクションを作ります：

ソースノード Out ﾌｨｰﾙﾄﾞ 出力するノード In ﾌｨｰﾙﾄﾞ

KeyboardSensor OnKeyDown Latch Toggle

Latch OnChanged Background ShowBG

注意: Background プロトタイプにはあらかじめ組み込まれた Latch ファンクションが入っています。

そのため、Latch ノードを使わずに直接 KeyBoardSensor の (OnKeyDown) を Background の

(ToggleImageBG)につなげても動きます。その場合は、KeyboardSensor [OnKeyDown] ->

Background [ToggleImageBG]をつなげます。

Simulation ウィンドウを開く。B キーを押して背景が変わるかどうかを確認する。ソリッドカラーの

色は、Property バーの BGColor フィールドを変えることで変更できる。

Simulation ツリーの Background プロトタイプを選択する。画面右にある Property Bar に行き、

Tutorial のフォルダー(C:\Program Files\EON Reality\TutorialFiles) から別のイメージファイル

（Paradise.jpg など） を選択する。

パフォーマンスを向上させる方法（最適化）

• テクスチャの最適化

ファイルサイズを小さくしてパフォーマンスを上げるには、重要な情報を失うことなく、テクスチャを

必要な限り圧縮することが大切です。EON Studio でテクスチャサイズを削減する際、シミュレーショ

ンウィンドウでその結果を確認しながら、テクスチャの大体のサイズも知ることが出来るので、大変

便利です。テクスチャの圧縮は、オリジナルの 3D モデルが PNG 形式のテクスチャを持っていると

一番効率が良いです。EON 内でテクスチャの圧縮を行う時は、テクスチャは一度 JPEG2000 形式と

して内部処理されるため、情報量を減らすことなくサイズを減らす事ができます。

注意事項: テクスチャ圧縮の主な目的は、ファイルサイズを小さくすることですが、それ以外にも、

シミュレーション内で多くのテクスチャを使用している場合は、全体的なパフォーマンスを上げる事

ができます。

1. シミュレーション･ツリーの Scene/Resources/Texture を選択する。TextureResourceGroup ノード

で、このディレクトリー内のすべてのノードのテクスチャの圧縮率を全体的に設定することができる。

この場合、すべてのテクスチャは同じ圧縮率となるが、個別の圧縮率を持つノードや、

UseGroupSettings のチェックを外してあるノードは対象外となる。

2. Quality level を 30% に変更し、MaxWidth を 256 に、MinWidth を 256 に変更する。この

MaxWidth と MinWidth の意味は、もしテクスチャが 256x256 以下の解像度であった場合は、削減

はせずにそのままにしておく。

• 幾何データの圧縮

ジオメトリ（幾何データ）の圧縮は、配布用の edz ファイルのサイズを小さくするもう１つの方法です。

（注：編集可能は eoz ファイルは、ここで述べるいかなる圧縮や削減の対象にはなりません）ジオメト

リ圧縮の結果は、即座にシミュレーション・ウィンドウ内で確認できます。あまり削減し過ぎると、ポリ

ゴン間に溝ができ、ジオメトリが破壊します。ファイルサイズを小さくすることは、web 経由の配布で

は必須です。

注：ジオメトリ圧縮はファイルサイズを幾分小さくしますが、パフォーマンスにはあまり影響しません。

1. シミュレーション･ツリーの Scene/Resource/Meshes を選択する。MeshResourceGroup ノードでこ

のノード以下にあるすべてのメッシュの削減を指定することができる。

2. MeshResourceGroup の下にある全てのメッシュの UseGroupSettings フィールドがチェックされて

いることを確認する。GeometryCompressionLevel フィールドのプルダウンより圧縮レベル Preset 7

を選択する。

注意: ジオメトリが圧縮されたかどうかを調べるには、シミュレーション開始後に Property Bar の中

の、OriginalSize と DistributionSize の違いを確認します。ただしこの DistributionSize の値は予

測値であり、実際の削減サイズは（web 配布用のファイルが出力されて）最終的な圧縮がジオメトリ

ファイル上で行われてからでないと確定されません。

コンテンツをインターネットに配信する方法

EON は、Web Publisher Wizard というウィザードが用意されており、作成したインタラクティブな 3D

コンテンツを誰でも簡単に html シェルに組み込み、インターネット上に配信することができます。こ

れにより、正しい html コードと JavaScript コードが自動的に作成されます。結果として作成される

html ファイルなどは、再度 html エディタ（DreamWeaver, FrontPage など）で、編集も可能です。

1. まず File/Save As... を選んで、作成した EON ファイルを保存します。これは Web Publisher

Wizard を使う前に必ずやっておく必要があります。

2. File/Create Web Distribution... を選択する。

3. OK をクリックする。

4. Web Publisher が表示されたら、Next をクリックする。

5. Product Visualization のテンプレートを選択する。Next をクリックし、ウィザードの５段階まで進める。

6. アプリケーションを保存するフォルダー名を入力する。例えば： C:\EON Demos\Web_Phone

7. Internet を配信タイプとして選ぶ。

8. Use Default Plugin Folder を使う。これによって、EON のプラグインは EON Reality 社のダウンロ

ードサーバーから自動的にダウンロードされる。

要注意: 配布するディレクトリの内容を全て、web サイトに掲載してください。ディレクトリには、

eon_functions(Jscript, VBScript), eox_variables, eoz file, index.htm, image フォルダなどが保存さ

れます。ユーザが index.htm にアクセスするように構築すれば、最初だけプラグインが自動的にダ

ウンロードされます。これを選択すると、インターネットへの接続が必須です。これによって、必要

なコンポーネントが全て EON Reality のサーバーからダウンロードされます。詳しくは EON

Distribution guide の Web Publisher Wizard の項目をご覧ください。

9. Next をクリックし、最後に Finish をクリックする。

10. Internet Explorer 上で展開した web アプリケーションの例：

11. ファイルが保存されているディレクトリを開き、その内容を全て web site にアップロードする。

12. ユーザを index.html にアクセスするようにナビゲーションすると、EON のプラグインが自動的にダ

ウンロードされる。（コンピュータ上にまだプラグインが存在しない場合のみ）

13. プラグインの Viewer は無償で、サイズは約 1MB。