【Blender/glTF】BlenderのglTF出力でtangent情報が出ない原因と解決法

概要

注：筆者は3D関連の経験が半年程度 かつ アーティストではないため、Blenderに関しての知識が浅い。

glTFから読み込んだ3Dモデルで法線マップを使った描画をする処理を書いていると、tangent情報が正しく取得できないことがあった。
エクスポート時に「ジオメトリ ＞ タンジェント」を有効にしてるのに、うまく行かない。

これを解決する手段を、忘備を兼ねて記しておく。
※ Blender 2.83.9 と 2.93.4にて確認

シェーダー、glTFパーサ、そのほかライブラリソースなど一通り疑った。どこにも問題はない。
そこで、glTFファイルでの記述を見に行くと…

**略**
"meshes" : [
        {
            "name" : "Cylinder",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
**略**

無いやんけ、"TANGENT"！！！！

あと、シェーダー側でUVから良い感じにtangent算出する方法もあるらしいけど、今回はそれは無しという方向で……

原因と解決法

原因

GitHubのIssueにあった。
https://github.com/KhronosGroup/glTF-Blender-IO/issues/172

For calc_tangents to work, the mesh needs be all tris/quads, and there has to be a UVMap.

つまり…

• すべてのメッシュが３角or４角である(n-gonはダメ)
• UVマップ情報が存在する必要がある

この２点が必要だそうだ。

解決法１：n-gonの撲滅

前者は分かりやすい。
対策は、面をすべて三角/四角化するだけなので比較的簡単である。

「Ctrl + T」で自動で面を三角化するのが一番手っ取り早い。

もし、n-gonな面を放射状(ホールケーキを切り分ける感じ)に三角メッシュが生成されるように変換したければ、
面を差し込み & そこで生まれた頂点を中央にマージしてあげるといいだろう。

ちなみに、n-gonのみを選択するには、「選択 ＞ 特徴で全選択 ＞ 頂点数で選択」で、頂点数を 4、タイプを大きいにするとよい。
(n-gonを探し出して撲滅する際に役立つ)

解決法２：UVマップ情報を追加

さて、後者のUVマップ情報についてだ。
該当のオブジェクトについて、「オブジェクトデータプロパティ ＞ UVマップ」を確認してみよう。

何もない！！！
これが原因。 「+」ボタンを押してUVマップを追加してあげよう。
筆者の場合は、ネット上から拾った素材がこの状態で長時間悩まされた。

参考にしたサイト

Tangent are not exported · Issue #172 · KhronosGroup/glTF-Blender-IO - https://github.com/KhronosGroup/glTF-Blender-IO/issues/172
Blender での n ゴンの使い方 - https://dskjal.com/blender/how-to-use-ngon.html