Web エンジンの概要、およびインタラクティブな Web サイトまたは HTML コンテンツをシーンに追加する

Web エンジンを作成して、VRED シーンにインタラクティブな Web サイト、PDF、または HTML コンテンツを追加します。コンテンツは、リアルタイムでマテリアル テクスチャ チャネルにストリーム入力され、表示のためのマテリアルのプロパティを使用します。

Web エンジンを作成する方法

  1. メニュー バーで、[シーン] > [メディア エディタ]を選択してメディア エディタを開きます。

  2. Web エンジンを作成するには、下部のアイコン バーにある[+]アイコンを選択してから、[Web エンジン]を選択します。

  3. Web エンジンをダブルクリックして、名前を付けます。

  4. 幅と高さを設定する:

    • URL に HTML コンテンツを使用する場合は、コードから既知の幅と高さを入力します。
    • URL に Web サイトを使用する場合は、Web サイトがオブジェクトに表示されるときに幅と高さを調整します。

  5. コンテンツの URL を追加する:

    • Web サイトに追加するには、[URL]フィールドにそれを入力します(www.autodesk.co.jp など)。
    • ローカルの HTML ファイルを追加するには、[参照]アイコンを使用します。HTML には、オーディオとビデオを含めることができます。HTML ファイルは埋め込まれているオーディオ ファイルやビデオ ファイルを参照できます。サポートされているメディア フォーマットは、WebM (.webm)、OGG (.ogg/.ogv)、WAV (.wav)です。

  6. マテリアル エディタから、Web エンジンに割り当てられたマテリアルを[マテリアル]フィールドにドラッグします。

  7. 次のテクスチャ タイプを設定します。

    • 拡散:

      環境がこのテクスチャに反映されます。

      1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を白に設定します。
      2. マテリアル エディタのプロパティの[拡散テクスチャ]で、[テクスチャを使用]をクリックして、[マッピング タイプ]を UV に設定します。 必要に応じて拡散テクスチャを回転します。

    • 白熱光:

      レイトレーシングでは、[光源として使用]がアクティブになると、マテリアルはシーンに光を放出します。

      1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を黒に設定します。
      2. マテリアル エディタのプロパティの[白熱光]で、[強度]を 1.00 に、色を白に設定します。
      3. [マッピング タイプ]を UV に設定します。 必要に応じて白熱光テクスチャを回転します。

    • 拡散光 + 白熱光:

      このテクスチャは、白熱光とアルファ チャネル([拡散光]でのみ使用可能)のプロパティが必要な場合に使用します。

      この HTML サンプル コードは Web ページの背景を透明(アルファ)に設定します。

       <style>

 body{

 background-color: rgba(0, 0, 0, 0);

 }

 </style>
      1. マテリアル エディタのプロパティの[マテリアル]で、[拡散光色]を白に設定します。
      2. マテリアル エディタのプロパティの[拡散テクスチャ]で、[アルファを使用]をオンにします。
      3. マテリアル エディタのプロパティの[白熱光]で、[強度]を 1.00 に、色を白に設定します。
      4. [拡散テクスチャ]または[白熱光]で、[マッピング タイプ]を UV に設定します。必要に応じてテクスチャを回転します。

Web エンジン用サービスの分離

Web エンジンにアクセスして Python で公開するための分離されたサービスが 2021.3 で追加されたため、VRED で Web エンジンを自動的に再ロードできるようになりました。これは、外部アプリケーションが VRED に UI をストリーミングしている場合、UI が変更されている場合、および UI を再ロードする必要がある場合に必要になります。

vrWebEngineService と vrdWebEngine を使用します。シーンプレートの Web エンジンがシーンプレートの名前を共有するようになったため、新しいサービスで検索できるようになりました。

VRED から HTML5 へのコミュニケーション

VRED と HTML5 の間ではコミュニケーションとインタラクションが双方向で行われます。ここでは VRED から HTML5 へのコミュニケーションの例を示します。

Python 関数((sendToWebEngine))が関連付けられているバリアント セット((Home\_Button))を実行すると、特定の Web エンジン((Webengine\_A))がトリガされ、Web ページに HTML イベント((VRED\_HOME\_Btn))が送信されます。Web ページには、メッセージを受信するためのイベント リスナーが必要です。

次に、メッセージを受信するための HTML コードの例を示します。

<script>

document.addEventListener("VRED\_HOME\_Btn", Icon_HomeClick);

</script>

VRED から HTML5 へ

HTML5 から VRED へのコミュニケーション

Web サーバを使用して Web ページから VRED に Python コマンドを送信するには、Img 要素と URL を使用できます。たとえば、src = "http://localhost:8888?.....。基本設定で Web サーバを有効にする必要があります。

スイッチ マテリアルを選択肢 0 に設定する HTML コード:

<script>

function r(){

var i = document.createElement("img");

i.src = "http://localhost:8888/python?value=setSwitchMaterialChoice('SwitchColor', 0)";

};

</script>

Icon_Anim という VariantSet をトリガする HTML コード:

<script>

Icon_Click = function(event) {

var i = document.createElement("img");

i.src = "http://localhost:8888/variants?value=selectVariantSet('Icon_Anim')";

};

</script>

Web エンジンで PDF を表示する

フロントプレートを使用して PDF を操作し、Web エンジンで表示することができます。

注:

この機能には Qt 5.15 以降が必要であるため、VRED 2021.3 でのみ使用できます。

  1. [シーン] > [シーンプレート エディタ]を選択します。
  2. [作成] > [フロントプレートを作成]を選択します。これにより、[名前]と[タイプ]が[フロントプレート]に設定されます。
  3. [プロパティ]セクションで、[コンテンツのタイプ]を[Web]に、[URL]を PDF の場所に設定します。
親ページ: メディア