AI生成技術は、静止画や動画の「見た目」を一瞬でつくり出せる点で非常に強力です。しかし、WebGLが持つ本質的な価値は、単なる一方通行の映像表現ではなく、ブラウザ上でユーザーが実際に触れ、視点を変え、自身の意図で動かしながら体験できる双方向性（インタラクティブ性）にあります。
とくに製品訴求や工場・都市の再現を行うデジタルツインの分野においては、完成図をただ「見せる」だけでなく、内部構造を「操作させる」、パーツを「比較させる」、動作を「確認させる」といった体験が極めて重要です。こうした体験価値は、現行のAI生成だけでは置き換えにくいWebGLならではの強みです。
今回は、昨年のCG事例を引用しながら公開した最新のワークフロー資料を基に、アマナのクリエイター陣が実践する高品質なWeb 3D体験がどのように作られているのか、その裏側と今後の展望を解説します。
工業製品などの設計図として使用される3D-CADデータは、製造を前提とした精密なデータで構成されており、そのままではデータ量が膨大すぎます。リアルタイムコンテンツとしてWebブラウザ上で滑らかに動作させるためには、フレームレートを確保するための緻密な軽量化（ローポリゴン化）が最初の関門となります。
アマナのワークフローでは、CADデータをCGに変換する際、用途に合わせて最適な「データ選定」を行います。具体的には、変換時の許容誤差（Tolerance）を0.1、1.0、5.0と複数パターン設定し、最適なポリゴン密度へとテッセレーションを調整します。
さらに、変換されたポリゴンデータはMayaなどのDCCツールを用いて整理されます。元の階層構造（GF_CAD_Org）では細かなパーツ（GP_A、GP_Bなど）が複雑に分かれていますが、これらを結合（Merge）し、シンプルな階層構造（GF_CAD_Merged）へとグループ化（Grouping）し直します。これにより、描画時のドローコール数を抑え、ユーザーが見ていない方向の描画を省略するオクルージョンカリングを効率的に効かせることが可能になります。
形状データを軽くした後は、3D空間でリアルなマテリアル（質感）を表現するための仕込みに入ります。ブラウザという制限された環境のWebGLでは、基本的なライト表現しか使えないため、リアルタイムでの高度な光の計算は避ける必要があります。
マテリアルを綺麗に出力するための「UV0」を作成した後、Houdiniなどのツールを活用してライトベイク専用の「UV1」を自動展開します。ここに、あらかじめ計算された光の陰影やアンビエントオクルージョン（AO Bake）をテクスチャとして焼き付けることで、実行時の計算負荷をほぼゼロにします。
カメラレンズの複雑な屈折や、金属ボディの反射を表現するためには、NukeやAfter Effectsといったコンポジットツールを用います。周囲の環境を映した360度パノラマ画像（360 Panorama）に対し、カラー補正（Color Correct）やリサイズ（Resize）を施し、6面のテクスチャ画像（CubeMap）へと変換します。これを3Dモデルに適用することで、疑似的でありながら非常にリッチで重厚感のある光の反射を再現しています。
最適化されたデータは、最終的なアウトプット環境に合わせてゲームエンジンに組み込まれます。アマナの検証資料では、「Unreal Engine（UE）」「Unity」「PlayCanvas」の3つのエンジンの明確な使い分けが示されています。
PCアプリやPC VR、3Dディスプレイ、バーチャルプロダクションといった「クオリティ重視」の案件に最適です。Naniteによる自動ポリゴン最適化や、Lumenによる超高精度なグローバルイルミネーション（GI）と反射（Reflection）が利用できるため、作業が楽になるメリットがあります。反面、WebGL出力ができないというデメリットがあり、Web配信の代替となるPixelStreamingは維持コストが高い（High Cost）点がネックです。
モバイルアプリやQuest VRなどのスタンドアロンVRに向く万能エンジンです。WebGL出力にも対応していますが、高い品質を担保しつつ動作を軽くするためには、前述のLightMap Bake、CubeMap作成、ポリゴンリダクションといった「作業の手間が多い」ことが課題となります。
スマートフォンやノートPC向けの「WebGL」動作に特化したエンジンです。Unityと同様に事前のベイク作業やポリゴンリダクションの手間がかかる上、Web配信特有の「容量制限」を考慮する必要があります。しかし、インストール不要でどこからでもアクセスできるWeb環境において、これほど軽量かつサクサクと高品質な3Dを描画できる利便性は最大の武器となります。
アマナの精緻なワークフローが示しているのは、WebGLが「何でも無条件に高精細に見せる魔法」ではなく、「限られた条件の中で、どれだけ伝わる体験を成立させるか」を緻密に設計・計算する技術だということです。生成AIは、テクスチャ生成や初期3Dモデルの構築など、素材づくりをかつてない速度で加速させます。しかし、WebGLはその生み出された素材を、ユーザーが能動的に関与できる「インタラクティブな体験」へと昇華させる役割を担っており、両者は強力な補完関係にあります。
今後は、ブラウザのグラフィック処理能力を最大限に引き出す次世代規格「WebGPU」の普及が本格化していくでしょう。これにより、これまでWebGLの弱点とされてきた表現力の限界や、複雑な描画による処理負荷の課題が大きく緩和されると期待されています。
どれだけ技術が進化しても、特別なアプリを要求せず、URL一つで即座に共有でき、低コストで運用できるWebのアクセシビリティという本質的な利点は変わりません。AIで誰もが簡単に高度な素材を作ることができる時代になったからこそ、今回解説したような高度なデータ最適化技術を用いて、Web上で瞬時に“体験させる”WebGLの価値は、今後さらに飛躍的に大きくなっていくはずです。
文・画像：上見佳史（アマナ）
CG制作：スチル／ムービー／リアルタイムなど幅広い表現手法で、細部にこだわったCG制作とソリューションを提供。制作事例・資料も掲載しています。
関連記事：CGの品質表現の考え方を深掘りした記事はこちら。
生成AIを制御する、CGクリエイターの「技術」と「美意識」
CGクリエイターが実践するAI活用術──AIとの融合で広がる表現の可能性
アパレルCGでリアルな質感表現を実現。高品質なビジュアルでブランド力を強化する方法
「パーソナル化したビジュアルコミュニケーション」がもたらす、個々の嗜好に合わせた顧客体験
amana cgx
amana cgx
amana cgxサイトでは、amanaのCG制作チームが手がけたTV-CMやグラフィック、リアルタイムCGを使ったWEBコンテンツなど、CGを活用する事で、クライアント課題を解決に導いた様々な事例を掲載。
CGクリエイターの細部にまでこだわる表現力と、幅広い手法によるソリューションサービスを紹介しています。
