Web向けフォトリアル3D:レンダリング品質のプロダクトビジュアライゼーション(2026年版)

ルカム・ジョスラン

ルカム・ジョスラン

代表取締役、Utsubo株式会社

2026年7月1日·27分で読めます
Web向けフォトリアル3D:レンダリング品質のプロダクトビジュアライゼーション(2026年版)

3Dを使ったプロダクトサイトの多くは、開いた瞬間に「これは3Dだ」とわかります。オブジェクトはきれいで、回転し、反応する——けれど、実物そのものではなく「モデル」として見えてしまう。これは失敗ではありません。スマホ上でリアルタイムに動かすための、正直なコストです。なめらかさを保つために、ライティングは簡略化され、素材は近似され、重いビジュアル効果はオフにされている。良いリアルタイム3Dは良いリアルタイム3Dらしく見える——多くのサイトでは、それが正解です。

しかし、商品そのものがブランドの核であるブランド——時計、フレグランス、スニーカー、旗艦デバイス——にとって、「3Dだとわかってしまう」ことは、唯一妥協してはいけない部分、つまりオブジェクトの見え方での妥協になります。ブラッシュ仕上げのケースを光がどう滑るか。素材がきちんとレザー、アルミ、ガラスとして読めるか、それともプラスチックっぽい近似で終わるか。そして、どう動くか。この忠実度をWebで達成するには、フィルムのレンダラーと同じように光をシミュレートする必要があり——グローバルイルミネーション、正確な反射、時にはパストレーシングや物理演算が必要で、それは平均的な端末を簡単にひざまずかせます。

このガイドは、その差をWeb上で埋めるための記事です。作り方のチュートリアルではなく、レンダリング品質のプロダクト3Dへの「ルート」を整理した意思決定者向けの地図です。それぞれが何をもたらし、性能と予算でいくらかかり、どう選ぶか。技術用語(PBR、ベイクライティング、プリレンダー、ガウシアンスプラッティング)は、シェーダーを書く人ではなく発注する人の目線で、選択肢のレバーとして登場します。単一のヒーロー商品ではなくスクロール主体のナラティブ体験が目的なら、没入型ストーリーテリングWebサイトガイドが対になる記事です。本記事は商品そのものに焦点を絞ります。

この記事の対象読者: 商品を3Dで本当にプレミアムに見せたいサイトを発注するブランド・マーケティング・プロダクト責任者、高忠実度のWeb体験を設計するクリエイティブ/企画担当、そして予算と発注を組み立てたい制作会社・代理店。


この記事の要点

  • リアルタイムWeb 3Dは、性能を守るために意図的に簡略化されている——だから「3Dらしく」見えます。忠実度はそれとは別の問題で、オブジェクト自体の光・素材・動きをどれだけ正確に描けるかです。
  • フィルム級の忠実度(正確な光・反射・素材)は計算負荷が高い。 それを毎フレーム、中位スマホでライブに行うことが、この分野全体が解こうとしている核心的な緊張です。
  • Web上でレンダリング品質を出す実用的なルートは4つ:リアルタイムPBR、プリレンダー/プリベイク連番、ベイクライティングのハイブリッド、ガウシアンスプラッティング——それぞれインタラクティブ性と画質の上限・読み込みを天秤にかけます。
  • プリレンダー連番は、フィルムレンダーそのものの出力を配信し、カメラ・ライティング・スクロールの工夫でインタラクティブに「感じさせる」——ヒーロー演出ではバイトあたりの画質が最も高くなることが多い手法です。
  • スプラッティングは強力なフォトリアルのルートですが、ビューアーで差が出ます。PlayCanvasにもありますが、Utsuboは自社レンダラーを運用し、Three.jsの3Dオブジェクトとスプラットを混在させ、スプラットをリライティングしてアニメーションさせられます。リアルタイム部分の土台としてはThree.jsが最も成熟し、対応端末も多い。
  • 予算はプレミアムWeb制作の予算帯に乗ります:レンダリング品質の3D演出1点で約300万〜750万円、統合型で750万〜1,500万円、フルのプロダクト世界で1,500万円超——これにカスタム3D加算(225万〜1,200万円)が乗ります。

1. 忠実度 vs 性能:Webの3Dがあの見え方になる理由

