viewer-modelでWebARやってみる #HTML

昨日は@suzukihikaruのサイトと資料がちょっとおしゃれになるサービス３選でした。
配色に悩みがちなのでTrending color palettesを使ってみようと思います😊

MYJLabアドベントカレンダー11日目の記事です。
今回はviewer-modelを使ってWebAR(モデルを表示するまで)をやってみました。

WebARとは

アプリをインストールせず、WebサイトでARを使うことができるサービスのことです。お手軽ARという感じですね。

WebARの作成方法

AR.js
AR Quick Look
model-viewer(Scene Viewer)

上記以外にもあります。
今回はmodel-viewer(Scene Viewer)を使って作りたいと思います

model-viewerとは

HTMLに3Dモデルを埋め込むためのコンポーネント名です。model-viewerを使うことでARビューアーが起動しAR表示ができます。OS問わずに利用可能です。model-viewerはマーカーレスのARが作成できます。

今回はiOS対応のマーカーレスWebARを作っていきます

作成手順

3Dモデル作成
HTMLファイルに組み込み
GigHub Pagesにアップ

1. 3Dモデル作成

3Dモデルは自分で作成するか、他者が作成し公開しているものを使ってもOKです。今回は自分で作成します。他者が作成したものを使用するときは著作表示の要否、再配布の可否を必ず確認してください。

1.1 Blenderで3Dモデルを作成する

Blenderを使ってキャラクターを作成します。
様々なオブジェクトを使って胴体を作りました。さらに色もつけてモデルは完成です。

モデルが完成したらやることは2つ

3Dモデルをusdz形式で保存
3Dモデルの全体画像を保存

3Dモデルをusdz形式で保存

Blenderではusdz形式で保存ができないので、Xcodeを使います。
一度Blenderでobjファイルで保存し、そのobjファイルをXcodeで読み込んでusdz形式で保存します。

objファイルで保存

画面左上の「ファイル」から「エクスポート」で「Wavefront(.obj)」を選択します。

最後に右下の「OBJをエクスポート」を押してファイルを作成します。

usdz形式で保存

usdz変換ツールがありますが、うまくいかなかったので手作業で行います。Xcodeでobjファイルを開きます。

開くと何も無いように見えますが、真ん中あたりに3Dモデルがあります。それをクリックして選択しMatrialsも選択します。

3Dモデルに色がついていないので色を選択します。Emissionプロパティで色を選択して着色します。

ここで3Dモデル作成は終了です

2. HTMLファイルに組み込み

これまでに作成した３DモデルをHTMLファイルに組み込んでいきます

index.html

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- Loads <model-viewer> for modern browsers: -->
        <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
        <!-- Loads <model-viewer> for old browsers like IE11: -->
        <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
        <link rel="stylesheet" type="text/css" href="layout.css">
    </head>

    <body>
        <div class="wrapper">
            <h1>WebAR</h1>
            <figure class="img">
                <model-viewer class="model" preload poster="yellow_san.png" 
                ios-src="yellow_objects.usdz" 
                auto-rotate camera-controls ar alt="yellow">
                </model-viewer>
            </figure>
            <p class="text"></p>
        </div>


    </body>
</html>

layout.css

h1 {
    text-align: center;
    font-size: 1.4rem;
}
.wrapper {
max-width: 640px;
margin: 0 auto;
}
.model {
margin: 0 auto;
max-width: 600px;
height: 400px;
}
img {
max-width: 100%;
}
.text {
padding: 0 1rem;
}

headタグでmodel-viewerを読み込みます

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

次にmodel-viewerタグを使ってモデルを読み込みます。iOS-src属性にusdzファイルのパスを設定します。
preload poster属性ではWebAR開始画面に表示する画像を設定できます。

<model-viewer class="model" preload poster="yellow_san.png" 
                ios-src="yellow_objects.usdz" 
                auto-rotate camera-controls ar alt="yellow">
</model-viewer>

3. GigHub Pagesにアップ

実機で検証してみます。検証するにはhttps環境にアップが必要です。
今回はGithub Pagesにアップしてみます。

コードをGithubにプッシュしてSettingsのPagesから設定をします。
Source部分のBranchをmasterにして保存をするとURLが発行されます。

iPhoneを使って試してみます

できました。
画面上でモデルの拡大縮小、回転もできます。

まとめ

コードを数行書くだけでとてもお手軽にARができちゃいます。model-viewer以外にもWebARができる方法があるのでそちらも試してみたいと思います。

参考文献

https://qiita.com/matsu666/items/fd69a57cee4f131f70cd