3Dモデルを見ていると、形ができたあとに急に生き物らしくなる瞬間がある。
以前、ハリー・ポッター関連の展示で、ワイヤーフレームのモデルと「TEXTURING」「テクスチャ・マッピング」と書かれた画面を見た。左には線と面だけの生物がいて、右には色や表面の違う姿が並んでいる。
そこで気になった。
「テクスチャって、3Dモデルに色を塗ることなのか？」
答えは、半分正しい。
テクスチャは色だけではない。肌、毛、布、金属、汚れ、傷、つや、細かな凹凸まで、モデルの表面がどう見えるかを作るデータだ。
モデリングは形、テクスチャは表面
まず、モデリングとテクスチャを分けて考えると分かりやすい。
| 工程 | 作るもの |
| — | — |
| モデリング | 頭、手足、服、爪などの立体的な形 |
| テクスチャ | 色、模様、傷、汚れ、肌や布の見た目 |
| マテリアル | 光が当たったときの反射や透け方 |
| ライティング | その表面をどう見せるかという光 |
同じ球体でも、白いテクスチャとつやのあるマテリアルを使えばボールに見える。灰色でざらついた表面にすれば石になる。透明な設定と反射を加えればガラスになる。
形が同じでも、表面の情報と光の反応が変わるだけで、別のものに見える。
ワイヤーフレームの次にテクスチャを作る
展示の左側にあるワイヤーフレームは、モデルの骨格ではなく、表面を構成するポリゴンの流れを見せるものだ。
この段階で確認するのは、たとえば次のようなことだ。
- 頭や胴体の形が崩れていないか
- 手足の太さや長さが自然か
- 表面のポリゴンが細かすぎたり荒すぎたりしないか
- 後で動かす場所に、曲がりやすい流れができているか
そのあと、形が決まったモデルに色や質感を重ねていく。
ただし、テクスチャを先に塗っても、鼻の高さや爪の長さは変わらない。立体の形を変えるのはモデリングで、表面の見え方を変えるのがテクスチャだ。
UV展開は、3Dの表面を紙に開く作業
3Dモデルに画像を貼るには、立体の表面を2Dの画像に対応させる必要がある。この作業がUV展開だ。
段ボール箱をハサミで切って、平らに開くところを想像すると近い。箱のどの面が、平面上のどこに来るかを決めてから、その上に絵を描く。
3Dでは、モデルの表面を「U」と「V」という2つの座標に開く。X・Y・Zで表していた立体の位置を、画像上の位置へ置き換えるわけだ。
UVの切れ目が悪いと、画像が伸びる。顔の模様が横に引っ張られたり、服の柄が途中でずれたりする。だから、テクスチャをきれいに塗る前に、UVの開き方を確認する必要がある。
BlenderのUVマッピングの説明では、UVを3Dメッシュと2D画像を対応させるための座標として説明している。
テクスチャは一枚の画像だけではない
実際の3D制作では、表面をいくつかの画像や数値に分けて作る。
ベースカラー
肌の色、髪の色、衣服の色など、基本となる色を指定する。
ラフネス
表面のざらつきや、光沢の少なさを指定する。
値が低いと鏡のように光を反射し、高いとマットで乾いた表面に見える。
同じ灰色でも、ラフネスが違えばプラスチック、濡れた皮膚、石のように見え方が変わる。
ノーマルマップ・バンプマップ
画像の明暗を使って、細かい凹凸があるように見せる。
ウロコや毛穴を一つずつ立体化しなくても、光の当たり方を変えて表現できる。見た目の凹凸なので、モデルの輪郭そのものは大きく変わらない。
ディスプレイスメント
表面を実際に押し出したり、へこませたりする。深いシワや大きなウロコなど、輪郭にも影響する凹凸に向いている。
このように、テクスチャは単なる「色の画像」ではなく、表面の性質を分担して持っている。
テクスチャを作る順番
キャラクターなら、ざっくり次の順番で進める。
- 立体の形をモデリングする
- 動かすなら、曲がる場所のポリゴンを整える
- UV展開して、表面を2Dに開く
- ベースカラーを塗る
- 傷、汚れ、模様、陰影を加える
- ラフネスやノーマルなどのマップを作る
- マテリアルに接続する
- 光を当てて、実際にどう見えるか確認する
BlenderにはTexture Paintがあり、3Dビューポート上でモデルに直接色を塗ることもできる。塗った内容はUVに対応した画像へ反映される。BlenderのTexture Paint公式マニュアル
Blenderで作ったものを、Three.jsでブラウザに置く
ここで、Blenderだけに話を閉じなくてもいい。
Blenderは、立体の形、UV、テクスチャ、マテリアルを作る道具だ。そこからGLBやglTFのような形式で書き出したモデルを、Three.jsでブラウザへ持っていく。
役割を分けると、こうなる。
| 道具 | 役割 |
| — | — |
| Blender | 形、UV、テクスチャ、マテリアル、アニメーションを作る |
| Three.js | ブラウザにシーン、カメラ、光、モデル、操作を置く |
| Webブラウザ | 回転、ズーム、アニメーション、クリックなどを体験してもらう |
Three.jsでは、テクスチャの付いたモデルを置くだけでなく、カメラを動かしたり、ライトの方向を変えたり、マウスやタッチで回したりできる。
私が作っているTibo RESET BATTLEも、3Dモデルをブラウザの中に置き、パンチ、キック、構えを触って試せるようにしたものだ。
ここで大事なのは、「Blenderを使える人だけが3Dを作れる」と考えないことだ。Blenderで素材を作り、Three.jsで見せ方を作る。あるいは、簡単な形ならThree.jsのGeometryとMaterialだけで作る。目的に合わせて道具を分ければいい。
たとえば、今回の展示にあった生物モデルなら、次のようなページにできる。
- 3Dモデルをマウスや指で回す
- テクスチャを切り替えて、肌や毛の違いを見る
- 光の向きを変えて、凹凸やラフネスを比べる
- ワイヤーフレーム表示と完成表示を切り替える
- 動物の動きや表情をブラウザで試す
説明文を読むだけでは分かりにくい「形と表面の違い」を、自分で触って確かめられる。これが、テクスチャをThree.jsへ持っていく面白さだ。
Three.jsの基本は、公式マニュアルのFundamentalsで、シーン、カメラ、レンダラーを用意して画面に描画する流れから確認できる。
「質感」は色より光で分かる
テクスチャを学ぶとき、色を細かく描くことに目が行きやすい。
でも、見た人が「これは布だ」「これは濡れた皮膚だ」「これは金属だ」と感じる決め手は、色だけではない。
- 光がどれくらい広がるか
- ハイライトが鋭いか、ぼやけているか
- 表面が均一か、傷や汚れがあるか
- 影がどこに残るか
この組み合わせで、触れたときの硬さや湿り気まで想像できる。
だから、テクスチャを作ったら、正面の明るい画面だけで終わらせないほうがいい。少し横から光を当てる。暗い場所にも置いてみる。近くで見る。遠くから見る。
そのときに、色だけでなく表面の違いが読めれば、テクスチャが機能している。
初めて試すなら、立方体で十分
いきなり人間や魔法生物を作らなくてもいい。
Blenderで立方体を作り、UV展開して、チェック柄の画像を貼る。面によって柄が伸びていないかを確認する。そのあと、同じ立方体に木、金属、石の表面を作ってみる。
この小さな練習で、次の違いが分かる。
- 形を変えるのがモデリング
- 画像を貼る場所を決めるのがUV展開
- 色や凹凸を作るのがテクスチャ
- 光への反応を決めるのがマテリアル
生物のモデルなら、肌、髪、服を別々に考えるとさらに分かりやすい。肌は少し柔らかく、髪は細かく光り、服は織り目としわがある。同じモデルの中でも、場所ごとに表面のルールが違うからだ。
形に命を入れるのがテクスチャ
ワイヤーフレームの生物は、まだ「形」しか持っていない。
そこへ色を置き、表面の粗さを変え、細かな凹凸や汚れを加える。最後に光を当てると、ただのポリゴンだったものが、皮膚や毛や衣服を持った存在に見えてくる。
モデリングが身体を作る工程だとしたら、テクスチャはその身体が何でできているのかを伝える工程だ。
展示で見た「TEXTURING」という言葉は、モデルに色を塗るだけの作業ではなかった。3Dの形に、触れたくなる表面と、そこにある理由を重ねる作業だった。
そして、そのモデルをThree.jsでブラウザに持っていけば、完成画像を見せるだけで終わらない。回して、光を変えて、動かして、触ってもらえる。