正確に言葉を分けておく価値があります。「3Dをもっと良くして」は、まったく別の2つの問題を隠しており——そのうち本当に「フォトリアルな見え」に関わるのは片方だけだからです。

1-1. 「3Dらしさ」は問題ない。レバーは忠実度。

明らかに3Dだとわかるリアルタイムビューアーは、品質の欠陥ではなく、理にかなったトレードオフです。すべてのリアルタイムシーンにはフレーム予算があります——60fpsを狙うなら、すべてを描くのに約16ミリ秒。来訪者が実際に使う端末でこれを守るため、ビルドはレンダリングの重い部分を簡略化します。オブジェクトは回転し、反応する——ただ、実物が光を捉える全重量を背負っていないだけ。これは正常で、多くのサイトでは正しい判断です。

問題になるのは、オブジェクト自体がブランドであるときだけ——プロダクトビジュアライゼーションこそがそのページの存在理由であるとき。すると、性能のために行った簡略化が、品質を伝える要素を食い始め、「明らかに3D」と「本当にフォトリアル」の差が、売れるページと安く見えるページの差になります:

  • 光の反射のしかた——曲面金属の柔らかなフォールオフ、サファイアクリスタルが放つハイライト、マットとサテンの違い。光量の足りないリアルタイムレンダリングはこれをすべて平板にします。
  • 素材の読み——表面が説得力をもってレザー、ブラッシュドアルミ、セラミック、フロストガラスとして見えるか、それとも「ありそうだけどプラスチック」な近似か。
  • 動き——重さ、慣性、布が落ち着く所作、ヒンジの開き方。動きは静止画と同じくらいリアルさを語ります。

1-2. なぜ忠実度は高くつくのか

難しい理由はアートではなく物理です。フィルム級のフレームは、シーン内を跳ね回る光をシミュレートします:グローバルイルミネーション、正確な反射・屈折、ソフトシャドウ、時には完全なパストレーシング、さらに布・液体・機械動作の物理演算。スタジオのレンダラーは1フレームに数秒〜数分かけてこれを行います。ブラウザは同じ16ミリ秒の予算内で、しかも来訪者が持ち込んだ端末でそれをこなさなければならない——桁違いの差です。

つまりフォトリアルなWeb 3Dという分野全体が、そのフィルムの見えに端末にライブで計算させずにできるだけ近づける戦略の集合です。以下の4ルートは、まさにその戦略です。うまく選べるかどうかが、価格にふさわしく見えるプロダクトビジュアライゼーションと、デモにしか見えない3Dモデルの分かれ目になります。

重い3Dがサイトの検索性能をどう損ない、どう防ぐかという隣接テーマは、WebGL・Three.jsのSEOガイドを参照してください。本記事はビジュアル品質の意思決定に絞ります。


2.「レンダリング品質」とは具体的に何か

この仕事を組み立てるとき、いくつかの用語が必ず出てきます。発注者の言葉で、それぞれが何をもたらすかを整理します。

  • PBR(物理ベースレンダリング)——素材を実際の物理特性(粗さ・金属性・反射性)で記述し、ごまかしではなく正しく光に反応させる方法。実素材らしく見せたい商品の基本線です。PBRは前提条件で、問われるのは周囲のライティングの質です。
  • ライティング/HDRI——商品を照らす環境。フォトリアルな照明設定(実スタジオを高ダイナミックレンジ画像として撮ったものが多い)が、表面を高級に見せます。ポリゴン数より、「レンダー」と「モデル」を分けるのはライティングです。
  • グローバルイルミネーション・反射——面の間で跳ねる光と、正確な鏡面/光沢反射。ライブで行うと最も高価で、欠けると最も気づかれる要素です。
  • ポストプロセス——最終フレームの仕上げ(被写界深度、ブルーム、カラーグレーディング、わずかなグレイン)。計算されたものではなく「撮影された」と感じさせます。

これらを自分で演出する必要はありません。ただ、これらがダイヤルだと知っておくこと。制作会社が「ライティングをベイクして、プリレンダーのヒーローの下にリアルタイムのコンフィギュレーターを置きます」と言ったとき、提案されているトレードオフが理解できるようになります。


3. レンダリング品質のプロダクト3Dへの4つのルート

レンダリング品質のWebプロジェクトは、この4つのいずれか、または意図的な組み合わせです。違いは主に、来訪者の端末でどれだけライブに計算するかと、どれだけ事前に用意するか、にあります。

