XRSNSロゴ

WebARの作り方

XRSNS

無料WebARの作り方

無料WebARの作り方について解説します。既に3Dモデルがあれば数分でWebARやWebVRに対応できます。
無料のソフトCG制作ソフトBlender(ブレンダー)を使用します。(まだ持ってない方は取得してください。)

Blenderを使用 無料WebARの作り方

Blenderで3Dモデルを開く

まず、Blenderを開いて①既に3Dモデルが手持ちにある場合はそのまま3Dモデルを開いてください。
②無い場合は新たにBlenderで簡単な3Dモデルを作成してください。
③Blender自体が、完全に初めてでよく分からない場合は下記を行ってください。


(③の場合は、著作権フリーのモデル「ウサギ (テスト用)」をダウンロードしてから、Blenderで最初の立方体を消して、
上部のファイル→インポート→gltf2.0(.glb/.gltf)を選択して上記のモデルをインポートしてください。)

Blenderで3Dモデルを開く 無料WebARの作り方

3Dモデルの標準位置について

3Dモデルの位置はX軸とY軸が(x:0 y:0)の位置に設定してください。
また、3Dモデルの底部がZ軸の0の地点に接するように設定してください。

オブジェクトトランスフォームを(x:0 y:0 z:0)になるようにすると、WebAR時にも適切な位置に自動配置されます。

3Dモデルの標準位置 無料WebARの作り方

3Dモデルの正面方向について

3Dモデルの正面を下記画像のY軸方向にしてください。
(他に設定されている場合はそちらが優先される可能性がありますので、そちらを確認ください。)

3Dモデルの標準位置 無料WebARの作り方

3Dモデルのサイズについて

3DモデルのBlenderでの大きさがそのまま、WebARやWebVRでの召喚時の大きさになります。
下記画像の場合はX軸方向100cm、Y軸方向50cm、Z軸方向120cmの3Dモデルになり、そのままのサイズで召喚されます。
ECサイト等向けに使用する場合は、特にこのサイズが特に重要なので注意してください。


3Dモデルの表示には透視投影が採用されてます。
(透視投影では近くに位置するものが大きく、遠くに位置するものが小さく描かれ、現実の肉眼での見え方に近くなります。)

3Dモデルのサイズ 無料WebARの作り方

3Dモデルの対応形式と注意点

WebARの各スマートフォンの対応形式は、Android向けは[gltf, glb, vrm]、iOS向けは[usdz]になります。

まずはAndroid向けのgltfファイルから用意していきます。
Blenderでの3Dモデルのエクスポート時にgltfの単一ファイルに出力する形で保存してください。


(vrm形式の規格に関して、WebAR、WebVRでの表示や召喚の際に不安定になる現象を確認してます。
その為、vrmよりもglb, gltfを推奨してます。gltfやglb形式はBlenderを利用すれば簡単に出力できます。
尚、XRコンバーターで変換できるのはgltfのみです。)

3Dモデルのサイズ 無料WebARの作り方

gltfファイルをiOS向けのusdzに変換

gltfファイルが準備できたら、iOS(iPhone等)向けのusdzファイルも用意しましょう。

XRSNSのナビにある無料の「XR Converter」をクリックしてページに移動します。
変換したいgltfファイルを選んで、パスコートに2501を入力して、usdzに変換するボタンを押します。


成功すればusdzをダウンロードするボタンが出現するのでそこからダウンロードしてください。
(現在βです。対応してないマテリアルの場合は失敗する可能性があります。失敗する場合は見直してください。
最悪、usdzは無くてもアップロードできますので無理な場合は次の項目へ飛ばしてください。)

gltfからusdz変換の3ステップ 無料WebARの作り方

3Dモデルの容量サイズについて

WebARは3Dモデルの容量サイズが大きくなりすぎてしまうと読み込みが遅くなりUXに大きな悪影響与えてしまいます。
3Dモデルの容量サイズの上限は30MBとさせて頂いておりますが、推奨は15MB以下です。

