Open7

5 tips for developers to make any 8th Wall WebAR project more realistic

イワケンイワケン

The web is a powerful place for highly realistic augmented reality experiences and 8th Wall is empowering developers with tools to make that happen.

Developers can already use the 8th Wall platform to create realistic WebAR experiences which make use of high fidelity models, lighting and shadows. Today, we are pleased to introduce our latest feature to elevate your WebAR projects, 8th Wall Realtime Reflections.

With 8th Wall Realtime Reflections, you are now able to add dynamic environment maps based on data coming in from the camera feed to your 3D models to add a deeper level of realism to your project. These dynamic reflections are made possible by 8th Wall's unique camera application framework which gives our developers precise control over how the camera feed is processed and presented in their projects.

ウェブは、非常にリアルな拡張現実体験のための強力な場所であり、8th Wallはそれを実現するためのツールを開発者に提供しています。

開発者はすでに8th Wallプラットフォームを使用して、高忠実度モデル、照明、影を利用したリアルなWebAR体験を作成することができます。本日は、WebARプロジェクトを向上させる最新の機能である「8th Wall Realtime Reflections」をご紹介します。

8th Wall Realtime Reflectionsでは、カメラフィードからのデータに基づいたダイナミックな環境マップを3Dモデルに追加して、プロジェクトに深いレベルのリアリズムを加えることができます。これらのダイナミックな反射は、8th Wallのユニークなカメラアプリケーションフレームワークによって実現されており、開発者はカメラフィードの処理やプロジェクトでの表示方法を正確にコントロールすることができます。

To help developers elevate the realism in 8th Wall projects; we wanted to share how Realtime Reflections and other best practices can be used to create lifelike AR experiences.

8th Wallプロジェクトの臨場感を高めるために、Realtime Reflectionsやその他のベストプラクティスを活用して、リアルなAR体験を実現する方法をご紹介します。

イワケンイワケン

1. Model Geometry - Low Density High Fidelity Models Are Fast & Realistic

Model size is a major driver of AR performance across the myriad of hardware devices your experience will run on the web. A high number of verts or polygons does not mean that you will have a realistic experience. In purchasing models, or working with an art team, developers should strive for the least dense model with the highest human observable quality. This will ensure that the experience’s real-time performance is realistic.

When animation studios use dense models to animate a movie it takes days for their supercomputers to render a single frame. With an AR experience, real-time rendering is essential to creating a realistic experience so a high-quality model with the lowest possible density enables the best possible experience for the end-user.

モデルサイズは、ウェブ上で動作する無数のハードウェアデバイスにおけるARパフォーマンスの主な要因となります。頂点数やポリゴン数が多いからといって、リアルな体験ができるわけではありません。モデルを購入したり、アートチームと協力したりする際には、開発者は、人間が観察できる最高の品質で、最も密度の低いモデルを目指すべきです。そうすることで、リアルタイムのパフォーマンスが現実的なものになります。

アニメーションスタジオが高密度のモデルを使って映画をアニメーション化する場合、スーパーコンピュータが1フレームをレンダリングするのに何日もかかります。AR体験では、リアルな体験を実現するためには、リアルタイムレンダリングが不可欠です。そのため、できるだけ密度の低い高品質なモデルを使用することで、エンドユーザーに最高の体験を提供することができます。

イワケンイワケン

2. Lighting - Frame Your Scenes with Ambient & Directional Lights

There are four main types of light available to developers: ambient, point, directional, & spot. At a minimum adding ambient and directional lights to your scene will add a sense of realism by producing shadows and distinguishing the darkest areas of models in the scene.

Take your lighting to the next level by using the 8th Wall's lighting estimation component xr-light which enables you to match the intensity of the light to the user’s environment. To get started quickly, clone the Lighting Estimation sample project from the Project Library or try it out in the interactive example below.

開発者が利用できるライトには、主にアンビエント、ポイント、ディレクショナル、スポットの4種類があります。最低限、シーンにアンビエントライトとディレクショナルライトを追加することで、影ができ、シーン内のモデルの最も暗いエリアを識別することで、リアリズム感が増します。

8thwallの照明推定コンポーネントxr-lightを使用して、照明を次のレベルに引き上げることができ、ユーザーの環境に合わせて光の強さを調整することができます。すぐに使い始めるには、プロジェクトライブラリからLighting Estimationサンプルプロジェクトをクローンするか、以下のインタラクティブなサンプルで試してみてください。

イワケンイワケン

3. Shadows - Generate Efficient Shadows With Light Sources as Parent Elements

Ground shadows create a relationship between an object and your environment. Shadows are critically the most important aspect of realism in AR. If you don't have a ground shadow the end-user has no context for how far away an AR object is, or how big it is.

Directional lights can be configured to create a shadow map, which is a procedurally generated texture that allows 3D models to cast shadows. The easiest way to add a sense of realism to your AR experience is to use light sources that generate a shadow map.

Smarter lighting techniques can improve the sharpness of shadows across your scene, while also improving performance. Instead of adding a single fixed directional light that casts a large shadow map across your entire scene, add xrextras-attach to light sources above your main elements. This allows you to have high-resolution shadows that track with your main elements as opposed to a giant high resolution shadow map, making the experience far more realistic and performant.