3-1. リアルタイムPBR(Three.js/WebGPU)

商品をライブの3Dモデルとして、PBR素材とフレーム予算が許す最善のリアルタイムライティングで照らし、ブラウザで毎フレーム描画します。完全にインタラクティブ——回転、コンフィグ、ズーム、色替え。

  • 強み: 本物のインタラクティブ性、即応性、1つのアセットであらゆる角度・構成に対応。
  • 上限: 端末がライブに計算できる範囲に縛られる。良い素材、ベイクしたディテール、強いHDRIでレンダリング品質に驚くほど近づけますが、中位スマホでの完全なライブGIはまだ届きません。
  • 土台:Three.jsがこの用途で最も成熟し、最も幅広く端末検証された実装で、オーディエンスが数百種のスマホに散らばるとき重要になります。WebGPUは対応環境で上限をさらに引き上げ、それ以外にはWebGLフォールバックを用意します。
  • 向いている商品: 構成変更できる商品、ユーザーが操作する必要があるもの(回転・カスタム・開閉)。

下のクリップは、ブラウザ内でライブにシミュレートしたTシャツのリアルタイム布物理です——事前にベイクしたアニメーションではなく、実際の素材のように布が落ち、馴染んでいきます。アパレルを硬いメッシュではなく「布」として読ませるのが、この動きの忠実度です。

3-2. プリレンダー/プリベイク連番(共同主役のルート)

画像をライブに計算する代わりに、事前にフィルム品質で——グローバルイルミネーション、パストレーシング、物理演算を伴うスタジオレンダラーで——レンダリングし、その出力をWebで再生します。来訪者はシミュレーションを実行しているのではなく、その結果を見て、その上にインタラクションが重なります。

これはヒーロー演出ではバイトあたりの画質が最も高いことが多い。レンダーがスマホのフレーム予算に一切縛られないからです。職人技は、再生を動画ではなくインタラクティブに「感じさせる」ところにあります:

  • カメラとライティングの動きをスクロールに振り付け、来訪者が連番を駆動する。
  • 複数のプリレンダー角度や状態をつなぎ、クリックやドラッグで状態間をジャンプさせる。
  • 控えめなリアルタイム要素(パーティクル、反応するハイライト、構成可能なアクセント)をベイクしたフレームの上に合成する。

トレードオフは柔軟性です。プリレンダー連番はレンダリングしたものを正確に映す——色を変えれば再レンダリング。見えを完璧にしたい旗艦ヒーローでは、たいていそれが正しいトレードオフです。

下は私たち自身のBlenderキャプチャ・リグです。Tシャツをハーフドーム状のアイコスフィア内に置き、360°全周で記録することで、1回のパスからWebに必要なものを何でも生成できます——ガウシアンキャプチャ、4Dガウシアン連番、あるいはベイクした透過動画——Blenderが描けるフル品質のまま、それをサイトに載せます。

Tシャツをハーフドーム状アイコスフィア内で360°キャプチャし、ガウシアン・4Dガウシアン・ベイク透過動画を生成するUtsuboのBlenderプラグイン

3-3. ベイクライティングのハイブリッド

中間の道:高価なライティングを一度だけ事前に計算し、モデルのテクスチャに「ベイク」します(ライトマップ、アンビエントオクルージョン、ベイクした反射)。ブラウザはすでにグローバルイルミネーションが当たったように見えるモデルを、安価に描画する——その分のフレーム予算をリアルタイムのインタラクションに回せます。

  • 強み: フィルムの見えの豊かさの多くを保ちつつ、インタラクティブ性も維持、モバイルにも優しい。
  • トレード: ベイクしたライティングは静的——ベイクした照明条件に対して正しい。光を自由に動かすと幻が崩れます。整えたセットの上の固定された美しい商品には最適で、自由なリライティングには不向き。
  • 向いている商品: 定義された「ステージ」上のプレミアム商品で、写真家が照らしたように見せつつインタラクティブにしたい場合。

3-4. ガウシアンスプラッティング

スプラッティングは実物のオブジェクトやシーンを数百万のソフトな点として撮影し、実際の光と素材を写真的な精度で再現します——手作業の素材オーサリングは不要。「この実物をWebで本物らしく感じさせたい」ときに最も強いルートです。

