3D ／ WEBGL EXPERIENCE
VITRINE — 硝子の間
同じ 7 章を、スクロールではなく「1 操作 = 1 章」で巡る単体版。 部屋・展示物・ポストエフェクトの実装はこのページと同一のものを共有しています。 違うのはカメラの進め方だけです。
- GLB 16 点 ／ Draco 圧縮
- 文字を被写界深度から外す専用パス
- DPR 上限 1.75 ／ 自動降格
単体版を開く
光の起点
実在の部屋で撮られた HDRI が、この展示室のすべての反射を決めています。 ランタンの炎だけが唯一の実光源で、あとは環境光の仕事です。
- HDRI ENVIRONMENT
- POINT LIGHT × 1
- ACES FILMIC
金属の時間
金属は「色」ではなく「映り込み」で出来ています。粗さ 0.15、金属度 0.95、 環境光強度 2.5。数値を外すと、途端に灰色のプラスチックになります。
- ROUGHNESS 0.15
- METALNESS 0.95
- ENV INTENSITY 2.5
硝子を抜ける光
透過率 0.95、粗さ 0.05、屈折率 1.5。厚みのある硝子の中で光が曲がり、 波長ごとにわずかにずれて虹の縁が生まれます。背後の壁がそのまま像になります。
- TRANSMISSION 0.95
- IOR 1.5
- CHROMATIC ABERRATION
薄膜の虹
貝殻の内側やシャボン玉の色は、色素ではなく膜の厚みが作ります。 見る角度で色が変わるこの現象は、KHR_materials_iridescence として glTF に入っています。
- KHR_materials_iridescence
- THICKNESS 400nm
- ENV INTENSITY 2.4
布のきらめき
ベルベットの縁が白く光るのは、繊維が斜めから来た光を散らすからです。 通常の PBR では表現できず、sheen という専用の項目で計算しています。
- KHR_materials_sheen
- ROUGHNESS 0.8
- METALNESS 0.0
革と真鍮
革は粗さ 0.8・金属度 0、そしてノーマルマップが必須です。 同じ光でも、革は光を吸い、真鍮は返す。この差が「本物らしさ」の正体です。
- LEATHER r0.8 m0.0
- BRASS r0.2 m0.9
- NORMAL MAP
琥珀の中の時間
厚みのある物体の中で光がどれだけ減衰するか。密度と距離で色が決まります。 四千万年ぶんの樹脂を、たった 800KB の GLB が持ち歩いています。
- KHR_materials_volume
- ATTENUATION DISTANCE
- DRACO 804KB
01 ／ STANDARD
守るものが三つ、
それ以外は自由。
表現の方向性はプロジェクトごとに変わります。変わらないのは、この三つだけです。 すべて「見た目の好み」ではなく、破ると体験が壊れるという理由で決めています。 いま通り過ぎた 7 章は、この三つだけで組み立ててあります。
-
01
プロシージャル形状の禁止
NO PROCEDURAL SHAPES
球と立方体を組み合わせて「車らしきもの」を作らない。 実地検証済みの GLTF と PBR テクスチャだけを使います。 手癖の形状は、拡大された瞬間に必ず嘘だとわかるからです。
-
02
裏画面の 100% 遮断
ZERO BREAKAWAY
章と章の間で展示物が入れ替わる瞬間、画面は必ずアイリスが覆っています。 覆いきった 1 フレームでだけ差し替え、カメラもそこで飛ぶ。 スクロールを止めても、逆に戻しても、空白のフレームは出てきません。
-
03
実時間の光と反射
REAL-TIME LIGHTING
単色の黒背景に平行光を一灯、で済ませない。 HDRI 環境光と PBR を全要素に強制し、金属は roughness 0.15 / metalness 0.95、 硝子は transmission 0.95 / ior 1.5 と、数値で管理します。
02 ／ WORKS
二本のレーンで作ります。
3D と 2D は、測る項目が根本的に違います。前者はドローコールと VRAM、 後者は LCP と転送量。同じ物差しで語らないことが、どちらも speed で殺さないコツです。 このページは両方を一枚に載せた形で、レーン単体の実装も別に置いてあります。
2D ／ HTML ・ CSS
STUDIO — 依存 0 の 2D 版
フレームワークなし、外部ホスト 0、ラスター画像 0 枚。 このページのトークン（色・寸法・動き）は、そちらの CSS 設計をそのまま 暗い面に移したものです。
- 依存ライブラリ 0
- ブレークポイント 3 個固定
- prefers-reduced-motion 対応
2D 版を開く
RESEARCH ／ FIELD NOTES
実サイト解析ノート
他社の実サイトを DOM・CSSOM・ネットワークまで降りて解析し、 1 テーマ 1 ファイルで記録しています。この一枚の構成も、 常駐キャンバス方式の実サイト解析から起こしました。
- 3D レーン ／ 2D レーン
- 数値は実測のみ
- 推測は推測と明記
03 ／ NUMBERS
感想ではなく、数値で。
「速い」「重い」は担当者ごとに違う言葉です。合意できるのは数値だけなので、 着手前に必ずこの表を握ってから作り始めます。
0倍
和文の行間
欧文基準の 1.5 では和文は詰まって見える。1.7〜1.8 が実測での基準値。
0fps
3D の下限フレーム
下回った端末は DPR とポストを一段ずつ落として維持する。上げ直さない。
0ホスト
サードパーティ
解析タグは体験を落とす最大要因。必要なら 1 コンテナに統合してから載せる。
0MB
3D アセット総量
GLB 16 点を Draco 圧縮して自ホスト。全部先に積み、幕で隠しきる。
初回 43.7MB・VRAM 302MB という構成でも、 待ち時間を隠す仕掛けとセットなら成立する。 逆に言えば、隠す仕掛けの無い「全部先に積む」設計は破綻する。
04 ／ PROCESS
五段階。
最初の二つが本体です。
制作より前に、素材と限界値を決めます。ここを飛ばすと、 出来上がったあとに「重いから削る」という一番つらい引き算が始まります。
-
STEP 01
限界値の合意
目標端末、転送量の上限、VRAM の上限、下限フレームレート。 4 つの数字を先に決めます。表現の議論はその内側でだけ行います。
-
STEP 02
素材の確保と検証
GLTF・HDRI・PBR テクスチャをライセンスごと確保し、圧縮して実機で開く。 「動くはず」の素材は使いません。開いたものだけが素材です。
-
STEP 03
動線と遷移の設計
カメラが通る場所、章が入れ替わる瞬間、失敗した時に何を出すか。 空白が出るポイントを先に列挙し、そこに演出を割り当てます。
-
STEP 04
実装と実測
ドローコール、テクスチャ VRAM、LCP、CLS。 週次で同じ項目を測り、悪化した週に必ず原因を特定します。
-
STEP 05
降格経路の実装
低スペック端末・WebGL 不可・コンテキスト消失。 3 つの経路すべてに、黒画面ではなく「見える結果」を用意して納品します。
05 ／ STACK
引用元を明かします。
使っている素材とライブラリは、出所とライセンスまで含めて開示します。 出所の言えない素材は、納品後に必ず問題になるからです。
| 名称 | 用途 | ライセンス |
|---|---|---|
| glTF-Sample-Assets | PBR 検証済みの標準 3D モデル | 各アセット準拠 |
| Poly Haven | HDRI 環境光 ／ PBR テクスチャ | CC0 |
| AmbientCG | PBR マテリアル | CC0 |
| Draco | メッシュ圧縮のデコード（自ホスト） | Apache-2.0 |
| React Three Fiber | WebGL のレンダリング層 | MIT |
| YakuHanJP ／ YakuHanMP | 約物だけを詰める和文サブセット | MIT |
| Noto Sans JP ／ Zen Old Mincho | 本文 ／ 見出しの和文書体（使用文字だけに削って自ホスト） | OFL 1.1 |
NOTE 外部 CDN の直リンクは、実績のあるホストでも体験の単一障害点になります。 落ちた時に巻き添えで落ちるのは、こちらの体験の方です。だから全て自ホストにしています。
06 ／ FAQ
よく聞かれること。
3D は重いのでは？ スマートフォンで見られますか。
見られる設計にします。DPR に上限と下限を設け、フレームレートが落ちた端末では 解像度とポストエフェクトを一段ずつ落とします。WebGL が使えない環境と、 動きを減らす設定の利用者には 3D 自体を配らず、読み物として同じ内容を出します （軽量版はここから）。「重いから諦める」ではなく 「降格して必ず何かを見せる」が基本方針です。
一枚に全部載せると、最初のロードが重くなりませんか。
本文と 3D を切り離せば重くなりません。このページの最初の描画は 静的な HTML と自ホストのフォントだけで完結していて、3D は後から 別ファイルで届きます。逆に、一度積んでしまえばページ遷移が起きないので、 以降はどの章へ移っても読み込みは 1 バイトも走りません。
制作期間と体制はどれくらいですか。
規模によりますが、3D 体験は素材確保に想像の倍かかると考えてください。 モデルとテクスチャが揃っていれば実装は進みますが、 揃っていない状態で始めると、実装が素材待ちで止まります。 最初の二週間を素材と限界値の確定に充てる進め方を推奨しています。
和文のデザインで、まず何を直すべきですか。
約物（、。「」）の余白です。約物サブセットを font-family の先頭に 一行足すだけで、和文の見た目は一段変わります。 次に行間を 1.8 に、本文の色を純黒からわずかに温かい黒に。 この 3 つは、費用対効果が突出しています。
納品後、自分たちで更新できますか。
2D はトークン（色・サイズ・余白の変数）を CSS の先頭に集約して納品するので、 値の変更だけなら 1 ファイルで完結します。 3D は章の構成・カメラ経路・文言を 1 つの設定ファイルに集約します。 更新が難しいのは仕組みの問題であって、依頼側の問題ではありません。
07 ／ CONTACT
まず、限界値の話から。
「かっこいい 3D が欲しい」より、「どの端末で、何秒で、何を見せたいか」から 始める方が早く着地します。決まっていなくても構いません。一緒に決めます。
- 対応端末と目標フレームレート
- 公開予定日と、動かせない日付
- 既に持っている素材（モデル・写真・ブランド規定）