ShopifyのARで仮想を現実のものにする

拡張現実は私たちがますます増えているのを見てきましたが、それは正確には何であり、どのように行われていますか？ Ready Player Oneのようなビデオゲームや映画のおかげで、誰もがバーチャルリアリティに精通しています。 バーチャルリアリティでは、VRヘッドセットを着用して完全に合成された現実を体験し、現実の世界から離れて、まったく異なる世界に没頭できるようにします。 一方、拡張現実は仮想と現実の境界線を曖昧にします。 Shopifyは店舗所有者がARを利用できるようにする技術を採用しているため、ユーザーは物理的な環境の一部として人工コンテンツを体験でき、eコマースを席巻するように設定されています。

最近、ShopifyはAppleのARKitの使用を統合して、ユーザーにARコンテンツを提供しており、EastsideCoではそれ以来実験を続けています。 最近では、Lazy Oafと協力して、伝説的なDocMartensと提携して開発された新しい靴のラインの拡張現実バージョンを提供しました。 Lazy Oafのデザインのユニークな美学を3Dモデリングを通じて拡張現実にもたらすことは楽しい挑戦であり、以前は小売店でしか利用できなかったものに近いレベルの双方向性をオンラインショッピングに追加したと私は信じています。

では、AR用の仮想製品を作成するにはどうすればよいのでしょうか。また、その過程で発生する問題は何でしょうか。

セットアップ

Lazy Oafは、実際の製品を発売前に送ってくれたので、製品がどのようなものかをよく感じることができました。 これは非常に有益な場合があります。写真では製品に使用されている素材の種類や感触を捉えることができない場合があり、製品をさらに先に見せるのに重要な場合があります。 私たちの写真家でありビデオグラファーであるデイブは、3Dモデリングプロセスを開始する前に、Doc Martenの靴のそれぞれを前面、背面、両側、上下、およびさまざまな角度から親切に撮影し、表面の詳細をキャプチャしました。

写真を互いに正確になるようにトリミングして拡大縮小したら、3DS Max2018で青写真としてレイアウトしました。

基本的なモデリング

ここから、モデリングは単純な形状から始まります。 靴は、靴底の形状に合うように押し出されて操作された単一の平面として誕生しました。

基本的な形状が完成したら、ソールのトレッドを構成するエッジをカットし、それらを押し出し、次にソールの残りの部分を押し出し、いくつかのモディファイアを適用して、ソールの底全体を丸くしました。 さらに基本的なモデリングを行った後、ソールはZBrushを使用して高解像度の作業を行う準備が整いました。

高解像度3Dモデリング

低解像度のモデルを取得し、ポリゴンの数を増やすと、モデルがスムーズになります。 このプロセスはいくつかのレベルで行われ、表面がはるかに滑らかになり、ソールの縁に沿ってステッチを追加し、手動でステッチ穴を表面に手で彫って、適切なステッチであるかのように見せることができました。

靴底が滑らかになり、磨き上げられたら、靴の上部から始めて、靴自体の輪郭に沿った基本的な形状を作成しました。

このラフなバージョンをベースにして、靴のディテールを構成するすべてのピースの形状を抽出することができました。 フォームを構成するすべての重なり合う材料は、この形状から引き出され、それに応じて配置されました。 つま先の前のひもで締められた領域はで彫刻されました。

この段階から、つま先にバックルやレースなどのアクセサリーを追加し、もちろんパネルのステッチなどの細部を追加する場合がありました。

難しい部分

そのモデルは確かにいくつかの色で完成していますよね？ 残念ながら違います。 Doc Martenシューズの3Dモデルは、全体として1,000万個弱のポリゴンで構成されています。 私たちがポケットに入れているスマートフォンは今では信じられないほど強力なコンピューティングデバイスですが、一度に多くのポリゴンをレンダリングするのは非常に困難です。 映画編集者のように、あなたはそれがあなたが提示しようとしているものの重要な部分を選んで選ぶ必要があります。 靴の内側が完成していないことに気付くでしょう。 これは、いわばカッティングルームの床にぶつかった最初の作品でした。 靴の内部は全体的な美学にそれほど重要ではなかったので、モデル化しないことでモデルの複雑さが軽減されました（また、時間を節約できました）。 しかし、まだ約1,000万のポリゴンが残っています。

拡張現実はモデルをリアルタイムでレンダリングするため、複雑さを軽減する必要があります。 これには、ポリゴンのカウントを管理可能なレベルまで減らすことが含まれ、非常に面倒なプロセスです。 幸いなことに、ほとんどのパーツは低ポリゴンバージョンとして誕生し、私はそれらのパーツに戻って、このタスクのためにそれらを再利用することができました。 下のスクリーンショットでは、形状は靴自体を表していますが、ステッチ、わずかに面取りされたエッジ、これらすべてのポリゴンが提供する全体的な滑らかさなどの細かいディテールが欠けていることがわかります。 ただし、ポリゴン数がほぼ1,000万から6000をわずかに超えるまで減少し、必要に応じて実際にはさらに少し減らすことができることもわかります。ただし、6000ポリゴンは予算内で十分であり、形状をサポートするジオメトリがあると便利です。次の段階に向けて。

