HPS 作ったよ

Head Phone Sim for Live2D Modeling と題して、Codepen上で 下のアプリを制作しました。
大抵のブラウザで動作します。

See the Pen Head Phone Sim for Live2D Modeling by yprops (@yprops) on CodePen.

こんな事がしたいよ

Live2Dのモデリングで大変な事のひとつが、ヘッドホンやツノなど、正確さの求められるソリッドなパーツの回転変形。
その作業の下絵となる３Dモックを簡便に作れたら便利なのでは！という思いつきを形にしました。

想定する作業フロー

  1. アバターデザインを下絵として追加する。[Function - Add Overlay]
  2. プリミティブ形状を追加、デザインに合わせて変形。 [Function - Add Primitive]
  3. 頭部を回転させて欲しい角度のスクリーンショットを撮る
  4. スクショを Live2D Cubism Editor に下絵として配置し、モデリングの助けとする

スクショかよ！と思われたら申し訳ないですが、とにかくコアな機能だけ実装しました。

操作解説

右のUIを上から順に解説していきます。

Assets - 表示アセット一覧

  • Head - サンプル頭部モデル

    • AngleX,Y,Z(L2D) -
      Live2Dのテンプレートに沿った回転表記。
      頭部のみ、5°のステップで回転します。

    • Opacity - 透明度変更

  • [その他プリミティブ形状]

    • Remove Asset - このアセットを削除
    • Angle, Position, Scale - 形状・位置編集
    • Material - 見た目変更。金属 or ワイヤフレーム

Functions - 機能一覧

  • CameraType - カメラタイプ選択

    • Orthographic - 正投影法。パースなし

    • Perspective - 一点透視法。パースあり
      一点透視カメラは現在細かい設定ができません。
      調整したい方はForkしての編集をお勧めします。

  • CameraView - 表示サイズ。≒ズーム

  • EulerOrder(L2D)
    オイラー角計算順の選択。頭部の回転のクセが変わります。
    このアプリで最も重要な機能です。詳細は別ページに記述しました。
    例えば公式のひよりちゃんモデルの動きには ZXY が最もフィットします。

  • Add Primitive - プリミティブ形状アセットを追加します。

  • Add Overlay - 下絵アセットを追加します。

  • Save Settings - 下絵以外の状態をJSONファイルに保存します。

  • Load Settings - JSONファイルに基づいて状態を復帰します。

Credits

※ このアプリはLive2Dモデリング作業の省力化を目指して制作したものであり、3D的に正確なモデルでなければならないなどの主張をするものではありません。
※ Fork、改造等ご自由に。ご一報いただけると喜びます。