glTF形式エクスポートで継ぎ目がガタガタ

Blenderできれいに見えてもエクスポートの過程で変わる

「WebGLで表示できるメッシュは三角面」ということを知らずにBlenderからglTF形式でエクスポートしていました。2つの球体を結合したオブジェクトの継ぎ目が、Blenderではきれいに見えていますが…

Blenderではきれいに見えているメッシュ

オブジェクトをThree.jsで表示すると、思いがけずガタガタになっている部分が発生し滑らかさが崩れています。

glTF Viewerで見るとガタガタ

BlenderとglTFの面を比べてみる

まずBlenderでオブジェクトを作ります。Tesselatorというアドオンを使って四角面、解像度16、細分化0でリメッシュしたオブジェクト。

Tesselatorというアドオンを使って作りました。

glTFにエクスポートしたもの。面が三角になっています。

色をつけて光を当てると継ぎ目がガタガタになっているのがわかります。粗い三角面でリメッシュがかかったみたいな感じです。

継ぎ目の滑らかさを保つにはあと少し手間をかける必要がありそうです。

3d  Blender 

関連記事