目次/第06章
模様も、その場で描く
UV mapping & procedural textures
- 立体に模様を貼るには「立体のどこが画像のどこか」の対応表が要ります。これがUVです。
- 画像ファイルを持たないので、模様も
<canvas>に1ピクセルずつ計算で描きます。 - 色（albedo）・光り方（ORM）・凹凸（normal）の3枚を、同じ元データから作ります。
立体に模様を貼るには、立体のどこが画像のどこかという対応表が要ります。
それが uvs です。掃引のコードで u = j/(M-1)、v = i/(N-1) と
入れていたあれです。u が「一周まわる方向」、v が「下から上」。
地球儀の経度・緯度だと思えばだいたい合っています。
このプロジェクトは画像ファイルを持たないので、模様も <canvas> に
1ピクセルずつ計算で書き込んでテクスチャにします。担当が TextureLab です。
しかも1枚ではなく、同じ「高さの地図」から3枚を作って辻褄を合わせます。
| 名前 | 役割 | 中身 |
|---|---|---|
| albedo | 色そのもの | 赤・緑・茶などの下地の色 |
| ORM | 光り方 | R=陰り / G=粗さ / B=金属っぽさ を1枚に詰めたもの |
| normal | 細かい凹凸 | 面の傾きのずれをRGBで記録したもの |
normal（法線マップ）が面白いところです。実際には形を変えず、 光の当たり方だけを嘘つくことで、細かいシワやイボがあるように見せます。 三角形を増やさずにディテールが出るので、非常に安上がりです。 作り方は、白黒の高さの地図から、となりのピクセルとの差（傾き）を計算して色にするだけです。
実験 — 模様を描いて、貼る
縞が上下の極（へた側とお尻）で1点に集まります。u を周方向にとった結果、勝手にそうなります。
法線マップを自分で焼くとき、上下方向の符号を間違えると
凹みが膨らみに見えます。Babylon.js の座標系では
(下のピクセル - 上のピクセル) が正解で、逆にすると
OpenGL系の規約になってしまい、横方向は正しいのに縦方向だけ反転した
「ねじれた法線」ができます。キュウリ.js・ゴーヤ.js・サツマイモ.js の
修正履歴に、全部この話が出てきます。
- 「UVの格子を重ねて見る」を入れて、上下の極で格子が1点に集まることを確かめる。
- スイカの縞で「細かさ」を上げると、何本の縞になるか数える。
- きゅうりのイボを、強さ0にしてみる。イボが無いと何に見えるか。