ビューアーで差が出て、その選択は性能とできることの両方に効きます:

  • PlayCanvasSuperSplat——オープンソースのスプラットエディタと、高速なWebGPUレンダラーとLODストリーミングを備えたビューアー(@playcanvas/supersplat-viewer)——を提供します。その仕事は優秀です:撮影データをクリーンアップし、注釈やフライスルー、ポスト効果を加え、磨かれたスプラットシーンを公開する。トレードオフはスコープです——撮影のクリーンアップと表示のパイプラインなので、スプラットは基本的に美しく見せる固定撮影のまま。任意のインタラクティブ3Dを同一シーンに混ぜたり、スプラットをリライティングしたりは、想定の外にあります。
  • Utsuboでは自社のスプラットレンダラーを運用しています。より良いランタイム性能のために作られ、さらに重要なことに、Three.jsの3Dオブジェクトとスプラットを同一シーンで混在させ、スプラットをリライティングし、4Dガウシアンのアニメーションとドラッグ操作を駆動できます。スプラットは固定撮影にはできない演出も開きます:パーティクルロジックのアニメーション(スプラットが点に分解/点から組み上がる)や、2つのガウシアン状態間のモーフィング(ある商品が別の商品へ変形する)。その組み合わせ——フォトリアルな撮影素材、インタラクティブな制作3D、制御可能なライティング、そしてアニメーション——は、既製ビューアーでは得にくいものです。

4Dガウシアンスプラッティングとは?通常の(3D)ガウシアンスプラットは、ある一瞬を切り取った固定キャプチャ——その周りを回り込めますが、時間は止まっています。4Dガウシアンスプラッティングは第4の次元、つまり時間を加えたもの:スプラットが時間とともに変化し、布が落ち着く、蓋が開く、液体が渦巻く——といった動きを、スプラットならではのフォトリアルな品質を保ったまま再現できます(この技術はCVPR 2024の論文4D Gaussian Splatting for Real-Time Dynamic Scene Renderingで定式化されました)。3Dガウシアンが「歩いて回れる写真」なら、4Dガウシアンは「歩いて回れる動画」です。これをThree.jsで動かすと、その動くフォトリアルなキャプチャが、通常の3Dオブジェクトと並んでブラウザで再生され、カメラ操作とインタラクションを重ねられます。

下のフレームは、私たちのカスタムThree.jsプレイヤーで動く4Dガウシアンの初期テストです。Tシャツはプリレンダー・事前計算されていますが、ビューアーはカメラを360°回転でき、同じデータで——布をドラッグする、アニメーションを駆動するといった——インタラクションにも対応します。固定クリップではありません。

UtsuboのカスタムThree.jsスプラットプレイヤーで動くTシャツの4Dガウシアン初期テスト。360°カメラ回転とドラッグ操作に対応

そもそもどう撮るか(スプラット vs フォトグラメトリ等)の選択は撮影手法の発注ガイドを、スプラットの形式とビューアーの詳細はガウシアンスプラッティング完全ガイドを参照してください。スクロール駆動のスプラットヒーロー演出そのものはガウシアンスプラッティング×LPガイドが扱います。


4. ルートの選び方:意思決定フレームワーク

実プロジェクトの多くはルートを組み合わせます——プリレンダーのヒーロー、その下にリアルタイムのコンフィギュレーター。スプラット撮影した環境に制作3Dの商品を置く。それぞれの居場所を決めるために、以下を使ってください。

ルートインタラクティブ性画質の上限読み込み/モバイル向いている商品
リアルタイムPBRフル(回転・構成)高い/端末に依存中程度、要予算設計構成変更品、ユーザーが操作するもの
プリレンダー連番誘導(スクロール/クリック)フィルム級・最高1フレームは軽い/総量は重くなりうる見えを完璧にしたい旗艦ヒーロー
ベイクライティングのハイブリッドフル(固定照明内)高いモバイルに優しい整えたステージ上のプレミアム商品
ガウシアンスプラッティング回転・探索フォトリアル(撮影)エンジン依存/調整レンダラーで改善撮影がモデリングに勝る実物・空間

正直なヒューリスティック:顧客が商品を変える必要があるなら、リアルタイムのルートが要る。商品に惚れさせる必要があるなら、プリレンダーかスプラットがたいてい勝つ。 旗艦ページの多くは両方を行います——上で魅せ、下で操作させる。

