DataV:model-viewer

チャートスタイル

モデルビューアは、DataVチームの自社開発のwebglビジュアルレンダリングエンジンdatav.vangoghに基づく3Dアニメーションモデルローダーです。 このコンポーネントは、gltfおよびglb形式モデル、PBRマップ、インスタンス化されたメッシュ解析、没入型アニメーションエディター、さまざまな光源の選択、および効果後の構成の読み込みをサポートします。

設定

• 検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグして、ウィジェットの回転角度を制御します。

  • アイコンをクリックして、ウィジェットスタイルを反転します。

  • アイコンをクリックして、ウィジェットスタイルを反転します。

• Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• カメラ

  パラメーター	説明
  パースペクティブ	カメラビューのfov値は、モデルの視野の角度値を指します。 スライダーをドラッグして、視野角の角度を調整します。 有効な値: 0.1〜180。
  カメラ位置	モデルビューア内のX、Y、Z軸におけるカメラの位置。 スライダーをドラッグして、カメラの位置値を3方向に調整します。 値の範囲は-1000から1000です。
  ターゲットの場所	モデルビューア内のX、Y、Z軸方向のカメラの向きの位置。 スライダーをドラッグして、3方向軸上のカメラの向きの値を調整します。 有効な値: -1000から1000。

  • モデル

    パラメーター	説明
    モデルアドレス	デフォルトでは、モデルURLはモデルアドレス設定項目で設定されます。 既定の構成モデルに満足できない場合は、必要なモデルをカスタマイズしてアップロードできます。 2つのアップロード方法があります。 方法1: モデルアドレスの右側にあるリンク入力ボックスに、必要なモデルのURLを入力します。 方法2: アドレスフィールドの下の破線のボックスで [変更] をクリックします。 [アセットの選択] ダイアログボックスで、[オフィシャルデザインアセット] からモデルを選択するか、[マイデザインアセット] にアップロードされたカスタムモデルを選択します。 マイデザインアセットの [+] アイコンをクリックして、ローカルモデルをアップロードすることもできます。 モデルのデザインアセットを変更する方法の詳細については、「関数の説明」をご参照ください。 説明 urlフィールドがデータパネルで設定されている場合、データパネルのモデルアドレスが最初に読み取られます。
    表示モード	スイッチをオンにしてワイヤフレームモード効果をオンにします。これにより、指定したソリッドカラーワイヤフレームスタイルを元のモデルテクスチャにオーバーレイできます。 ワイヤフレームタイプ: ワイヤフレームモードのワイヤフレームタイプを設定します。 有効な値: Triangle MeshおよびQuad Mesh ワイヤーフレーム幅: スライダーをドラッグして、ワイヤーフレームの幅と太さを調整します。 このパラメーターは、Wireframe Modeをオンにしたときにのみ使用できます。 Wireframe Color: ワイヤフレームの色を指定します。 このパラメーターは、Wireframe Modeをオンにしたときにのみ使用できます。 PBRチャンネル表示モード: モデルビューアは、モデルのPBRマップ表示をサポートします。 ベースカラーに加えて、Metal-Roughnessのみがサポートされています。 [PBRチャンネル表示モード] ドロップダウンリストをクリックして、モデルのPBRチャンネルのマップスタイルを表示します。 利用可能なマップスタイルには、Final、Base Color、AO、Metalness、Roughness、Normal、Illuminationなどがあります。
    レンダリング効果	モデルのレンダリング効果のスタイル。 Shadow Settings: モデルのシャドウスタイルを指定します。 [シャドウの表示] または [シャドウの受信] をオンまたはオフにすると、モデルのシャドウスタイルを制御できます。 説明 キャストシャドウは他のメッシュに影を落とします。 受信シャドウは他のメッシュに影を落とします。 モデル自体がメッシュの前後に生成されたシャドウ効果を表示する必要がある場合、2つのシャドウ構成アイテムを同時にオンにする必要があります。 モデルの影を投影平面に表示するだけの場合は、レンダリングのパフォーマンスの低下を減らすために影の設定項目をオンにするだけです。 図 1. のみオープン発光シャドウの効果 図2. 起動影と受信影は開いているレンダリング 不透明度: スライダーをドラッグして、モデルの不透明度を調整します。 説明 不透明度を設定する機能は、後処理におけるいくつかの効果の非表示に影響を与える可能性があります。 モデル内の一部のオブジェクトが半透明であることが本当に必要な場合は、モデリングソフトウェアで事前に材料を調整することをお勧めします。
    設定の変更	位置: スライダーをドラッグして、モデルの位置をx軸、Y、Z方向に調整します。 値の範囲は-1000から1000です。 回転: スライダーをドラッグして、モデルの選択した角度をx軸、Y、Z方向に調整できます。 値の範囲は0〜100です。 スケール: スライダーをドラッグして、モデルのスケールをx軸、Y、Z軸に沿って調整します。 有効値: 0~100。

