glTFとしてエクスポートできる要素

  • glTFエクスポート
  • 面の表示で片面/両面を指定してレンダリング
  • PBRマテリアルの透過設定


ver.21のglTFエクスポートを使って、glTFで表現できる内容を確認していきます。

両面/片面の表現

両面/片面はglTFでは「doubleSided」と呼ばれるパラメータになります。
これは面が裏を向いている場合に表示するかどうか、のオプションになります。
マテリアルごとに割り当てるパラメータです。

キッチンシーンで使っていた「リンゴ」のアセットを形状として読み込みました。

これは3つのマテリアル「リンゴの枝」「リンゴ」「リンゴの葉」を使用しています。
すべてで「PBRマテリアル」が割り当てられています。
なお、葉は両面表示にする必要がありますが、
メインメニューの「ファイル」-「エクスポート」-「glTF(gltf/glb)」を選択し、そのままglTFファイルをエクスポートします。
glb形式でエクスポートしました。

これをglTF Viewer ( https://gltf-viewer.donmccurdy.com/ )で表示しました。
glTFの確認はこのglTF Viewerがよく使われます。

このときPBRマテリアルとしてのパラメータはすべてShade3Dと同じものが与えられ、同じ表示結果になります。
マテリアルの調整を何も行わない場合は、glTFエクスポートはすべて「片面」として表現されます。

エクスポートしたglbファイルを、Shade3Dの新規シーンにインポートしてマテリアルを比較します。
以下の画像は左が元のPBRマテリアル、右が一度glTFエクスポートして再びインポートしたときのPBRマテリアルです。

渡されるパラメータやテクスチャはまったく同じものになります。
これは、glTFエクスポート時にはパラメータの変更を行わずにそのままglTFに渡していることを意味します。
これはPBRマテリアルを採用している大きな利点です。
「透明度」が「不透明」となっているところだけ異なります。
この部分は後述する「PBRマテリアルの透過設定」で解説します。

両面表示の指定

このリンゴの形状は、葉のテクスチャは初期状態のままではglTFエクスポートすると片面表示となります。
この指定を変更するには表面材質ウィンドウの「その他」ボタンを押し、
「その他の表面材質属性」ウィンドウで「表示面」を「両面」にします。

この機能は、Shade3D ver.21で追加された機能です。
Basic/Standard/Professionalの全グレードで使用できます。
透視図でのプレビュー/レンダリングで従来は両面が表現されていました。
ここで「片面」を選択すると、裏を向いている面はプレビューやレンダリングに反映されなくなります。
以下は葉のマテリアルを片面表示にしました。
左が透視図のプレビュー、右がクイックレンダリングです。

葉は下から見るとレンダリングされないのを確認できます。

さて、再び「表示面」を「両面」にしてglTF(glb)エクスポートします。
エクスポートしたglbファイルをglTF Viewerで見ると、以下のように葉の裏も見えるようになりました。

このglbファイルをShade3Dの新規シーンにインポートすると、
「その他の表面材質属性」ウィンドウで「表示面」を「両面」となっているのを確認できます。

PBRマテリアルの透過設定


glTFでは、マテリアルは不透明(OPAQUEと呼ばれます)以外にいくつかの属性を持ちます。

この属性はglTFで「アルファモード(alphaMode)」と呼ばれているものです。

種類(Shade3Dでの透過の種類) glTFでの名称
透明度
αブレンド BLEND
αマスク MASK
不透明 OPAQUE

この「透過の種類」がPBRマテリアルの「透明度」のポップアップメニューとして選択できる項目になります。
「透明度」は1.0に近づくと透明になります。また「屈折」の影響を受けます。
この「透明度」「屈折」はglTFの標準機能では存在しません。
そのため、この2つのパラメータはglTFには渡すことができない要素となります。

不透明 (OPAQUE)

透過がないマテリアルの場合は、glTFでは不透明(OPAQUE)を指定しこれが省略した際の初期値になります。
glTFインポート時にPBRマテリアルが「不透明」となるのは、これが反映されていることになります。

αマスク (MASK)

ここでは、「おろし金」をglTFエクスポートします。

この形状は2つのマテリアル「おろし金_取っ手」「おろし金」で構成されています。
「おろし金」部は厚みのない形状のため、「表示面」を「両面」にして両面表示の指定に変更します。

「透明度」のポップアップメニューを「αマスク」にし、スライダを0.5に変更します。
テクスチャのピクセル(0.0 – 1.0)がスライダ値より小さい場合は、そのピクセルは表示されません。
これはglTFの「alphaCutoff」の値になります。
これにより、テクスチャのトリミングが行われます。
マッピングでは「イメージ/透明度」を指定すると、それがマスク用のテクスチャとして採用されます。

パターンの属性名は「透明度」の指定ですが、「αマスク」時は「不透明マスク」の意味合いになります。

この場合は黒色が透過/白色が不透過、となります。
また、Shade3Dのレンダリングでは「αマスク」を指定した場合は、透過部の屈折は行われません。

glTFエクスポートを行い、glTF Viewerで見ると以下のようになりました。

αブレンド (BLEND)

「αブレンド」は半透明の表現で使用されます。
半透明表現は、リアルタイム環境では面ごとの描画で奥から重ねていく処理を行います。
それだけ手順が増え制限もあるため、苦手としている表現でもあります。
半透明がある場合は「リアルタイム向けにある程度調整」する必要があります。
ここでは、例として「計量カップ」をglTFにエクスポートします。

上画像は、PBRマテリアルとして「透明度」「屈折」の指定を行っています。
2つのマテリアル「計量カップ」「計量カップ_ラベル」を割り当てています。

まず、両方のマテリアルで「表示面」を「両面」にして両面表示の指定に変更しました。

PBRマテリアル「計量カップ」は以下のように変更しました。

映り込みを強めるため「メタリック」を0.4に変更、
半透明にするため「αブレンド」0.1に変更しました。
αブレンドは0.0に近づくほど透明になり、1.0に近づくと不透明になります。
また、「αブレンド」時は屈折は使用されません。

次に、PBRマテリアル「計量カップ_ラベル」を調整します。
目盛りのラベルは計量カップの面から少し離した位置に浮かせて配置しています。
以下の赤色の箇所がラベルの面です。

ベースカラーを赤色にし、「αブレンド」1.0に変更しました。
また、マッピングとして「イメージ/透明度」を追加しました。
テクスチャイメージは白色のピクセルを非透過、黒色のピクセルを透過としています。
これは目盛りが描かれたテクスチャになります。

Shade3D上でプレビューレンダリングすると以下のようになりました。

屈折がある場合と比較すると物足りなさを感じます。
これは、リアルタイム環境に渡す際の妥協となります。

glTFエクスポートを行い、glTF Viewerで見ると以下のようになりました。

今回はマテリアルでの両面/片面の指定、PBRマテリアルの透過設定について説明しました。
PBRマテリアルを使うことで、glTF経由で同じマテリアルを表現できることを確認できました。
次回は、PBRマテリアルをglTFに渡す際の各パラメータ(ベースカラー、メタリック、ラフネス、法線マップ、オクルージョンなど)の表現を説明していく予定です。

カテゴリー: glTFの活用