自社サイトのために、レンダリング品質の3Dプロダクト体験を計画しています。適切なアプローチの選択を手伝ってください。

前提:

  • 商品/カテゴリー:[記入]
  • 来訪者に最も必要な行動(眺める/構成する/空間で探索する):[記入]
  • 主な端末とオーディエンス:[記入]
  • 商品の見えが変わる頻度(色・バリエーション・シーズン):[記入]
  • おおよその予算帯:[記入]

手伝ってほしいこと:

  1. 主ルート(リアルタイムPBR/プリレンダー連番/ベイクハイブリッド/スプラッティング)を理由とともに推奨
  2. ハイブリッド(例:プリレンダーのヒーロー+リアルタイムのコンフィギュレーター)が適すかを指摘
  3. その選択で受け入れるトレードオフを列挙

5. 商品別:どのルートが合うか

  • 時計。 素材と光がすべて——ケース仕上げ、サファイアのハイライト、文字盤の質感。ショーケースにはプリレンダーのヒーロー(フィルム級)、角度を確認させるならベイクライティングのリアルタイムビューを併用。実物を撮るならスプラッティングも。
  • アパレル/Tシャツ。 布の落ち感と動きが効き、色バリエーションは絶えず変わる。リアルタイムPBRが構成可能性で勝ち(色をライブで切り替え)、布の動きは事前シミュレーションをベイクしてリアルさを足す。
  • スニーカー。 たいてい両方:ビューティーショットにはプリレンダーかベイクのヒーロー、カラーウェイのコンフィギュレーターにはリアルタイムPBR。定番のハイブリッド。
  • ボトル(フレグランス/スピリッツ)。 ガラス・液体・屈折はライブだと手痛く高価。ヒーローにはプリレンダー連番がたいてい正解——屈折がフィルム級に見え、端末は計算しなくて済む。
  • デバイス/ハードウェア。 分解図、仕上げ、ポート。探索と構成にはリアルタイムPBR、モバイルでプレミアムさを保つにはベイクライティング。

6. 性能とモバイルの現実

レンダリング品質も、実機のスマホと実際のWi-Fiに触れて生き残らなければ意味がありません。

  • トラフィックの大半はモバイルで、重いルートほどモバイルに効きます。どのアプローチもモバイル計画が要る——軽量なリアルタイム層、解像度を抑えた連番、最重のヒーローには優雅な静止画フォールバック。
  • 総容量は1フレームのコストと同じくらい重要。 プリレンダー連番は表示は軽いがダウンロードは重くなりうる。バイトを予算化し、段階的にストリームし、鮮明なポスターフレームを即座に見せる。
  • 初回描画は3Dを待てない。 重いバンドルを初回描画の後ろにずらし、読み込み中もページが使えるようにする。
  • 発見性にも効く。 速いテキストのない重いキャンバスはCore Web Vitalsを損ねます——バンドルの遅延、ワーカー側コンパイル、静止画フォールバックはWebGL・Three.jsのSEOガイドが扱います。ここでは繰り返しません。

性能は最後の後始末ではなく、発注書の項目です。


7. よくある失敗

  1. リアルタイムでフィルムの見えを追う。 中位モバイルにライブGIを無理強いすると、速くも美しくもないものができる。端末に合うルートを選ぶか、完璧であるべき部分をプリレンダーする。
  2. フレームレートのために素材品質を妥協する。 商品がブランドなら、その素材を描き切らないのは本末転倒。答えが「これはライブで作らず、プリレンダーする」になることもある。
  3. モバイル計画がない。 美しいビルドが伸び悩む最も多い理由。初日から予算化する。
  4. プリレンダー連番をただの動画扱いする。 スクロール/カメラ/インタラクションの工夫なしでは受動的に感じられ、Webで作る理由を失う。
  5. デモ用にエンジンを選び、端末幅で選ばない。 ワークステーションで完璧でも、オーディエンスが実際に持つスマホ全体で検証が必要。エンジンとレンダラーの成熟度がここで効く。

8. 発注のしかた

レンダリング品質の3DはプレミアムWeb制作の予算帯に乗ります——別カテゴリーではなく、高忠実度の統合3Dビルドです。範囲はルート数、商品数、インタラクティブ性、言語数で変わります。全体像はプレミアムWebサイトの費用ガイドを参照してください。

