Zenn
Open5

Guide to 3D Files for Web AR

イワケンイワケン

Due to advancements in web technologies such as WebGL, 3D rendering in mobile browsers has improved tremendously in recent years. Not only is Web AR available in modern browsers with 8th Wall Web, but beautifully rendered scenes and objects can be viewed in AR as well. Advanced rendering techniques such as PBR materials, custom shaders, real time shadows/reflections and high res textures are currently possible- even while retaining very small file sizes, high frame rates and insanely fast load times.

When moving to Web AR from a native AR game engine pipeline, you will notice many similarities. A-Frame and Sumerian share many similar concepts to Unity such as game object hierarchy and a component-based development environment. While there are components that allow for loading various types of 3D files (FBX, OBJ, etc) into these frameworks, we stand by GLB (glTF 2.0 Binary) as the current best option with its small file size, great performance and versatile feature support (PBR, animations, etc). Below you will learn more about how to both create GLB files and convert your existing files to GLB for use with 8th Wall Web.
WebGLなどのWeb技術の進歩により、近年、モバイルブラウザでの3Dレンダリングは飛躍的に向上しています。8th Wall Webを搭載したモダンブラウザでは、Web ARが利用できるだけでなく、美しくレンダリングされたシーンやオブジェクトをARで見ることができます。PBRマテリアル、カスタムシェーダー、リアルタイムシャドウ/リフレクション、高解像度テクスチャなどの高度なレンダリング技術は、非常に小さなファイルサイズ、高いフレームレート、非常に速いロードタイムを維持しながらも、現在可能です。

ネイティブARゲームエンジンのパイプラインからWeb ARに移行した場合、多くの類似点に気づくでしょう。A-FrameとSumerianは、ゲームオブジェクトの階層構造やコンポーネントベースの開発環境など、Unityと似たコンセプトを持っています。これらのフレームワークに様々なタイプの3Dファイル（FBX、OBJなど）を読み込むことができるコンポーネントがありますが、ファイルサイズが小さく、パフォーマンスが高く、多彩な機能（PBR、アニメーションなど）をサポートするGLB（glTF 2.0 Binary）が現在の最良の選択肢となっています。以下では、GLBファイルを作成する方法と、既存のファイルをGLBに変換して8th Wall Webで使用する方法について詳しく説明します。
www.DeepL.com/Translator（無料版）で翻訳しました。

イワケンイワケン

Converting to GLB for 8th Wall Web
Important!
Before you export, ensure that
Pivot point is at the base of the model (if you expect it to attach to the ground)
Forward vector of object is along Z axis (if you expect it to face forward)
Poly count does not exceed 35k tris (or performance will suffer)
Combined file size does not exceed 10MB (people are loading this on a webpage!)
To reduce file size, compress textures and reduce poly count
After you import into A-Frame (three.js, babylon.js, etc) ensure that
Scale looks correct at (1, 1, 1)
If it is off by a significant amount (i.e. 0.0001 or 10000), do not change the scale in A-Frame (three.js, babylon.js, etc). Instead, change it in your modeling software and re-import. Otherwise you may see clipping issues with your model
If your model has animations (and using A-Frame), be sure to use the animation-mixer component
If your model is meant to be shiny and has no textures, it will appear black unless you give is something to reflect back. Use an environment map for this
If you discover any issues with your model in your scene, import it into Don McCurdy's GLTF Viewer. This uses the same renderer as A-Frame (three.js) so it should help with debugging any issues with your scene

エクスポートする前に、以下を確認してください。
ピボットポイントがモデルの底面にあること（地面に付くことを想定している場合）
オブジェクトの前方ベクトルがZ軸に沿っていること（前方を向くことを想定している場合）
ポリ数が35kトライを超えない（パフォーマンスが低下する）
結合したファイルサイズが10MBを超えない（人々はこれをウェブページで読み込んでいます！）。
ファイルサイズを小さくするには、テクスチャを圧縮してポリ数を減らします。
A-Frame（three.js、babylon.jsなど）にインポートした後、以下を確認してください。
スケールが（1, 1, 1）で正しいかどうか。
大幅にずれている場合（0.0001や10000など）、A-Frame（three.js、babylon.jsなど）でスケールを変更しないでください。代わりに、お使いのモデリングソフトウェアでスケールを変更し、再度インポートしてください。そうしないと、モデルのクリッピング問題が発生する可能性があります。
モデルにアニメーションがある場合（A-Frameを使用している場合）は、必ずアニメーションミキサーコンポーネントを使用してください。
モデルに光沢があり、テクスチャがない場合は、何か反射するものを与えないと黒く見えてしまいます。これには環境マップを使います。
シーン内のモデルに問題がある場合は、Don McCurdy氏のGLTF Viewerにモデルをインポートしてください。これはA-Frame (three.js)と同じレンダラーを使用しているので、シーンの問題をデバッグするのに役立つでしょう。

www.DeepL.com/Translator（無料版）で翻訳しました。

イワケンイワケン

要するに

  • Exportする前にすべきこと
    • Pivotが底面になっていること
    • オブジェクトの前方ベクトルがZ軸に沿っていること
    • ポリゴン数は35k = (35000)を超えない
    • 結合したファイルは10MBを超えない
    • ファイルサイズを下げるためには、テクスチャを圧縮してポリ数を減らします
  • Aframe後の処理
    • Scaleを(1,1,1)にしたときに正しい大きさになっているか
    • Animationはanimation-mixerコンポーネントを使用する
    • モデルに光沢があり、テクスチャがない場合は、何か反射するものを与えないと黒くなります。環境マップを使います。
    • シーンのモデルに問題がある場合は https://gltf-viewer.donmccurdy.com/ を利用しましょう
      • Aframe (thrree.js)と同じレンダラーを使用しています
イワケンイワケン

Preparing an existing 3D File for an AR Camera

Important!

  • Before you export, ensure that
    • Pivot point is at the base of the model
    • Forward vector of object is along Z axis
  • Before you upload, ensure that
    • Poly count does not exceed 35k tris (or performance will suffer)
    • Combined file size does not exceed 15MB
      • To reduce file size, compress textures and reduce poly count