KEN’S CAT LOG

Codexでザグレブの朝・昼・夜を作ってみた 🌅🚋🌙 Blenderの街を、夜のThree.js散歩へ

今回は、ザグレブのイェラチッチ広場をBlenderで作って、朝・昼・夜の3つの表情を撮ってみたよ 🌅🚋🌙

先に大事なこと! ここに載せているのは実写写真じゃなくて、制作した3Dシーンのレンダリング。現地の完全なデジタルコピーでもないよ。360度写真と地図を参考にした、まだ作り込み途中の街なんだ。

でも、同じ街でも光を変えるだけでこんなに雰囲気が変わるの、けっこう楽しい…!✨

朝:街が起きる前の、ちょっと静かな時間 🌅

暖かい朝の斜光を受ける騎馬像とザグレブの街並み。BlenderによるCGレンダリング。

朝は低い角度の暖かい光を入れて、建物に長い陰影が出るようにしたよ。ブロンズの馬と、少し眠そうなカフェ席。まだ誰も座っていない広場って、散歩したくなる感じがあるよね ☕

これは「この日の朝6時45分のザグレブ」を厳密に再現したものではなく、朝らしさを狙って照明を調整したカット。薄曇りの空も、以前の工程で画像生成機能を使って作った背景を利用しているよ。

昼:青いトラムが、街の色になる 🚋💙

曇り空の昼光に照らされた青いトラム2台。隣り合う線路に逆向きで配置したCGシーン。

昼の主役はザグレブらしい青いトラム! TMK 2200を参考にした近似モデルを、もう一方の線路にも置いて、2台が逆向きに並ぶ構成にしてみたよ。

車体だけじゃなく、連接部分、窓、ドア、車輪、屋根上の機器、パンタグラフも別の形として作っている。とはいえ、実車の設計図どおりの精密模型ではないので、そこは今後の伸びしろだね 🔧

昼は柔らかい曇天の光で、青い車体と石造りの街並みが素直に見えるようにした。トラムを「それっぽい場所」に浮かせるのではなく、地図から取り出した線路の中心線に合わせて置いたよ。

夜:街灯と星空、石畳の反射がいちばん好き 🌙✨

星空の下、暖かい街灯と青い月光に照らされたイェラチッチ広場。石畳に光が反射する夜のCGレンダリング。

個人的にはこの夜がいちばん好き! 暖かい街灯と青い月明かりを組み合わせて、石畳は少し湿ったような反射にしたよ。ここは雰囲気づくりの演出で、撮影当日の天気を再現しているわけではないんだ。

街灯は光る絵を貼っただけじゃなくて、器具の3Dモデルと、周囲を照らす光源を分けて定義している。地図で位置を確認できた街灯は39本。そのうち4灯式と記録されている14本には、写真を参考にした渦巻きの装飾と吊り下げ型の球灯を付けたよ。

星も演出用の空で、実際の星座配置ではないよ。でも、夜の街を歩く気分にはかなり効く…!🌌

実際の作業は、こんな感じだった 🛠️

制作操作は全部Codexから行ったよ。Blenderの操作はMCP経由のPython、確認はレンダリングとスクリーンショット、記事と画像の投稿はyasue.orgのAPIを使っている。

  1. 街の土台:360度写真を参照し、OpenStreetMapの建物の輪郭や線路を取り込んで、周囲の建物を立体化。
  2. 細部の修正:騎馬像の馬の首・顔・脚、人物の腕、軍服、台座の銘板を作り直し。近接写真だけでは脚の向きを読み違えて、全身写真を見て修正する場面もあったよ。
  3. カフェ席の調整:「机と椅子を10倍に!」で一度200台・400脚にしたら、さすがに多すぎた 😂 最終的にはテーブル60台・椅子120脚に減らして、店舗前の4か所に集めた。
  4. 階段と街灯:地図に入っていたのにモデル化から漏れていた階段を追加。街灯も適当な等間隔配置から、地図上の位置へ置き直した。
  5. 朝昼夜の撮影:カメラ位置、光の色、明るさ、反射を変えて、実際に同じ3Dシーンをレンダリング。CGの上からAIで街を描き直した画像ではないよ。

「数を増やす」と「現地らしくする」は別なんだな、というのが今回の感想。机を大量にばらまくより、お店の前にぎゅっと集めたほうが街らしく見えるんだよね ☕✨

次は、夜の街をThree.jsで歩く 🎮

このBlenderモデルを使った、夜固定のThree.jsビューアも実装しているよ。モデルはGLB形式へ変換して、ブラウザ向けにデータを圧縮。建物、カフェ家具、像、2台のトラムを持ち込んでいる。

操作はWASDで移動、マウスで見回し、Shiftで早歩き。建物や家具の簡易的な衝突判定も用意した。大量の照明を全部同時に計算すると重いので、近くの街灯を優先する構成にしているよ。

Web版は現在、本人向けの非公開プレビューとして準備している段階。この記事の画像はBlender版で、Three.js版の画質や反射が完全に同一になるわけではないよ。

もしくはここを開いてね
https://ja.yasue.org/embed/2026-09-06/2956db8fb61c85ad/index.html

まだ完成ではないところも、ちゃんと書いておくね 📝

騎馬像は実物と見分けがつかない写実性にはまだ届いていないし、建物の装飾には繰り返しや推定が残っている。カフェ席の数や配置、段差の高さ、街灯の一部の形も近似。地図は2026年取得で、参考写真は2016年なので、その時差もある。

今回は「完成した街を自慢する記事」というより、Codexで作って、見比べて、直して、光を変えてみた制作記録。こうやって少しずつ街の表情が出てくるのが、いちばんおもしろいところだと思う 🌃

参考にしたもの 🔗

地図データ:© OpenStreetMap contributors、ODbL。参照写真そのものの転載はしていないよ。掲載した3枚は、今回制作したBlenderシーンから出力したものだよ。