スコープ予算帯得られるもの
Webサイト内のレンダリング品質3D演出1点300万〜750万円(約$20K–$50K)通常のサイト制作の中に、単一のヒーロー商品をプリレンダーまたはリアルタイム3Dの主役として配置。焦点を絞った1インタラクション、CMS、SEO。
統合型プロダクト3D750万〜1,500万円(約$50K–$100K)複数商品またはヒーロー+コンフィギュレーター、スクロール/誘導ストーリーテリング、統合3D、ヘッドレスCMS、Lighthouse 90+。
フルのプロダクト世界1,500万円超(約$100K–$200K+)複数ゾーン/商品、カスタムインタラクション、スプラット+制作3Dのハイブリッド、多言語、専任の性能エンジニアリング。この規模では回遊型のブランド空間と重なります——デジタルツイン/ブランド世界ガイドを参照。

ベースに加わるもの:

  • カスタム3D/WebGL加算: シーンの複雑さとインタラクティブ性に応じて225万〜1,200万円($15K–$80K)——通常、最大の単一変数。
  • 多言語: 1言語あたり+30〜50%。

制作会社に聞くべきこと:

  1. この商品にどのルートを、なぜ推奨しますか?
  2. 中位スマホでどう動くか——語るのではなく見せてください。
  3. どこがプリレンダーで、どこがライブか。商品を変える必要が出たらどうなりますか?
  4. 端末がフル体験を動かせないときのフォールバックは?
  5. 必要なら、撮影(スプラット)と制作3Dを混在させ、リライティングできますか?

9. Utsuboについて

Utsuboは大阪拠点のクリエイティブ・テクノロジースタジオで、Web上のリアルタイム3Dとインタラクティブインスタレーションを専門とします。本番品質の性能エンジニアリングでWebGL/WebGPUのブランド体験を構築——自社プロジェクトのIVRESS(WebGLフォールバックとTSLシェーダーを両バックエンドで備えたシネマティックなWebGPUサイト)は、FWA Site of the Monthに選出され、CSS Design Awardsでも評価されました。

フォトリアルなプロダクト用途では、自社のガウシアンスプラットレンダラーを運用しています——より良いランタイム性能のために作られ、Three.jsの3Dオブジェクトとスプラットを1シーンで混在させ、撮影したスプラットをリライティングし、アニメーション演出(パーティクルロジック、2つのガウシアン状態間のモーフィング)まで駆動できます。プリレンダー連番の制作とリアルタイムPBRと併せて、すべてのブランドを同じパイプラインに押し込めるのではなく、商品にルートを合わせられます。

忠実度と性能の両方を成果物として扱うリアルタイム3Dのパートナーが必要なら、それが私たちの仕事です。


10. ご相談ください

3Dで本当にプレミアムに見せなければならないプロダクト体験を構築中ですか?私たちはリアルタイム3D、レンダリング品質のプロダクトビジュアライゼーション、没入型ブランドプロジェクトでチームと協業しています。

パートナーシップをご検討中なら、プロジェクトについてお話しましょう:

  • 何を構築しているか、どのような制約があるか
  • 目標に対してどの技術アプローチが適切か
  • 私たちが実行をお手伝いするのに適したパートナーかどうか

プロジェクトについて相談する


11. チェックリスト

  • 来訪者に最も必要な行動を決めた(眺める/構成する/探索する)
  • 主ルートを選んだ(リアルタイムPBR/プリレンダー/ベイクハイブリッド/スプラッティング)
  • ハイブリッドを検討した(プリレンダーのヒーロー+リアルタイムのコンフィギュレーター)
  • 素材とライティングの忠実度を、後回しではなく要件として定義した
  • モバイル計画とフォールバックを発注書に書いた
  • 性能予算(1フレームと総バイト)を事前に設定した
  • 言語とローカライズした問い合わせ窓口を計画した
  • レンダリング品質のWeb 3D(既製レンダリングだけでない)で制作会社を絞り込んだ

よくある質問

なぜWebの3Dの多くは、実物ではなく「3D」に見えるのですか?

リアルタイム3Dがスマホで速く動くよう意図的に簡略化されているからです。60fpsを保つため、ビルドはライティングと素材を近似し、最も重い効果をオフにします。多くのサイトではそれが正解で、問題になるのは商品自体がブランドで、その素材と光が本当にプレミアムに見える必要があるときだけです。

なぜレンダリング品質の3Dをライブで行うのはそんなに高くつくのですか?

フィルム品質の画像はシーン内を跳ねる光をシミュレートします——グローバルイルミネーション、正確な反射、時にパストレーシングと物理演算。スタジオレンダラーは1フレームに数秒かけますが、Webサイトに与えられるのは約16ミリ秒、しかも来訪者が持ち込んだ端末で。端末を溶かさずにこの差を埋めることが、課題の核心です。

Webでハイエンドな見えを得る選択肢は?

4ルートです:リアルタイムPBR(ライブでインタラクティブ、端末に上限)、プリレンダー連番(フィルム品質の出力にインタラクションを重ねて再生)、ベイクライティングのハイブリッド(高価なライティングを一度計算して安価に描画)、ガウシアンスプラッティング(実物のフォトリアル撮影)。旗艦ページの多くはこれらを組み合わせます。

ガウシアンスプラッティングは、商品を3Dで作るより良いですか?

実物のオブジェクトや空間を写真的リアルさで撮るなら、スプラッティングは強い。構成可能なものやまだ存在しないものなら、制作3Dが良い。最良の結果はハイブリッド——撮影した環境にインタラクティブな制作3Dを置く——であることが多い。レンダラー選びも効きます:私たちのものはThree.jsオブジェクトとスプラットを混在させ、リライティングできますが、既製ビューアーでは一般に難しい。

4Dガウシアンスプラッティングとは何ですか?Three.jsで動かせますか?

通常の3Dガウシアンスプラットは、周りを回り込める固定のフォトリアルなキャプチャ——一瞬を切り取ったものです。4Dガウシアンスプラッティングは時間を加えたもので、スプラット品質のリアルさを保ったまま、撮影したシーンが動きます(布が落ち着く、蓋が開く、液体が渦巻く)。3Dガウシアンが「歩いて回れる写真」なら、4Dは「歩いて回れる動画」です。Three.jsで動かせます——私たちは自社のカスタムThree.jsレンダラーで4Dガウシアンを再生し、通常の3Dオブジェクトと並べ、360°カメラ操作とドラッグ操作を重ねています。

プリレンダー連番でもインタラクティブに感じさせられますか?

はい——そこが職人技です。フィルム品質のプリレンダー連番をスクロールで駆動し、角度をつないでクリックで状態をジャンプさせ、ベイクしたフレームの上にリアルタイムのアクセントを合成します。重いレンダリングは事前に済んでいても、来訪者は操作している感覚になります。ヒーロー演出では、バイトあたりの画質が最も高いことが多い手法です。

なぜ他のエンジンではなくThree.jsなのですか?

Three.jsはWeb上で最も成熟し、最も幅広く端末検証されたリアルタイムエンジンで、オーディエンスが数百のスマホ機種に散らばるとき重要になります。WebGPUは対応環境で画質の上限を上げ、それ以外にはWebGLフォールバック。成熟度と端末カバレッジは、壊れた体験を許容できないブランドにとって脚注ではなく機能です。

レンダリング品質のプロダクト3Dの費用は?

プレミアムWebの予算帯に乗ります:レンダリング品質の3D演出1点で約300万〜750万円、統合型プロダクト3Dで750万〜1,500万円、フルのプロダクト世界で1,500万円超——これにカスタム3D加算225万〜1,200万円、1言語あたり+30〜50%が加わります。

スマホで動きますか?

計画されていれば、です。どのルートもモバイル層が要る——軽量なリアルタイム版、抑えた連番、優雅なフォールバック——加えて遅延読み込みとストリーミングのパイプライン。モバイルを初めから予算化すること。無視すれば、オーディエンスの大半を失います。

プロジェクトのご相談
はこちら

構想中のアイデアをお聞かせください。

1〜2営業日以内にご返信します。

このフィールドを入力してください。

このフィールドを入力してください。

このフィールドを入力してください。

またはこちらから打ち合わせを予約

There was an issue sending your message. Please try again.

Thanks—your message has been sent.

大阪・心斎橋発。記憶に残るWeb体験を。大阪・心斎橋発。記憶に残るWeb体験を。

ストーリー×先端技術で惹きつけ、成果につながる導線まで一貫して設計します。

詳しく見る