• アニメーション

  パラメーター	説明
  モデルアニメーション	モデルアニメーションの再生効果を有効にするには、スイッチをオンにします。 コンポーネントアニメーションは、読み込まれたモデル自体のアニメーションをサポートします (モーフアニメーションとスケルトンアニメーションの両方がサポートされます) 。 単一のアニメーションモデルの場合、[アニメーションモデル] スイッチをオンにしてアニメーションを有効にできます。 マルチアニメーションモデル: モデルに複数のアニメーション効果がある場合、[アニメーションモデル] をオンにすると、モデルリストの最初のアニメーションがデフォルトで再生されます。 他のアニメーションコンテンツを選択する場合は、[位置とアニメーション設定の使用] をクリックして、必要なアニメーションコンテンツを指定します。 説明 アニメーションの詳細を設定するには、キャンバス上のモデルウィジェットの右上隅にあるアイコンをクリックして、イマーシブエディタでビューアニメーションモードに入ります。 具体的には、イマーシブエディタモードでアニメーションの詳細を設定する手順は次のとおりです。 キャンバスエディタのモデルウィジェットの右上隅にある [位置とアニメーションの設定] をクリックします。 [アニメーション設定] ダイアログボックスが表示されます。 ダイアログボックスで、自動再生スイッチをオンにして自動再生効果を有効にします。 マルチアニメーションモデルのアニメーションをプレビューまたは停止することもできます。 ダイアログボックスの左側にあるモデルプレビューパネルで、モデルをドラッグしてモデルのカメラアングルを調整し、モデルを表示するのに最適なアングルを選択できます。 [デフォルトアニメーション] の横にあるドロップダウンリストをクリックして、モデルプレイリスト内のすべてのアニメーションを表示します。 再生するアニメーションを選択して、モデルのデフォルトのアニメーションを指定します。 アニメーション選択の指定が完了したら、左上隅の [終了して設定を保存] アイコンまたは右上隅のアイコンをクリックして、[アニメーション設定] ダイアログボックスを終了します。
  スイープアニメーション	左側のアイコンをクリックしてスイッチをオンにし、追加の光掃引アニメーション効果を重ね合わせるようにモデルを設定します。 さまざまな光掃引構成アイテムをカスタマイズして、クールな効果を提示できます。 フロントタイプ: [プレーン] または [サーフェス] を選択できます。 スキャン軸: 光掃引アニメーションをスキャンする軸方向を選択します。 有効な値: x軸、Y、およびZ。 正または負の方向: 光掃引アニメーションの方向を選択します。 有効な値: PositiveおよびNegative。 色: スイープアニメーションの色。 スイープの長さ: スライダーをドラッグして、アニメーションのスイープの長さを設定します。 有効値: 0~100。 スイープ速度: スライダーをドラッグして、アニメーションのスイープ速度を設定します。 有効値: 0~100。
  軸周りの回転	左側のアイコンをクリックしてスイッチをオンにし、軸を中心としたモデルの回転を設定します。 回転軸: 回転軸を選択します。 有効な値: x軸、Y、Z、カスタム。 Direction: 回転の方向を指定します。 有効な値: 反時計回りおよび時計回り。 回転速度: スライダーをドラッグして、軸の周りの回転速度を設定します。

