貼圖入門


目前為此建立的 3D 物件都是白色,你可以使用 fillstroke 等函式,決定 3D 物件的填滿或線條顏色,如果要貼圖呢?可以使用 loadImage 載入圖片,然後透過 texture 來貼到 3D 物件上:

texture 除了可以接受圖片之外,還可以是 createVideo 建立的影片,甚至是 createCapture 建立的視訊作為來源。

在上面的範例中,正立方體的六面分別被貼上了圖片…這是正立方體貼圖時的預設,然而若是球呢?每種內建的 3D 物件,預設會有不同的貼圖方式,你可以自行試試看,你沒辦法調整各自的預設貼圖方式,只能選擇適當的圖片來貼,通常就是有重複圖樣,且正好可以作為內建 3D 物件的皮膚。

有沒有調整貼圖方式的參數或函式呢?texture 本身沒有可調整的參數,然而有 textureWraptextureMode 可以使用,只不過,這兩個指令對內建的 3D 物件,沒有太大的意義,因為內建的 3D 物件貼圖行為是固定的。

textureWraptextureMode 主要用於〈自訂 3D 物件〉,因為在使用 vertex 時,其實可以指定 uv 參數的值,分別代表貼圖來源的座標,使用 u 與 v,是因為 x、y、z 符號已用於 2D 或 3D 座標軸,為了討論時避免混淆,才使用 u、v,表示指的是貼圖來源座標,也就是 UV 貼圖(UV Mapping)這名稱的來源。

例如,想為正立方體六面貼上不同的圖呢?這需要在繪製每一個面前,呼叫一次 texture,改變貼圖來源。例如:

在呼叫 vertex 時,如果不指定 uv,那麼會以貼圖來源原尺寸繪製,這時若圖片大於貼圖片,就看不到完整的圖片,上面的範例透過 textureMode 設定 NORMAL,這表示將貼圖來源的大小,標準化為 0 到 1:

貼圖入門

每個頂點指定其對應的貼圖座標,p5.js(底層的 WebGL)就會自行計算,該使用圖片的哪個像素來繪製;其實 textureMode 的預設值是 IMAGE,也就是可以指定像素座標,只不過以上範例的圖片來源大小不一,為了省麻煩,標準化為 0 到 1,才設定 textureModeNORMAL,也因為將矩形的圖塞入正方形區域,圖片其實是有些變形的。

因為多面體通常不規則,指定的頂點通常不會是如上範例四個點,而會是三角形區域,例如,為正四面體貼圖:

如果你指定的 uv,在 IMAGE 模式下,不是在圖片尺寸範圍內,或者在 NORMAL 下,超出 0 ~ 1 的範圍,這時就要注意 textureWrap 設定,預設是 CLAMP,也就是取圖片邊緣像素延伸繪製,就像是將夾住彩色黏土的邊拉長那樣,若設為 REPEAT,那就是重複拼貼,若設為 IMAGE,那就是鏡像拼貼。

例如,若使用底下圖片作為貼圖來源:

貼圖入門

你可以試著改變底下範例的 textureWrap 為不同的值,拖動滑鼠,滑鼠座標會用來計算 u、v,令 u、v 可能超過圖片尺寸範圍,看看不同值下會呈現什麼樣的效果: