Marmoset Toolbag で3Dモデルをウェブサイト上で表示させる【3D Viewer】

Tutorial
スポンサーリンク

Marmoset Toolbagは作成したシーンを3Dビューワーとしてもエクスポートすることができます。
そのエクスポートした3Dシーンを自身のウェブサイトに埋め込む方法をご紹介します。

ウェブサイトに埋め込むことで、簡単に人に見せることができますし、PCやスマホさえあれば誰でも閲覧することができます。

埋め込むやり方としては大まかに2つ

  • WordPressのプラグインを使う方法
  • HTMLでiframeなどを用いて埋め込む方法

それぞれ解説していきます。

実際に埋め込んだものはこちらになります。

本記事ではMarmoset Toolbag3の画面で説明しますが、最新のMarmoset Toolbag4でも設定は同じでした。(2021年2月現在)

スポンサーリンク

Marmoset Toolbag とは?

実際の解説の前にMarmoset Toolbag(以下、MT)について簡単に紹介します。

大まかなMTの特徴としては
・リアルタイムレンダリング
・ベイク
・3Dビューワー

があります。

リアルタイムレンダリング

このソフトのメインの機能としては、リアルタイムのレンダリングソフトです。

かなり快適に高品質なリアルタイムレンダリングが可能です。
アニメーションを付けることも可能です。

静止画での書き出し、動画での書き出しともに対応しています。

最新のMarmoset Toolbag4ではGPUでのレイトレーシングにも対応しました。

テクスチャベイク

MTのテクスチャベイクは非常に優秀です。
強みとしては
・ベイクできるテクスチャの豊富さ
・Cageの調整のしやすさ

です。

筆者自身、基本的にSubstance Painterでベイクすることがほとんどですが、モデル同士が近すぎてうまくベイクできない (Cageを調整したい) 時やはっきりとしたCarvature mapがほしいときなどに使用します。
あまり使いませんがBent Normalもベイクすることができます。

3Dビューワーとしての機能

作成した3Dシーンは3Dビューワーとしてもエクスポートすることができます。
Marmoset Viwerというスタンドアローンのアプリがあります。
こちらは無料なので、Marmoset ToolbagのライセンスがないPCでも、インターネット環境がない場所でも3Dシーンを表示することができます。

Marmoset Viewer - Interactive 3D Renders In Your Web Browser
Marmoset Viewer Real-Time Interactive 3D on the Web art by Antoine Dupuis, concept by Fino Feng Interactive 3D Portfolio Viewer is a physically-b...

また、エクスポートしたシーンは今回の本題であるウェブサイトへの埋め込みも可能です。

スポンサーリンク

Webで使える形式でエクスポートする

前置きが長くなりましたが、本題です。
まずWebで使える形式でエクスポートする方法です。
上記のスタンドアローンアプリで使用する際もやり方は同じです。

シーンが完成したら
FIle → Export → Marmoset Viewer
をクリックするとウィンドウが開きます。

保存するディレクトリを指定します。
TitleやAuthorなどは空でも問題ありません。
アニメーションがある場合は「Export Animations」にを入れることで、アニメーションも含めることができます。

Write HTMLにチェックを入れることを忘れないようにしてください。(WordPressプラグインを使う場合は不要)
解像度なども指定することができます。
ただ、解像度やAuto-Playなどは、後ほどHTMLを書き換えて、変更することも可能です。

諸々の設定をし「Export」を押すと、.mview.html形式のファイルが書き出されます。
.mview は前述のMarmoset Viewerで開くことも可能です。

WordPressのプラグインで埋め込む方法

WordPressを使ったサイト限定ですが、簡単にサイトに埋め込めるプラグインが公開されています。

Marmoset Viewer
Marmoset Toolbag Web Viewer

更新が3年前で止まっているので、使用する際はご注意ください!(2021/2 現在)

インストール、アップロード

通常通り、プラグインをインストールし、有効にします。

設定

プラグインを有効にすると、サイドバーにMarmoset Viwerが表示され、解像度などを設定することができます。

レスポシブルに対応するように%で指定することも可能です。

記事に埋め込む

プラグインを有効にすると「Insert Marmoset Toolbag2 mview file」というMarmosetのアイコンが表示されます。

Pick Mview Fileをクリックし、書き出した .mviewファイルをアップロードします。
Publishをクリックするとショートコードで生成されます。

ここでオートスタートやUIの表示、非表示を設定することも可能です。

結局はショートコードでURLを指定しているので、自分の(サーバーの)好きな場所にmviewを置いて、指定しても問題ありません。

スポンサーリンク

iframeで埋め込む方法

次にHTMLでiframeで埋め込む方法です。
こちらはWordpress関係なく、埋め込むことが可能です。

サーバーにファイルをアップロード

エクスポートした .html と .mview をサーバーの任意の場所にアップします。
(ここではtest.html と test.mviewとします)
アップした場所に応じて、test.htmlの10行目を絶対パスまたは相対パスで test.mviewを参照できるよう 書き換えます。

marmoset.embed( './test.mview', { width: 1280, height: 720, autoStart: true, fullFrame: false, pagePreset: false } );

同じ階層にtest.mviewをアップした例

この時点でtest.htmlにアクセスすることで、Marmoset Viewerが表示されたページを表示することができます。

エクスポート時に解像度を設定しましたが、HTMLで直接書き換えても問題ありません。

iframeの使用

iframeは、指定したURLをインラインフレーム表示できるHTMLタグです。
そのため、iframeを使うことで先ほどのtest.htmlをウェブページや記事内で表示することができます。

下記がiframeを使用した一例です。

<iframe src="https://actimeth.com/contents/test.html" width="100%" height="520" allow=”fullscreen”></iframe>
allow=”fullscreen”

で全画面表示にしておくのがおすすめです。

WordPressでもカスタムHTMLなど使うことで同じように使用することができます。

他のWebベースの3Dビューワー

Web(ページ)上で3Dモデルを表示させたい場合にSketchfabという便利なサイト、サービスもあります。

無料で使うことができ、サーバーも必要ないのでこちらの方が簡単です。
ただ、無料のアカウントだとアップロードできるファイルサイズに制限があり、割とテクスチャサイズを下げたりしないといけない場合が多いです。

Log in to your Sketchfab account
Use Sketchfab to publish, share and embed interactive 3D files. Discover and download thousands of 3D models from games, cultural heritage, architecture, design...

こちらはSketchfabにモデルをアップロードすることで、Sketchfabのサイト上で閲覧することもできますし、埋め込みタグを生成することもできます。

各ビューのタイトルの下の</>Embed から生成することができます。

こちらもiframeを使っているんですけどね(笑)

まとめ

Marmoset Toolbagで作成したシーンをWebページに埋め込む方法をご紹介しました。
全然難しくないので、気軽にできるかと思います。

ちなみに冒頭に埋め込んであるMarmoset Viewはプラグインを使わずに後者のやり方で埋め込んでいます。

ポートフォリオサイトに埋め込んで実際にモデルを表示させるのにも使えますし、仕事でちょっと3Dで見せたいときなどにも役立つかと思います。
ワイヤーフレームやテクスチャも見れるので、見る側からしたら嬉しいです笑
自分のサイトを持っていない方はArt Stationにも埋め込むことができます。

Sketchfabの方が無料で簡単に使うことができますが、クオリティと容量面で私はMarmosetの方が好きです。

また、今回例で使用したおいなりさんは、フォトグラメトリベースで作成したもので、Noteの方で簡単なやり方を紹介しているので、良ければご覧ください。

Reality Captureの使い方とコツ【Photogrammetry】|Syuya(向井 秀哉)
しゅーやと申します。 フォトグラメトリー ソフトの Reality Captureの使い方を簡単に書いていきます。 ~このチュートリアルの内容~ 写真を撮って、Reality Capture(以下、RC)で3D化するまでのやり方と ちょっとした撮影のコツを書いています。 細かな機能の説明等は省いており Realit...
タイトルとURLをコピーしました