はじめてのWeb ARに挑戦～『新年のご挨拶』の舞台裏～
みなさんこんにちは、ユタカ産業です！
お正月も過ぎ、通常業務に戻られた方も多いのではないでしょうか？年始になると目にする機会の多いもの…そう、年賀状です。ユタカ産業も毎年、干支に沿ったデザインの年賀状をお送りしています。先日の記事でもご紹介した今年の年賀状…今回は、その年賀状作成の舞台裏のお話をさせていただきます。
……と言うお話を2月ぐらいにしようと思っておりましたが、リテールテックの準備やその後の業務に追われて、気付けばGWも終わり、梅雨を飛び越して…夏が駆け足でやってきておりました。(リテールテックに関しては、こちらとこちらと、こちらをご覧ください！)月日が経つのはあっと言う間ですね。
と言う訳で、季節外れの年賀状の舞台裏のお話を改めてお楽しみください。
1．事の始まり
ユタカ産業では、毎年デザイン部で年賀状コンペが行われ、複数提出された作品の中から、年賀状デザインを決めています。今年のお正月にお送りした年賀状も、本来であればその予定でした。
デザイン部に依頼する為、年賀状のご挨拶文を考えていた社長。「寅年、寅…とら…トライ！そうだ、2022年は『トライの年』にしよう。」と言う事で、ご挨拶文を書き終え、後はデザイン部に依頼を流すだけ、となった段階で、ふと(折角、年賀状に『トライの年』と銘打ったので、新年早々、新たなトライをしてみよう！)と思いつきました。
新年に向けて、トラ(寅)イの一歩を踏み出した社長から、3人の人物に声が掛かりました。
2．AR年賀状を作りたい
ところでみなさん、ARと言う言葉はご存じでしょうか？
拡張現実（かくちょうげんじつ、英: Augmented Reality、オーグメンテッド・リアリティ、AR）とは、現実世界に仮想世界を重ね合わせて表示する
技術を指す言葉。エクステンデッド・リアリティ（XR）と呼ばれる先端技術の一つである。現実の風景の中にCGでつくられた3D映像やキャラクターなどのデジタルコンテンツやデータを重ねて表示することで現実世界を"拡張"する。専用のヘッドマウントディスプレイを用いる方法、あるいはスマートフォンのカメラとディスプレイを使って重ね合わせる方法などがある。
ざっくりご説明すると、現実の風景にCGなどを重ねる技術の事になります。
最近ですと、ポ〇モンGOなどが有名だと思います。このAR、実は大掛かりな装置や開発環境がなくても、WebARと呼ばれる技術のおかげで、簡単なものであれば個人で制作できてしまうんです。WebARに必要なのは表示する3Dデータと、マーカーと、サーバーの3つだけ！幸い、インターネット上には先人たちの知恵がザクザク転がっています。年賀状として使うとインパクトもそこそこにあり、楽しんで貰えそうです。新年の『トライ！』として良いのではないでしょうか？
3．年賀状デザイン～デザイン部編～
『トライの年』と言うテーマのもと、デザインを考えてくれていたデザイン部。いくつかのデザインの中で、1つの絵が社長の目に留まりました。ちょっとかくかくしたトライの文字…これが飛び出したら面白いんじゃない？と考えた社長。本格的にAR年賀状の準備を進める事にしました。
AR年賀状にしたい事、なのでもっとARに馴染むようなデザインを考えるように、と指示されたデザイン担当。ARにする部分の形は決まっていた為、その形に馴染むような年賀状を作成する事を意識して何パターンか出してみます。途中から、ARマーカーの中にQRを入れて欲しいやら、この文章を入れて欲しいやら、様々な指示を細かく受けつつ、虎に合うもの･色合いを考えながらデザインしていきました。候補を出して、その中から更にブラッシュアップをして…を繰り返すデザイン担当。最終的に、トライが乗った時にあまり邪魔にならずに背景として馴染んだものが選ばれました！
4．3Dデータ作成～設計部編～
年賀状のデザイン作成と並行して、3Dモデルも作成しなければなりません。ユタカ産業は2021年から3Dでの設計も始めていますので、AR用の3Dモデルも作成できるはず…と3D設計が始まって以降とても熱心に取り組んでくれている設計部の若手を指名した社長。3Dデータ作成担当の奮闘が始まります。
文字のフォント等はデザイン担当からデータを貰い、平面データからFusion360でまずは簡単に文字を押し出して立体にした3Dデータ作成担当。そこから各面に柄を描いて、寅イな形にしていく作業をする訳ですが、問題が…まずは参考になる柄のデータをネットから引っ張って、立体にした文字にトレースしてみると、なんだか柄が細かすぎてくどく感じる…ここから、3Dデータ担当の試行錯誤の始まりです。
マ〇クラのようなカクカクの柄にしてみると、何だか寅と言うより踏切みたい…ならば、と柄の先端を丸くしたり尖らせたりしてみるも、何だかしっくりこない…この柄ならいけるかな？と描いて3Dにして俯瞰してみたら、柄の気持ち悪さに気づいて直す…それを繰り返す3Dデータ作成担当。
「トライ」という立体文字の各面に柄を入れるということが、2Dの文字に柄を入れるとは、ワケが違うのをしっかりと実感させられたようです。
「3Dっていう奥行きの情報が追加されただけで全体の見た目のまとまりがすごく難しくなった感じです。四方八方あらゆる角度から隅々を見れてしまうっていうのが作る側からしたらサボれないので厄介(笑)」と試行錯誤しながらぼやいておりました。
まだ使い始めたばかりのfusion360、その為、効率的な修正方法も分からず、毎回『各面のスケッチを直す→各面のスケッチを押し出す→全体の見た目を確認』だったので予想以上に手間と時間が掛かってしまったようです。「簡単そうだと思ってたのに上手くいかずイラっとしつつも、作業自体は楽しかったですね。3Dでなんか作ってるーって実感が割とある作業だったので。」と後に3Dデータ作成担当は語っていました。
終わった後、誰かが作った3Dデータのプロセスを知りたくなったそうです。
fusion360はプロセスがそっくり残るため「どんなやり方だったら簡単で時短できてうまくやれるのか、他の人の作成データが欲しいと強く思った」との事なので、どなたかfusion360で作ったデータ見せてもいいよ、と言う方がいらっしゃいましたら、是非ご連絡ください。
5．WebAR組み立て
各パーツを揃える間に、WebARの方も準備しなければなりません。まずはWebARを映すために必要なサーバーを準備します。これは3DデータやARマーカーのデータが置ければ良いので容量の小さいサーバーでも問題ありません。ささっとレンタルサーバーを借りて準備万端の組み立て担当。
続いて、ARマーカーの準備です。ARマーカーとは文字通り、ARを表示させる際に使う目印や標識になるものの事です。黒い太枠のこれです、見た事がある方も多いのではないでしょうか？
最初は確実に3Dモデルの表示ができる上のマーカーを使用していた組み立て担当。しかし、やはりQRと一体化してあった方がデザイン的にも枠のサイズ感的にも良いと言う事で、真ん中をQRコードにしたオリジナルマーカーでの表示にトライする事に。通常業務の間にトライ＆エラーを繰り返し、ようやく表示できるオリジナルマーカーを完成させた組み立て担当。
ひと段落…ですが、休んでは居られません。3Dモデルの表示と調整の実験はここからです。まずは試しに設計部から適当な3Dモデルを貰って表示をしてみました。ところで、今回は3D製作にfusion360を使用している訳ですが、こちらはあくまで製品設計用のソフトです。その為、いくつかの問題が発生しました。
6．3Dモデルの問題
ARで3Dモデルを表示する為には、objファイルとmtlファイルが必要になるのですが、何とfusion360はmtlファイルの書き出しが出来ませんでした！
何とかしてfusion360で作成した3Dモデルを使いたい組み立て担当。だって、せっかく3Dデータ作成担当が作ってくれたモデルがあるので…色々調べていくと、一度Blenderと言うフリーソフトを噛ませる事で、objファイルとmtlファイルが生成出来る事にたどり着きました。
Blender
オープンソースのフリーウェア
3DCGアニメーションを作成するための統合環境アプリケーション。
商用ソフトにも負けないくらい色々出来る。
早速、Blenderをインストールした組み立て担当、いざテスト用に貰ったデータを表示してみた所…すごい、細かい…組み立て担当の雑な理解ではありますが、3Dモデルは面をたくさん使えば使うほど滑らかに見えるのです。同じくらいのサイズの20面ダイスより、100面ダイスの方がより丸く見える、そういう事です。(厳密に言うとこの『面』も、表面だけを作り中身の詰まっていないデータであるポリゴンと、そのポリゴンの集合体で中身まで詰めているメッシュと、更に色々あるようですが、勉強中の組み立て担当はよく知らないので割愛します。)
つまり
滑らかに見える＝たくさんの面が存在している
と言う訳なのです…
それだけたくさんの面が滑らかな立体になるように存在していると言う事は、そのすべてに色を付けるのも一苦労、と言う事…実際、作業を始めた組み立て担当は唸っていましたし、何度も塗り残しを見つけては色塗り作業に戻っていました。360度で見られるので、塗り残しが意外と目立ちます。
塗り残しをなくしていく過程で、急にBlenderが立ち上がらなくなりました…組み立て担当がその時使用していたのは事務用のPC…良いグラボどころか、そもそもグラボは積んでいません、内蔵のものだけです。Blenderが使えなくなるのはある意味当然と言えましょう。仕方がないので私物のPCで作業をする事に。私物のノートPCのファンをフル回転させながら作業をしました。これからBlenderを始める方は、是非ともグラボを積んでいるPCで始める事をお勧めします。
そうして良い感じになったテスト用モデルを書き出し、objファイルとmtlファイルをサーバーにアップして、再度htmlの記述を見直し…いざ表示！
………すごい、足の先しか見えない…。データ上は高さ30cm程で作成しているハズなのに、1階の天井を余裕で越えるであろうサイズで表示されているテスト用3Dデータがマーカーの上に現れました。
この原因は無事実装し終えた今の段階でもまだわかっていませんが、恐らくfusion360で作成したデータをBlenderに移す時の問題だと思います。実際、fusion360側で25％程度まで縮小してから書き出すと、丁度良い位のサイズになりました。そこまで小さくなれば、後はhtml側で多少調整が可能です。
そんな手探り手探りの状態で、ようやくARとして機能するくらいまで調整と組み立てが完了しました。ここまでくれば、3Dデータ担当が作ってくれたトライのデータで同じことを繰り返してアップするだけです！
7．3Dモデルの表示
さて、表示させたトライ3Dモデル…このままではただ浮いているだけで面白味はありません。社長からも何か動きが欲しい、と指示された組み立て担当。ネットの海に漕ぎ出して情報をあれこれ漁ったところ、簡単な記述で回転が出来る事が判明、早速、組み込んでみる事にしました。
html内に何行か追加して…いざ、表示！
…………本当なら、ディ〇ニーシーのアクアスフィアのように綺麗な回転を見せてくれる筈の3Dモデルが、何故かその場で痙攣している。困惑する組み立て担当。記述は間違っていない、間違っていないのに回転ではなく痙攣する3Dモデル…組み立て担当はプログラム知識がほぼない人間ですが、ネットを漂流して先人たちの知恵を繋ぎ合わせる事でやりたい事を実現しています。それ故に、お手本通りに記述して上手く行かないと、解決までに時間が掛かってしまうのです。
この件も、数日間トライを繰り返し、最終的には力技で解決する組み立て担当。何とか解決しました。
8．トラブル発生
綺麗に表示も回転も出来てひと段落…と安心していた組み立て担当に連絡が！何と、androidOSのスマートフォンから見ると、カメラが強制的にズームされてしまい、表示されないどころかARマーカーを認識できない！と言うトラブルが発生してしまいました。
組み立て担当者は手元にあったパソコン(Windows)とiPhone2台とiPadでしか確認できていなかったので気付かなかったようです。幸い、html内の記述を書き足す事でこの問題は解決できました。(1か所の書き換えだけで済みましたが、最初は原因が分からず、組み立て担当者は3日ほど、通常業務の間にうんうん唸って問題解決にあたっていました)
9．完成！
そうして完成したのが元の記事でご紹介していたこちらの年賀状になります！
10．取説…？
無事、思った通りにAR表示が出来て安心の3人、社長に確認も貰い年末の作業もひと段落。かと思いきや、先にお披露目した社内より「AR年賀状、分かり辛くない…？」の声が！
確かに、年賀状に記載した説明はあまりにもシンプル。これは確かに分からないかもしれない…と納得した一同、急遽取説サイトを作る事にしました。デザイン担当に年賀状の宛名面に新たにQRコードを入れて貰い、詳しい説明はこちら、と記載して、良い感じの紙で出力する為に印刷所にデータを投げます。
なお、この時点でQRコードに指定したサイトは本当の意味でまっさらです。アクセスするとサーバー側から『そんなページは存在しないよ！』と無慈悲なレスポンスが返ってくる状態。組み立て担当の戦いが再び始まります。
社内の方に協力してもらい、iPhoneとandroidのスクショを集めた組み立て担当、ホームページ作成ソフトなどはないので、ひたすらタグを手打ちして整えては確認し、整えては確認しを繰り返す事〇日…何とか年内に取説サイトを作成する事が出来ました。ちゃんとレスポンシブ(仮)対応です。
余談ですが、はるか昔に自分や友人の趣味のサイトを作成していた事もある組み立て担当。最近は便利なサービスも多く、すっかりhtmlと言う物から遠ざかっていた結果、現在はCSSは別ファイルとして書き出し、html側に読み込む事を知りませんでした。(まだギリギリ現役で使えたFrontPage Expressを使用してサイトを作っていた、と言えばどれくらい昔の知識で止まっていたか、分かる人には分かるのではないでしょうか…)
11．おわりに
メンバーのトライが詰まった、初めてのWebARに挑戦した、年賀状の舞台裏はいかがでしたでしょうか？今回、初めての挑戦が多く、3名とも良い経験になったのではないかと思っています。これを書いている組み立て担当としては、ここでの経験を今後も活かしたり、もう少し深掘りして広げ、第三事業部のデジタル事業に役立てて行ければ良いなと思っています。
年賀状もですが、それ以外にもユタカ産業では新年から様々な事にトライしています。少しでも興味をお持ちいただけたら、是非ユタカ産業の記事一覧から、そのほかのトライも見て下さると嬉しいです。
これからもトライを続けていくユタカ産業をよろしくお願いいたします！