通信環境にもよりますが、20MBを超えると表示がかなり遅く感じられます。

将来的には5Gが広く普及し、大きめのサイズでも表示時間は改善されると予測はされます。
(因みにXRSNSでは、Android向けのglb,gltf,vrmと、iOS向けのusdzはそれぞれ別々で上限が30MBになります。
各ユーザーの総使用容量には合計が加算されます。)

3Dモデルをアップロード(メール所有者確認)

ファイルの準備が出来たら3Dモデルをアップロードします。
3Dモデルのアップロード」 ページに行き、各項目に必要な情報を入力してアップロードして行きましょう。
ログインして、メールの所有者確認を済ませてください。下記の画像のように青くなってれば正常に済んでます。

3Dモデルをアップロード(メール所有者確認) 無料WebARの作り方

3Dモデルをアップロード(WebとAndroid向け)

次に、タイトルを入力して、「3Dモデル メイン」(WebとAndroid向け)より、gltfファイルを選択してください。
「3Dモデル メイン」向けの3DモデルファイルはBlenderで最初に出力したgltfファイルを選択してください。

3Dモデルをアップロード(WebとAndroid向け) 無料WebARの作り方

3Dモデルをアップロード(サムネイル作成)

サムネイルも作成をしましょう。サムネイルにしたい角度で作成ボタンを押してください。
サムネイルは何度でも作成し直せますので気に入った角度や大きさを選択してください。

3Dモデルをアップロード(サムネイル作成) 無料WebARの作り方

3Dモデルをアップロード(iOS向け)

次に「3Dモデル サブ」(iOS(iPhone等)向け)より、usdzファイルを選択してください。
上記の「XR Converter」で変換したusdzファイルを選択します。(usdzファイルがない場合は飛ばしてください。)

更に、この3Dモデルに関する説明をコメントより記載してください。

3Dモデルをアップロード(iOS向け) 無料WebARの作り方

3Dモデルをアップロード(装飾色とタグ)

最後に背景とボタンの色を選択して、タグを入力します。
タグは10個まで入力できます。3Dモデルの特徴に近いタグを入力して,で区切ってください。

規約を確認してアップロードボタンを押せば、アップロードされてWebARとWebVRに対応完了します。

3Dモデルをアップロード(装飾色とタグ) 無料WebARの作り方

作ったWebARを呼び出し

アップロードが完了すると3DモデルのURLが表示されるのでページに行き、右下のARボタンを押せばWebARで呼び出せます。
尚、上記説明でアップロードした3Dモデルはこちらから確認できます「ウサギ (テスト用)」。

AR呼び出しはスマホから、iOS(iphone等)の場合はsafari、android(pixel等)の場合はchromeブラウザで行ってください。

作ったWebARを呼び出し 無料WebARの作り方
作ったWebARを呼び出し 無料WebARの作り方

動画でも確認WebAR呼び出し

XRSNSではサイト利用時でも埋め込み時でもワンクリックでAR呼び出し出来るように工夫しました。
3DCG部分を自分のサイトに埋め込む(貼り付ける)方法は、「3Dモデル埋め込みの3ステップ」より確認できます。動画での使用例に全ての動画があります。

3Dモデルのアップ時の注意点

3Dモデル以外ファイル以外の項目は後から「3Dモデルの編集&削除」ページにて自由に編集できます。
また、アップしたモデルも上記から確認できます。


メインの3Dモデル[gltf, glb, vrm]と、サブの3Dモデル[usdz]は、アップロード後に3Dモデルの編集から差し替える事は出来ません。 「いいね」や「フォロワー」の不正操作を防ぐ為にこの様な仕様にさせて頂いております。

また、XRSNSでは今後のアップデート時に最大限後方互換を保つよう勤めてますが、 万が一の場合に備えてアップロード前にファイルを各自ハードディスク等に保存されることをお勧め致します。

Blenderを使用 無料WebARの作り方