• 環境と照明

  パラメーター	説明
  背景情報	モデルビューアには、シナリオごとに異なる背景要件があります。 コンポーネントは、3つのタイプの背景表示を提供する。 左側のアイコンをクリックして、背景設定アイテムの表示を制御します。 なし: 背景設定項目でなしを選択するか、背景スイッチをオフにして背景スタイルを無効にします。 モデルビューアウィジェットの下にあるレイヤーウィジェットがキャンバスに表示されます。 色: このオプションを選択すると、モデルビューアの背景を単色に設定できます。 背景色と半透明をカスタマイズできます。 環境マップ: このオプションを選択すると、環境のマップコンテンツが表示されます。
  環境マップ	左側のアイコンをクリックしてスイッチをオンにし、モデルの背景環境マップスタイルの効果を設定します。 環境マップは、画像の照明に基づく。 現在、HDR形式のみがサポートされています。 環境マップ: 下の画像ボックスで、入力マップのURLをカスタマイズしたり、マップタイプのデザインアセットコンテンツをカスタマイズしたりできます。 DataVは10種類のマップスタイルを提供します。 方向: スライダをドラッグして、テクスチャマップの方向を調整します。 値の範囲は0〜360です。 単位: 度。 強度: スライダーをドラッグして、環境マップの強度を調整します。 値の範囲は0〜5です。
  周囲光	周囲光の効果は、影を作らずにすべてのオブジェクトを均一に照らすことです。 右側のまたはアイコンをクリックして、アンビエントライトシリーズを追加または削除します。 またはアイコンをクリックして、複数の環境光シリーズの配置スタイルを設定します。 アイコンをクリックして、現在選択されているアンビエントライトシリーズの設定コンテンツをコピーし、同じ設定のアンビエントライトシリーズスタイルを追加します。 色: シリーズの周囲光の色。 強度: 周囲光の強度。 有効な値: 0〜10。 重要 モデル材料のメタルネスが1の場合、コンポーネント全体の光源が周囲光のみの場合、モデル表示は完全に黒になります。
  平行ライト	指向性ライトは、影を生成するために設定できる唯一の光源であり、指向性ライトの向き (ターゲットポイント) は、デフォルトでモデルの原点です。 右側のまたはアイコンをクリックして、指向性ライトシリーズを追加または削除します。 またはアイコンをクリックして、複数の指向性ライトシリーズの配置スタイルを設定します。 アイコンをクリックして、現在選択されているパラレルライトシリーズ構成をコピーし、同じ構成のパラレルライトシリーズを追加します。 色: シリーズの平行光の色。 強度: 平行ビームの強度。 有効な値: 0〜10。 位置: X、Y、Z方向の平行ビームの位置。
  投影面	左側のアイコンをクリックし、スイッチをオンにして投影平面の効果を設定します。これを使用して、モデルの影の平面を表示できます。 シャドウが表示されるのは、指向性ライトの設定項目がオンになって設定され、[モデル] > [レンダリング] > [シャドウ設定] > [シャドウの出力] の設定項目がオンになって投影平面の設定項目が有効になる場合のみです。 エッジフェード: スライダーをドラッグして、影をフェードアウトします。 有効な値: 0〜10。 高さ: スライダーをドラッグして、影の高さを設定します。 有効な値: -5〜5。 サイズ: スライダーをドラッグして、影のサイズを設定します。 有効な値: 1 ~ 10。 不透明度値: スライダーをドラッグして、影の不透明度値を設定します。 値の範囲は0から1です。

