トリケラトプスを正本画像からSVGへ。36点では再現できなかった形が近づいた理由

公開日 · 更新日 · 4 MIN READ · 理解の記録

RECORD / 2026

リアルなトリケラトプスを横スクロール画面で歩かせたい。骨格と四足歩行は作れました。ところが、歩行計算が安定しても、見た目は正本画像から遠いままでした。

突破口は、点を増やし続けることではありませんでした。骨格・外形・陰影を別の仕事として分けたことです。

骨格、外形、陰影を分けるトリケラトプスSVGの仕組み

骨格は動かす。外形は似せる。陰影は立体感を作る。

36点ですべてを作ろうとした失敗

歩行リグには36個の骨格制御点があります。肩、肘、手首、指先、股関節、膝、足首、頭、尾など、身体を動かすための点です。

36点は歩行制御には使えます。しかし、尻尾の曲線、背中の隆起、腹の丸み、フリル、くちばし、足先まで描くには足りません。絵を細かくするため骨格まで増やすと、関節制限や骨長検査も複雑になります。

つまり問題は「36点が少ない」ことではなく、動かす点に、絵を描く仕事まで背負わせたことでした。

正本画像を測らず、目測で作っていた

形態の正本にした横向きの低ポリゴントリケラトプス

今回の形態の正本。生成画像を、横から見たシルエットと明暗の基準にしました。

初期の尻尾は、正本画像から輪郭を取得せず、画面を見ながら数点の座標を置いていました。そのため、大きな三角形のようになり、細く伸びる上面と、骨盤から自然につながる下面を失いました。

原因は、点数不足よりも正本の線を測っていなかったことです。

骨格・外形・陰影を分けた

  • 骨格制御点36点:歩行と関節を担当
  • 外形点125点:正本のシルエットを担当
  • 表面パネル236領域:色と立体感を担当
  • 描画専用7,974点:画面へ面を描くためだけに使用

骨格36点から外形点と表面点へ重みを割り当てます。歩行時に直接計算するのは骨格です。外形と表面は、その骨格の変化へ追従します。

この分離により、表示を細かくしても、歩行のIKや骨長検査を複雑にせずに済みます。

正本から全身の外周を取得する

正本画像をHSV色空間へ変換し、彩度と明るさを使って白い背景と茶色い恐竜を分けました。

mask = saturation > 28
       and brightness < 248

最大の連続領域を全身の外周として取得し、曲がり方が大きく変わる場所を残しながら125点へ簡略化しました。これで尻尾、背中、腹、脚の間、フリル、角、口先が、目測ではなく正本由来の座標になります。

色の境界から表面パネルを作る

正本画像の外形と色面を多角形で再現したトリケラトプス

外形の内側へ色面を重ねた状態。白い隙間は作らず、明暗差で面の境界を見せます。

外形だけでは立体感が足りません。正本では、背中、肩、腹、脚、頬、フリルの明暗境界が身体の丸みと重量感を作っています。

そこでLab色空間で色を12種類へ整理し、同じ色がつながった領域を抽出しました。小さなノイズを除き、領域の外周を多角形へ変換します。全身外形を下地に敷くことで、面の間に白い隙間が出る問題も防ぎました。

  1. 恐竜部分を取得する
  2. 色を12種類へ整理する
  3. 同色の連続領域を抽出する
  4. 小さなノイズを除く
  5. 領域を多角形へ変換する
  6. 全身外形を下地にして隙間を防ぐ

なぜ急に正本へ近づいたのか

成功した理由は、数学を複雑にしたからではありません。正本画像が持つ情報を、役割ごとに使ったからです。

  • 骨格は歩行だけを担当する
  • 外周はシルエットを担当する
  • 色境界は立体感を担当する
  • 表示点は増やしても、動作制御点は増やさない

必要なのは点を増やすことではなく、その点が骨格、外形、陰影のどれを担当するのか決めることだった。

36点は少なすぎたのではありません。36点へ、絵を描く仕事まで背負わせていたことが問題でした。

現在の制作値

用途数値
骨格制御点36点
正本外周125点
色領域236領域
描画専用点7,974点
色量子化12色
歩行周期1,800ms
接地率78%
歩幅60px

これらは今回の制作モデルの設定値です。トリケラトプスの生物学的な測定値ではありません。

骨格や歩行の研究根拠は、先に公開したトリケラトプスはどう動いた?骨格・数学・プログラムで歩き方を考えるで、化石の事実・研究上の推定・制作上の仮定を分けて整理しています。

次は皮膚を歩行へ接続する

次は236の表面領域を、頭、フリル、胸郭、骨盤、尾、四脚へ分けます。支持中の指先、骨長、歩行周期は変えません。静止した正本形態を保ったまま、既存の四足歩行へ皮膚を追従させます。

トリケラトプスの形態比較ツールを開く

コメントを残す