京都・渡月橋を3Dで再現しました — 四季と夜の嵐山をブラウザで散歩

京都・嵐山の渡月橋と桂川、その向こうの山並みを、ブラウザで歩ける3Dにしました。橋を渡り、欄干の近くから川を眺め、春の桜や秋の紅葉、夜のライトアップを切り替えられます。新潟レインボータワーの再現と同じように、ページを開いてそのまま遊べます。

▶ 遊ぶ: 京都・渡月橋 3D・VR再現（無料・登録不要。PC・スマホ。対応する環境ではVRも利用できます）

渡月橋とは

渡月橋は、京都の嵐山で桂川に架かる橋です。現在の橋は1934年（昭和9年）に架けられ、橋長155m、幅員12.2m。構造は15連の単純SRC桁橋で、木の欄干や側面の化粧材が周囲の景色になじむ外観を作っています。橋の大きさと構造の基準には、一般財団法人 橋梁調査会の渡月橋資料を使いました。

今回は、この橋と両岸、桂川、嵐山の近景から作り始めました。京都全域の再現に向けた最初の地区です。

できること

• 橋と川辺を歩く: 橋の中央、北詰の嵐山側、南詰の中之島側、桂川のほとりへ移動できます。上の「移動」から場所を選べるので、見たい景色へすぐ行けます。
• 視点を切り替える: 景色を回して眺める視点、一人称の散歩、人物が見える三人称を選べます。三人称の人物には、既存の新潟・Aurora Cityで使っているモデルを再利用しています。
• 時間と季節: 朝・昼・夕・夜と、春・夏・秋・冬を切り替えられます。桜やモミジ、山の色、水面や空の明るさが変わります。
• 夜のライトアップ: 夕方と夜は橋と山の照明が自動で点きます。「夜の照明」で手動のオン・オフも選べます。
• 川の環境音: 「川の環境音」を押すと、ブラウザで生成した流れの音を聞けます。最初はオフ、音量は35%です。音を使うかは自分で選べます。
• 全画面と画質: 全画面ボタン、またはFキーで画面を広く使えます。描画が重いときは画質を「バランス」に切り替えてください。スマホは横向きがおすすめです。
• VR: WebXRに対応したブラウザとVRゴーグルで、対応が確認できた場合にVRの入口が表示されます。VRゴーグルの実機では、まだ動作を確かめていません。

PCの散歩はWASDキーか矢印キーで移動し、Shiftで走り、Vで視点を切り替えます。マウスで向きを変えられ、スマホでは画面のタッチ操作を使います。

渡月橋のモデルをBlenderで作りました

橋はBlenderで作成しました。長さと幅、15の径間を基準に、コンクリートの橋脚と桁、木製の欄干、側面の斜めの化粧材を組み立てています。欄干の近くまで寄ったときにも部材の厚みが分かるよう、橋の側面と手すりを立体で作りました。

木とコンクリートには、色だけでなく表面の凹凸や粗さを表すマップを用意しました。モミジと桜、季節ごとの葉、河原の石も今回のために作成しています。遠くの森は、作った樹木を描画した画像を使い、近くの木との見え方をそろえながら描画の負担を抑えています。

橋の大きさには公開資料を使っていますが、個々の木材の断面寸法や傷み方、色は写真からの推定を含みます。測量した橋の複製ではありません。

地図と標高から嵐山の周辺を作りました

道路、建物の平面形状、川の輪郭、橋の位置にはOpenStreetMapのデータを使いました。緯度経度をメートルの座標へ変換し、橋を基準に配置しています。山や周辺の地面は、国土地理院の標高タイルを加工して作りました。

周辺の建物は、地図の外形をもとにした簡略な形状です。すべての店の外壁や看板、屋根、庭まで再現したものではなく、地図に高さがない場所は推定を含みます。川の水位や河床、岸と橋のつながり、植生にも再現のための調整を加えています。標高を細かい間隔で補間しても、元データの測量精度が上がるわけではありません。

地図データは © OpenStreetMap contributors（ODbL）。標高は国土地理院の標高タイルを加工して作成しています。

夜の橋と、水面に映る光

夜は橋を暖かい金色、山並みを青い光で照らし、桂川にその色が映るようにしました。昼と同じ場所から時間を切り替えると、橋の木の色や水面の見え方の変化を眺められます。

この照明は、参考の夜景写真に寄せて作った演出です。現在の現地の常設照明や、催しの開催日・点灯時刻を記録したものではありません。昼の景色を見たいときは時間を戻すか、照明をオフにできます。

川の音は、自分でオンにする合成の環境音です

川の環境音は、Web Audioを使ってブラウザ内で生成しています。現地で録音した音や、配布されている録音素材は使っていません。

ページを開いた直後はオフで、音量の初期値は35%です。ボタンを押して開始し、同じ操作で止められます。時間や季節を変えても勝手に再生を始めません。タブを隠したときは休止します。音量はスライダーで調整できます。

再生・停止や音量の制御は確認していますが、スピーカーやヘッドホンを使った実際の聞こえ方の確認はまだです。

再現の範囲と、これからの京都

今回歩けるのは渡月橋を中心にした嵐山の一地区です。橋の主要な寸法、地図の外形、標高データを基準にしていますが、周辺の細部や素材の見え方は推定を含みます。現地の完全な写しや、京都全域が完成したものとしては扱っていません。

これから地区ごとに地図と標高、出典をまとめ、近くでは細部を描き、遠くでは軽い形状を読み込む仕組みを広げていく予定です。渡月橋で作った木や石、植生、季節と時間の切り替えを次の地区でも使えるようにして、京都の再現を少しずつつなげていきます。

PCとスマホのブラウザでは画面と操作を確認しました。VRの実機確認と、周辺建物の細部の作り込みは今後の課題です。気づいたことがあれば、この記事のコメントで教えてください。

▶ 京都・渡月橋 3D・VR再現で遊ぶ

関連: 新潟レインボータワーを3D・VRで再現しました

出典・クレジット

• 橋の寸法・構造: 一般財団法人 橋梁調査会「渡月橋」。
• 地図: © OpenStreetMap contributors、Open Database License。
• 標高: 国土地理院 地理院タイル（標高）を加工して作成。利用条件。
• 3D描画: Three.js（MIT License）。モデルの圧縮データの読み込みにはGoogle Dracoを使用。
• 橋・樹木・葉・河原石・素材マップ: 今回の再現作業で作成。人物は既存サイトのアセットを再利用。川の音はブラウザ内で生成する合成音です。

この記事の画像は、今回作成した3Dをブラウザで表示したスクリーンショットです。参考にした現地写真を、記事の画像や公開用テクスチャーとして転載していません。