• 後処理: 後処理は、フルスクリーン効果の一種であり、デジタル画像処理技術と組み合わせて、フィルタの効果と同様に、再処理前に画面出力をレンダリングし、視覚効果を改善します。

  パラメーター	説明
  アンチエイリアシングタイプ	デフォルトでは、モデルビューアのアンチエイリアシングタイプはFXAAメソッドです。 SSAAメソッドを選択することもできます。 しかし、SSAA法のコストはFXAA法のコストよりもはるかに高く、コンピュータの性能は特に優れていません。 メソッドを選択しないことを推奨します。
  ケラレをシャープにする	ケラレの鮮明化は、画像の鮮明化とミラーのめまいを組み合わせた効果後の設定項目です。 ミラーとシャープの粒子の適切なめまいは、画像に映画のような質感を提示させます。 シャープビネットの左側のアイコンをクリックして、設定項目をオンにします。 シャープネス: スライダーをドラッグしてシャープネス値を調整します。 値が大きいほど、イメージはシャープになります。 ビネット半径: スライダーをドラッグして、ビネット半径の値を調整します。 値が大きいほど、ビネット半径は大きく、ビネットは小さくなります。 ビネットの柔らかさ: スライダーをドラッグして、ビネットの柔らかさの値を調整します。 値が大きいほど、ビネット遷移効果はより明白になる。 粒度: スライダーをドラッグして粒度を調整します。 値が大きいほど粒状性が高いことを示す。
  SSR	SSR、またはスクリーン空間反射は、光とシーンオブジェクト間の相互作用をシミュレートすることによって形成される反射であり、微妙な効果を生み出す可能性があります。 平面が滑らかであるほど、効果はより明確になります。 SSRの左側にあるアイコンをクリックして、設定項目スイッチをオンにします。 反射範囲: スライダーをドラッグして、反射範囲の値を調整します。 値が大きいほど、範囲が大きく、反射品質が低い。 光のステップ数: スライダーをドラッグして、反射する光のステップ数を調整します。 数値が大きいほど、反射品質が高くなり、計算オーバーヘッドが高くなります。 ライトステップサイズ: スライダーをドラッグして、反射光のステップサイズを調整します。 値が大きいほど、光が届くシーンが広くなります。 反射面の光沢度: スライダーをドラッグして、反射面の光沢を調整します。 値が大きいほど、表面が滑らかで反射画像が鮮明であることを示す。 ぼかし度: スライダーをドラッグして、反射のぼかし度を調整します。 値が大きいほど、画像はよりぼやけている。
  AOシャドウ	AOシャドウは、各ピクセルとその隣接ピクセルの情報を介して画面の周囲光の遮蔽効果であり、相互の遮蔽関係が計算され、エッジ輪郭とギャップのシャドウの明暗効果が強化されます。画像の三次元感覚を高める効果を達成する。 AOシャドウの左側にあるアイコンをクリックして、設定項目のスイッチをオンにします。 オフセット: スライダーをドラッグして、AOシャドウのオフセットを調整します。 値が大きいほど、影のオフセットは大きくなります。 AO強度: スライダーをドラッグしてAO強度値を調整し、コントラストを指数関数的に調整します。 シャープネス: スライダーをドラッグしてシャープネスを調整します。 値が大きいほど、値はシャープになります。 AO半径: スライダーをドラッグして、AO半径の値を調整します。 値が大きいほど、範囲は大きくなります。 ぼかしの強さ: スライダーをドラッグして、AOシャドウのぼかしの強さを調整します。 値が大きいほど、影が滑らかでオーバーヘッドが高いことを示します。
  レンズぼかし	レンズをぼかしに設定して、画像ぼかし効果を生成します。 レンズぼかしの左側にあるアイコンをクリックして、設定項目を開きます。 ぼかし度: スライダーをドラッグして、ショットのぼかし度を調整します。 値が大きいほど、画像はよりぼやけている。 絞りサイズ: スライダーをドラッグして、ぼかし絞りの値を調整します。 値が小さいほど、画像はより鮮明になります。 焦点距離: スライダーをドラッグして、レンズの焦点距離を調整します。 値が大きいほど、画像はよりぼやけている。 フォーカスサイズ: スライダーをドラッグして、レンズのフォーカスサイズを調整します。 値が大きいほど、画像はよりぼやけている。
  グロー	グローを設定すると、画像の明暗のコントラストを高めることができ、画像の明るさが高いほど、外側の光の効果が生成されます。 グローの左側にあるアイコンをクリックして、設定項目を開きます。 マスク: スイッチをオンにすると、マスクがモデル範囲を超えたときに外側のグロー効果を設定できます。 強度: スライダーをドラッグして、グローの強度を調整します。 強度が大きいほど、グローはより外側になります。 明るさ: スライダーをドラッグして、輝きの明るさを調整します。 値が大きいほど、輝きは明るくなります。 明るさのしきい値: スライダーをドラッグして、グローの明るさのしきい値を調整します。 値が大きいほど、グロー効果は目立たなくなります。 スムージング幅: スライダーをドラッグして、グロースムージングの幅を調整します。 幅が大きいほど、グロー遷移はより滑らかになる。 スポット半径: スライダーをドラッグしてスポット半径を調整します。 値が大きいほど、スポット効果はより明白になります。
  モーションブラー	高速モーションをシミュレートするために使用できるオブジェクトぼかしドラッグ効果にモーションブラーを設定します。 モーションブラーの左側にあるアイコンをクリックして、設定項目を開きます。 ぼかし度: スライダーをドラッグしてモーションブラー度を調整します。 値が大きいほど、モーションブラーの度合いがぼやけていることを示す。 モーションレート: スライダーをドラッグしてモーションレートを調整します。 値が大きいほど、値はぼやけています。
  カラー補正	色補正スタイルを設定して、最終的な出力画像の色相、彩度、明るさ、コントラストを調整します。 色合い: スライダーをドラッグして色合いの値を調整します。 値が大きいほど、色合いは暖かくなります。 彩度: スライダーをドラッグして彩度値を調整します。 値が小さいほど彩度が高いことを示す。 明るさ: スライダーをドラッグして明るさの値を調整します。 値が大きいほど、画面は明るくなります。 コントラスト: スライダーをドラッグしてコントラストの値を調整します。 値が大きいほど、画像のコントラストが高くなる。

[データ] タブ

url: モデルのURLリンク。

[インタラクション] タブ

このウィジェットはインタラクションイベントをサポートしていません。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. 左上隅のアイコンをクリックします。

3. ブループリントエディターで、[ノードのインポート] ペインで [モデルビューアー] コンポーネントをクリックします。 次の図に示すように、キャンバス上でモデルビューアのパラメータを表示できます。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインターフェイス要求が失敗した場合	データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

   • Action

     Action	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     キャンバスサイズ変更	キャンバスのサイズが変わります。 アクションの入力データは番号タイプです。
     アニメーション再生	アニメーションが再生されます。 モーションの入力データは、オブジェクトタイプと文字列タイプです。
     アニメーション停止	アニメーションが停止します。 モーションの入力データは、オブジェクトタイプと文字列タイプです。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットを表示します。 参照データの例を次に示します。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     非表示	次の例は、ウィジェットを非表示にする方法を示しています。 return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     暗黙の状態への切り替え	ウィジェットを表示するか非表示にするかを指定します。 参照データの例を次に示します。 return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     中国モバイル	ウィジェットを指定した場所に移動します。 参照データの例を次に示します。 return { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } };