スマホにも対応するWebMMDモデルビューアーを作りました

投稿日: 2024/02/01

この記事の最新版は以下のnoteをご覧ください! https://note.com/ssmz/n/nd3e741a07d23

このサイトを作ったssmzと申します。

僕は以前よりスマホでMMDモデルを鑑賞したいなと思い、そういうことがアプリやサイトを探していたのですが、iOSアプリの方は全くと言って良いほど見つからない状況でした。

Web上でMMDモデルを表示させることができるサイトもいくつか存在しますが、自分がやりたいことが出来るところは無いように思いました。

一度アプリを探すのを諦めましたが、その後しばらくして再熱してしまい、「もういっそのこと自分で作るか」とこのサイトを作成しました。

最初は自分用に作っていたのですが、自分と似たように思っている人が他にもいるんじゃないかと思い、このサイトを「doll room」と名付けて公開することにしました。

doll roomのコンセプト

1. モデル鑑賞に特化している

他にもWeb上でMMDモデルを表示させてモーションを適用してダンスさせることが出来るサイトはいくつかあります。

このサイトは基本的に個人的な鑑賞を目的としたサービスです。

鑑賞に便利な機能を、充実させていこうと思っていますが、投稿用の動画作成には不向きと思います。

2. スマホになるべく対応した作りにしている

元々このサイトを立ち上げた経緯が「スマホでMMDモデルを操作、鑑賞したい」というものだったので、とにかく出来る限りスマホで使いやすいように調節しています。

古いスマホ(僕はiPhoneを使っています)だからかわかりませんが、そのままアップロードするとクラッシュしてしまうモデルもあったので、クラッシュさせない低表現モードという工夫を組み込んでいます。

3. 専門知識がなくても直感的に操作できるように

MMDモデル(PMX形式ファイル)を読み込んで操作するには、それなりの知識が必要です。

面倒な部分は全部このサイトに任せて、ユーザーは直感的にやりたいことを実現できるように作っています。

※僕自身はpmxファイルのことを全てを把握しているわけではありません。というか初心者レベルです。

dollroomでできること

基本機能

日々機能アップデートを進めていますが、現時点では以下のことができます。

  • モデルのモーフ切り替え
  • モデルのマテリアル(服やアクセサリなどの素材)の表示/非表示
  • モデルのマテリアルの透明度変更
  • モーション再生
  • ポーズ設定
  • 背景画像の設定
  • モデルの色合い変更
  • メインライトの明るさ変更

詳しくは使い方をご覧ください。

アップロードしたモデルファイルやモーションファイルはブラウザ上に自動保存

一回アップロードしたモデルやモーションをサイトを開き直すたびにアップロードし直すのはダルいので、ブラウザ上に自動保存されるようにしました。

サーバーなどに保存することはせず、あくまでご自身が使っているブラウザ上に保存されます。

これにより、一度アップしたら次からは自動的にモデルやモーションファイルを読み込むようになります。

とりあえず使ってみる

トップページからモデルをアップして使ってみてください。