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.



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.


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.




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.



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.


最新の機能である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体験を現実世界の環境とシームレスに融合させることができます。