ぽいもの本舗

Labs

作り直した謎の祠

Claude Code × Blender × Three.js

最初に作った謎の祠は、自分で歩いて見たときに「PlayStation 1初期みたいだな」と感じました。そこでモデルを増やすのではなく、素材・光・形・接地・背景を順番に作り直して、最後にThree.jsへ持ってきたものです。

読み込み中…

ドラッグで回転、ホイールかピンチで拡大、右ドラッグで移動できます。屋根の板、壁の下見板、岩の眼窩あたりを近くで見てみてください。

最初と最後

作り直す前の祠。面取りがなく、質感がのっぺりしていて、背景も地面も単色
最初
作り直したあとの祠。板を1枚ずつ組んだ壁と屋根、苔と草の生えた地面、木立の背景
最後

最初は形を増やせば良くなると思っていました。実際に一番効いたのは、PBRマテリアルと斜めからの光でした。そのあと屋根板や壁板、眼窩を実際の形として作るとさらに良くなりました。

何を作り直したか

形そのものは同じ「謎の祠」と「目の付いた岩」です。増やしたのはポリゴン数ではなく、材質・光・実際の造作・地面との接し方・背景の5つです。カメラの位置と画角は最初から最後まで固定して、同じ絵で比べられるようにしました。

何が一番効いたか

  • ポリゴン数を増やすだけでは、ほとんど良くなりませんでした
  • PBRマテリアル（色・粗さ・法線）を入れた時点が、いちばん変化が大きかったです
  • 斜めからの太陽、HDRIの環境光、地面に落ちる影で、形が読めるようになりました
  • 屋根板・壁の下見板・岩の眼窩を、テクスチャではなく実際の形にすると立体に見えました
  • 草と苔はGeometry Nodesで散らし、日陰・湿り・道の3つの条件で生え方を変えました

ブラウザへ持ってくるときにしたこと

Blenderの手続き的なマテリアルとCyclesの間接光はそのままでは動かないので、テクスチャに焼いてから持ち出しました。焼いた色・粗さ・法線をGLBに入れ、間接光はlightmapとして2枚目のUVに載せています。草が全体の7割近くを占めていたので、葉の作りを見直して減らしました。ジオメトリはDracoで圧縮しています。

テクスチャはKTX2（Basis）に変換しました。WebPやJPEGはGPUに載る時点で非圧縮に戻るので、1024pxのテクスチャで約85MB使っていました。KTX2ならGPUが対応する圧縮形式のまま置けるので、同じ解像度で約21MBまで下がります。転送量は少し増えますが、目的はそちらではなくGPU側のメモリです。

やってみて分かったこと

きれいに見えない原因を「情報量が足りない」と思い込んでいましたが、実際には光と材質で形が読めていないだけでした。板を1枚ずつ組む、岩に窪みを彫るといった作業が効いたのも、その形が影を作るからです。ブラウザへ持ってくる工程では、見た目を保つことよりも、どこを落としても気づかれないかを探す時間の方が長くなりました。

使用技術

  • Three.js
  • WebGL
  • Blender
  • Cycles
  • PBR
  • KTX2 / Basis
  • Draco
  • Claude Code
  • Astro
  • TypeScript

テクスチャとHDRIはPoly HavenのCC0素材（rock_face_03 / forrest_ground_01 / weathered_brown_planks / mossy_rock / je_gray_02）を使っています。

関連