立体ができたら、表面に模様を貼ります。そのために、 立体の表面のどの点が画像のどの点に対応するかを決めておきます。これが UV です。 回転体なら簡単で、u は一周した角度、v は下から上への位置にすればよい。 05章で uvs.push(j / M, t) と書いていたのがそれです。

次に画像を用意します。ふつうは写真を読み込みますが、このプロジェクトは RawTexture という「生の数値の配列」を作って、 1ピクセルずつ色を計算して詰めます。トーストの焼き色なら、 その位置のノイズを見て、焼けていれば茶色、焼けていなければ白、というふうに。

// 5. TextureLab : 焼き色を1ピクセルずつ描く（トースト.js の考え方）
const data = new Uint8Array(S * S * 4);
for (let y = 0; y < S; y++) for (let x = 0; x < S; x++) {
    const u = x / S, v = y / S;
    const n = fbm(u * 6, v * 6, 21, 5);        // 焼きムラ
    const heat = clamp(bake * 1.4 + (n - 0.5) * 0.6, 0, 1);
    const c = heat < 0.5 ? mix3(CRUMB, CBR1, heat * 2)
                        : mix3(CBR1,  CBR3, heat * 2 - 1);
    const i = (y * S + x) * 4;
    data[i] = c[0] * 255; data[i+1] = c[1] * 255;
    data[i+2] = c[2] * 255; data[i+3] = 255;
}

1枚では足りない。3枚要る

色の画像（アルベド）だけを貼っても、まだ紙に印刷したように見えます。 同じトーストでも、白いところはざらついて光を散らし、焦げたところは少し光る。 その差を伝えるのが2枚目の ORM です。 R に陰り（AO）、G に粗さ（Roughness）、B に金属度（Metallic）を詰めた1枚の画像で、 3つの情報を3つの色チャンネルに同居させています。

3枚目が法線マップ。細かい凹凸を、頂点を増やさずに表現します。 本当は平らなのに、法線だけを傾けて「でこぼこしている」と光に嘘をつく。 トーストの気泡の縁も、クッキーの型押しも、これでやっています。

継ぎ目をなくす

筒に模様を巻くと、一周して戻ったところで模様がぶつかります。 03章で出てきた「u 方向に折り返すノイズ」はこのためのものです。 さらに、05章で分割の列を M+1 本にしていたのも同じ理由で、 u=0 の頂点と u=1 の頂点を別々に持たせないと、継ぎ目の面で模様が逆走します。