詳細を元に戻す

これで、2つのバージョンの靴ができました。非常に高解像度のバージョンと、モバイルハードウェアで高速かつスムーズにレンダリングされる低解像度のバージョンです。 しかし、今では、靴をユニークにするために私が主張する詳細が欠けています。

高解像度の詳細を低解像度バージョンに転送するには、拡張現実の仮想光に情報を提供するさまざまなテクスチャマップにそれらを「ベイク」する必要があります。 そのためには、最初にモデルをアンラップしてフラット化し、UVマップを作成する必要があります。 UVマップとは何ですか？ 折り紙モデルのように展開された場合、これはモデルの2D表現です。 これにより、テクスチャを後でそのサーフェスに投影できます。

細部をくっきりときれいに保つために、モデルを2つの部分に分割することにしました。 ソール、バックル、ストラップを一部に、上部を別の部分に。 これにより、1つの大きなテクスチャマップの代わりに2つの小さなテクスチャマップを使用できるようになり、ファイルサイズが小さくなり、読み込みが速くなりました。

以下に、UVマップ（両方のパーツのフラットバージョン）を示します。

これが完了すると、マップをベイク処理してテクスチャを処理し、製品を製品のように見せるためのマテリアル情報を追加できます。

上のスクリーンショットの紫色は奇妙に見えるかもしれませんが、これが詳細をモデルに戻す主な方法です。 高解像度モデルの表面は低解像度モデルに投影され、表面がどちらの方向を向いているかに応じて、赤、緑、または青の値で記録されます。 モデルに適用され、光源がモデルに当たると、光が当たるピクセルの色によって、光が跳ね返る方向が決まり、ポリゴンのコストをかけずに人工的に3Dサーフェスが作成されます。 これはステッチで最も明白です。

これらのマップが作成されると、それは表面にマテリアルとテクスチャを適用する場合にすぎません。

物理的になる

現代のリアルタイムレンダラーは、PBRまたは物理ベースのレンダリングと呼ばれるシステムを使用しています。 これは、ライティングおよびレンダリングエンジンが、モデルのサーフェスがどのマテリアルであるかに基づいて、モデルのサーフェスに当たったときのライトの動作を正確にマッピングしようとすることを意味します。 最新のテクスチャリングソフトウェアにより、リアルなマテリアルの作成が非常に簡単になりました。 サブスタンスペインターは、これらの実際のアイテムの表面をデジタルで再現できるようにするために役立ちました。 主に5つの異なるテクスチャマップを使用して、モデルにさまざまなプロパティを適用します。

• カラーマップこれは、聞こえるように、素材の基本色です。
• 金属性これは、モデルのどの部分が金属であるか非金属であるかを決定する白黒マップです。
• 粗さ聞こえるように、モデルの表面がどれだけ粗いか滑らかかを定義します。
• アンビエントオクルージョン2つのサーフェスがコーナーで交わる小さな小さな接触シャドウを模倣するグレースケールマップで、照明に奥行きを追加します。
• 法線マップこれは前に示した紫色のマップであり、表面の詳細を表示する役割を果たします。以下に示すように、法線マップをソールでオフにしてから靴の上部でオフにすると、詳細はほとんどありません。

テクスチャリングプロセスが完了すると、かなり説得力のあるものになります。 最後のステップは、モデルとテクスチャをエクスポートして、ARに適した形式に変換することです。 この場合、AppleARKitが使用する形式であるUSDZです。

あなたがまだ私と一緒にいるなら、よくやった！ ARの結果は、それを作成するプロセスよりもはるかに魅力的ですが、舞台裏のこの小さな一瞥が、実際の製品の仮想表現を手動で再作成するプロセスにどれだけの時間がかかるかを示していることを願っています。 3Dスキャンや写真測量などの新しいテクノロジーにより、将来的にプロセスが容易になりますが、テクノロジーに多額の投資をしない限り、現時点では品質はそれほど高くありません。

私たちはまだ拡張現実技術の初期段階にあります-それが進歩し続け、携帯電話がより強力で有能になるにつれて、私たちは日常の場所でこの技術をますます見るようになるでしょう。 Ready PlayerOneやその他のSF映画がバーチャルリアリティを普及させた一方で、VRはエンターテインメントと教育の領域にとどまり、ARはインターネットと同じくらい普及するでしょう。 多分それは少し遠いですが、それまでは少なくとも私はテーブルにいくつかの靴を置くことができ、言われることはありません。

Lazy Oafにアクセスして、iOSとSafari12を実行している自分のiPhoneまたはiPadでDrMartenシューズをチェックしてください。