eon tutorial
TRANSCRIPT
![Page 1: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/1.jpg)
EON Studio - Tutorial 携帯電話
主な内容
• ファイルのインポート
• インタラクティブ性の追加
1. オブジェクトのナビゲーション方法を変える
2. マウスクリックで携帯電話のカバーを開閉させる
3. ライトマップ(反射)を液晶画面に適用する
4. 対話性を制御する 2D ボタン(テキストフィールド)を作る
5. 2D ボタンを押すことで、カバーを半透明にする
6. イメージファイルを背景画にして、キーボードで表示のオン・オフをする
• パフォーマンスの最適化方法
1. テクスチャの最適化
2. 幾何データの圧縮
• コンテンツの配信
1. EON Web Publisher Wizard を使って web に配信する
![Page 2: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/2.jpg)
1. ファイルのインポート
(1) メインメニュの File>Import から 3ds ファイルを選択し、
Phone.3ds ((C:\Program Files\EON Reality\TutorialFiles) をオープンします。
(2) 3D Studio Geometry Import Plug-in
上から1番目、4,5,6番目のチェックを外しあとは 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
![Page 3: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/3.jpg)
(4) Simulation Tree 内に Phone が読み込まれたのを確認し、サブ・ツリーの内容も確認する。
![Page 4: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/4.jpg)
2. シミュレーションの確認
三角ボタンを押してシミュレーションを起動。
3. マウスによるオブジェクトのナビゲーション方法を変えます
Component Window の左端にある Prototype Tab を選び、
そ こ に あ る ”ObjectNavLITE” プ ロ ト タ イ プ を Simulation Tree の Scene の 下 に ド ラ ッ グ
Simulation tree 内の Scene/Camera にある WALK ノードを削除
![Page 5: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/5.jpg)
シミュレーションを起動。
マウスの左、右、センターボタンを使ってナビゲーションを確認。
Selection Tool の隣にある Initial View ボタンを押すと、現在のビューポイントが
次回起動時の初期位置となります。
![Page 6: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/6.jpg)
4. マウスクリックで、携帯電話のカバーを開閉させる対話性をつける
Component Node Window か ら ”Place” ノ ー ド を 選 択 し Simulation Tree の
Scene/Phone/Phone/Phone0/TOP に2回ドラッグ。それぞれを”Open”と”Close”に名前を変え
ます
“Open”ノードをダブルクリック。
Pitch を120(度)に変更
Time to move の p を2(秒)に変更
Type は Pitch(AbsP)以外は全て Relative タイプに変更
Active は NO
![Page 7: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/7.jpg)
“Close”ノードをダブルクリック。
Pitch を0(度)に変更
Time to move の p を2(秒)に変更
Type は Pitch(AbsP)以外は全て Relative タイプに変更
Active は NO
Latch ノードと ClickSensor ノードを先ほどの Place ノードと同じ場所にドラッグ
Latch ノードと ClickSensor ノード及び2つの Place ノードを全て、
Simulation Tree から Route View にドラッグ。
![Page 8: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/8.jpg)
Routes ウィンドウにて以下のようにノードを接続
① ClickSensor の Out を OnButtonDownTrue
Latch の IN を Toggle
② Latch の OUT を OnSet
Open の IN を SetRun
③ Latch の OUT を OnClear
Close の IN を SetRun
シミュレーションを起動し、カバーの上をクリックして開閉を確認します。
![Page 9: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/9.jpg)
5. ライトマップ(光の反射効果)を 携帯の液晶画面に適用する
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 に加える)
シミュレーションを起動し、カバーを開き、液晶画面上に適用された効果を確認します。
![Page 10: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/10.jpg)
6. 対話性を制御する 2D ボタン(テキストフィールド)を作る
Components/Prototype から ”TextBoxButton”を選び、Scene/Camera へドラッグ。
ノード名を”ChangeTransparencyButton”に変更
テキストフィールドに”Transparency”と入力。
この文字列が、シミュレーションにボタンとして表示されます。
TBPosition を 0.05 0.8 へ変更 (変更しなくても ok)
TBSize を 105 22 へ変更 (変更しなくても ok)
7. 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 ボタンを押して確認する。
![Page 11: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/11.jpg)
8. イメージファイルを背景画にして、表示のオン・オフをする
プロトタイプより 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 など) を選択する。
![Page 12: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/12.jpg)
![Page 13: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/13.jpg)
パフォーマンスを向上させる方法(最適化)
• テクスチャの最適化
ファイルサイズを小さくしてパフォーマンスを上げるには、重要な情報を失うことなく、テクスチャを
必要な限り圧縮することが大切です。EON Studio でテクスチャサイズを削減する際、シミュレーショ
ンウィンドウでその結果を確認しながら、テクスチャの大体のサイズも知ることが出来るので、大変
便利です。テクスチャの圧縮は、オリジナルの 3D モデルが PNG 形式のテクスチャを持っていると
一番効率が良いです。EON 内でテクスチャの圧縮を行う時は、テクスチャは一度 JPEG2000 形式と
して内部処理されるため、情報量を減らすことなくサイズを減らす事ができます。
注意事項: テクスチャ圧縮の主な目的は、ファイルサイズを小さくすることですが、それ以外にも、
シミュレーション内で多くのテクスチャを使用している場合は、全体的なパフォーマンスを上げる事
ができます。
1. シミュレーション・ツリーの Scene/Resources/Texture を選択する。TextureResourceGroup ノード
で、このディレクトリー内のすべてのノードのテクスチャの圧縮率を全体的に設定することができる。
この場合、すべてのテクスチャは同じ圧縮率となるが、個別の圧縮率を持つノードや、
UseGroupSettings のチェックを外してあるノードは対象外となる。
2. Quality level を 30% に変更し、MaxWidth を 256 に、MinWidth を 256 に変更する。この
MaxWidth と MinWidth の意味は、もしテクスチャが 256x256 以下の解像度であった場合は、削減
はせずにそのままにしておく。
![Page 14: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/14.jpg)
• 幾何データの圧縮
ジオメトリ(幾何データ)の圧縮は、配布用の edz ファイルのサイズを小さくするもう1つの方法です。
(注:編集可能は eoz ファイルは、ここで述べるいかなる圧縮や削減の対象にはなりません)ジオメト
リ圧縮の結果は、即座にシミュレーション・ウィンドウ内で確認できます。あまり削減し過ぎると、ポリ
ゴン間に溝ができ、ジオメトリが破壊します。ファイルサイズを小さくすることは、web 経由の配布で
は必須です。
注:ジオメトリ圧縮はファイルサイズを幾分小さくしますが、パフォーマンスにはあまり影響しません。
1. シミュレーション・ツリーの Scene/Resource/Meshes を選択する。MeshResourceGroup ノードでこ
のノード以下にあるすべてのメッシュの削減を指定することができる。
2. MeshResourceGroup の下にある全てのメッシュの UseGroupSettings フィールドがチェックされて
いることを確認する。GeometryCompressionLevel フィールドのプルダウンより圧縮レベル Preset 7
を選択する。
注意: ジオメトリが圧縮されたかどうかを調べるには、シミュレーション開始後に Property Bar の中
の、OriginalSize と DistributionSize の違いを確認します。ただしこの DistributionSize の値は予
測値であり、実際の削減サイズは(web 配布用のファイルが出力されて)最終的な圧縮がジオメトリ
ファイル上で行われてからでないと確定されません。
![Page 15: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/15.jpg)
コンテンツをインターネットに配信する方法
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 をクリックする。
![Page 16: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/16.jpg)
5. Product Visualization のテンプレートを選択する。Next をクリックし、ウィザードの5段階まで進める。
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 をクリックする。
![Page 17: Eon Tutorial](https://reader034.vdocuments.pub/reader034/viewer/2022042514/55b507b7bb61eb66498b46c1/html5/thumbnails/17.jpg)
10. Internet Explorer 上で展開した web アプリケーションの例:
11. ファイルが保存されているディレクトリを開き、その内容を全て web site にアップロードする。
12. ユーザを index.html にアクセスするようにナビゲーションすると、EON のプラグインが自動的にダ
ウンロードされる。(コンピュータ上にまだプラグインが存在しない場合のみ)
13. プラグインの Viewer は無償で、サイズは約 1MB。