地面の影は、物体と環境との関係を作り出すものです。影は、ARのリアリズムにおいて、決定的に重要な要素です。地面の影がなければ、エンドユーザーは、ARオブジェクトがどれだけ遠くにあるのか、どれだけ大きいのかということを知ることができません。

指向性ライトは、シャドウマップを作成するように設定することができます。シャドウマップとは、3Dモデルが影を落とすためのプロシージャルに生成されたテクスチャのことです。AR体験に臨場感を加える最も簡単な方法は、シャドウマップを生成する光源を使用することです。

よりスマートなライティング技術は、シーン全体の影のシャープさを向上させると同時に、パフォーマンスも向上させます。シーン全体に大きなシャドウマップを落とす固定指向性のライトを1つ追加する代わりに、xrextras-attachを主要な要素の上にある光源に追加します。これにより、巨大で高解像度のシャドウマップではなく、メインエレメントに追従する高解像度のシャドウを持つことができ、はるかにリアルでパフォーマンスの高い体験ができます。

イワケンイワケン

4. Materials - Small Textures & UV Maps Enhance Model Details & Performance

The materials of a model are a major component to delivering a realistic end-user experience. To deliver best-in-class realistic models make sure to purchase, or work with your art team, to get models with textures and UV maps. Texture and UV maps enable detailed variable visual properties across every vertex of your model (like a real-world object), instead of global values generated by PBR settings.

Similar to model geometry, texture size has an outsize influence on the performance of your experience. For optimal performance across the myriad of hardware devices that your experience will run on the web, texture size should be 4k or under. The images below show the difference between 2k textures and 4k. The limited differences are not perceivable when the experience runs on a phone, and the 2k texture will have better real-time rendering performance for the end-user.

モデルのマテリアルは、エンドユーザーにリアルな体験を提供するための重要な要素です。クラス最高のリアルなモデルを提供するためには、テクスチャーとUVマップ付きのモデルを購入するか、アートチームと協力してください。テクスチャとUVマップは、PBR設定で生成されるグローバルな値ではなく、モデルのすべての頂点(現実世界のオブジェクトのように)で詳細な可変ビジュアルプロパティを実現します。

モデルのジオメトリと同様に、テクスチャのサイズはエクスペリエンスのパフォーマンスに非常に大きな影響を与えます。ウェブ上で動作する無数のハードウェアデバイスで最適なパフォーマンスを得るためには、テクスチャサイズは4k以下にする必要があります。以下の画像は、2kのテクスチャと4kのテクスチャの違いを示しています。携帯電話で実行した場合には、限られた違いしか感じられませんが、エンドユーザーにとっては、2kのテクスチャの方がリアルタイムのレンダリング性能が高くなります。

イワケンイワケン

5. Reflections - Use Dynamic Environment Maps to Create Realtime Reflections

Reflections are a powerful tool to create the illusion of realism because they work with lighting, shadows, and materials to realistically simulate objects with shiny or metallic materials. Easily add static reflections to any project by using the cubemap-static component which generates a static cubemap from a series of image assets and applies it as an environment map to a glb model.

Add a deeper level of realism to your WebAR experience by using our newest feature Realtime Reflections. Realtime Reflections swaps out the static environment map used in basic reflections for a dynamic environment map based on data coming in from the camera feed. Use the cubemap-realtime component which generates a realtime cubemap from the camera feed texture and applies it as an environment map to a glb model. To get started with 8th Wall Realtime Reflections, clone the Reflections (Realtime & Static Cubemap) project from our Project Library or try it out in the interactive example below.

反射は、ライティング、シャドウ、マテリアルと連動して、光沢のある素材やメタリックな素材を使ったオブジェクトをリアルにシミュレートすることができるため、リアルな錯覚をもたらす強力なツールです。cubemap-staticコンポーネントは、一連のイメージ・アセットからスタティックなキューブマップを生成し、それを環境マップとしてGLBモデルに適用します。

最新の機能であるRealtime Reflectionsを使用すれば、WebAR体験にさらに深いレベルのリアリズムを加えることができます。Realtime Reflectionsは、Basic Reflectionsで使用されている静的な環境マップを、カメラフィードからのデータに基づく動的な環境マップに置き換えます。cubemap-realtimeコンポーネントを使用すると、カメラ・フィード・テクスチャからリアルタイムのキューブマップが生成され、glbモデルに環境マップとして適用されます。8th Wall Realtime Reflectionsを使い始めるには、Project LibraryからReflections (Realtime & Static Cubemap)プロジェクトをクローンするか、以下のインタラクティブなサンプルで試してみてください。

Using 8th Wall it is easy to build and distribute amazingly realistic high fidelity AR experiences on the web. Realism is about having your subject match your environment. What makes this especially difficult in AR is that we don’t have any direct control over what environments people are placing the AR experience. Using the model geometry, lighting, shadows, materials, & reflection tactics above developers can seamlessly blend their AR experience with the real-world environment.

8th Wallを使えば、驚くほどリアルなハイフィデリティAR体験をウェブ上で簡単に構築・配信することができます。リアリズムとは、被写体と環境を一致させることです。ARでこれが特に難しいのは、人々がどのような環境にAR体験を置くかを直接コントロールできないことです。モデルのジオメトリ、ライティング、シャドウ、マテリアル、リフレクションの手法を用いることで、開発者はAR体験を現実世界の環境とシームレスに融合させることができます。