ThreeJs-05紋理材質高階操作

Heymar-10發表於2024-12-02
JS

1.紋理操作

1.1 重複、旋轉、位移、縮放

重複

image-20241125201320769

但是要在水平方向上重複，還得允許

image-20241125201420006

image-20241125201441917

image-20241125201450170

image-20241125201529412

image-20241125201536404

按照剛才的重複方式

image-20241125201628021

如果設定為映象重複

image-20241125201648800

image-20241125201653904

位移

image-20241125201725667

image-20241125201807562

image-20241125201747004

旋轉

image-20241125201821448

image-20241125201826778

image-20241125201833346

1.2 翻轉與alpha生成顏色

image-20241125201929241

正常的圖

image-20241125201941864

不翻轉預設是翻轉的

image-20241125202016166

image-20241125202024891

預乘透明度

image-20241125202121034

預先乘透明度

主要是會有一個描邊的效果

image-20241125203012828

GIF

2.紋理屬性

2.1 紋理過濾

比如一張原圖很大，但是到3D場景中要變小，兩個解析度是不一樣的

image-20241125203152418

放大兩種方法

image-20241125203438475

第一種方式是最近鄰

image-20241125203524329

直接取的是畫素來放大

最近鄰就是由原圖附近去找然後模擬一些顏色

image-20241125203541592

設為線性，這個就比較光滑

image-20241125204553276

image-20241125204622429

image-20241125204639637

縮小

image-20241125205133151

最接近的畫素，較粗糙

image-20241125205227723

image-20241125205235707

線性，求平均

image-20241125205250078

但是這兩種都還是有瑕疵，所以誕生了

mipmap解決摩爾紋條紋

mipmap原理是先算好縮小一倍的樣子，再算縮小一倍的樣子，再算，以此迴圈

image-20241125210218980

image-20241125210525697

這是預設的方式

image-20241125210840601

GIF

注意這四種生成mipmap要開起，不然又會產生魔紋

image-20241125211036298

GIF

剩下三種見上，無非就是效能消耗

各項異性anisotropy解決傾斜模糊問題

image-20241125211305134

image-20241125211514624

image-20241125211541942

3.jpg_png_webp_dds_ktx_hdr_exr格式紋理

同一個魚眼圖不同格式

image-20241125212956917

這些格式裡面最小的是ktx2，最大是hdr，主要就是曝光不同，沒有太大曝光要求，肯定越小越好

image-20241125213625702

3.1 英偉達匯出最佳化壓縮

image-20241125213703530

開啟軟體，開啟圖片，正常第一步選擇8bit，rgba

image-20241125214006789

也可以選擇其他比如第二個就是hdr

右下角匯出

image-20241125214116240

可選格式

image-20241125214130548

後面用到可以回看影片教程

3.2 threejs中使用KTX2_DDS_TGA紋理

要使用ktx要匯入載入器

image-20241125214549644

使用載入器要先例項化一個檔案，檔案位置在

image-20241125214657048

image-20241125214712113

移動到public下面

匯出為etx2圖片最好採用編碼

image-20241125214831672

是否翻轉圖片，在匯出時設定

image-20241125214933783

因為設定程式碼會不起效果

image-20241125214954610

匯出的時候如果點選了生成mipmap，那麼久不能成為場景貼圖，這句程式碼失去效果

image-20241125215124910

image-20241125215135100

所以最好不勾選

其他的圖片就類似

image-20241125215219643

image-20241125215237841

3.3設定高動態範圍全景背景色調對映和色調曝光

這是針對於hdr圖的

載入hdr

image-20241125215715062

背景色調

是給渲染器加

image-20241125215743890

值有

image-20241125215754741

第三個一般用於室外更柔和，四五個模擬電影質感

GIF

GIF

曝光

image-20241125220038343

GIF

3.4 高動態範圍EXR_TIF_PNG載入使用

這三個都可以使用hdr的功能

image-20241125220243431

跨平臺

image-20241125220251434

tif類似於hdr也可以調節曝光

image-20241125220319975

image-20241125220352209

4.材質深度模式

離相機遠近叫做深度

image-20241126220330963

深度圖用到的z-buffer演算法

說白了深度效果就是為了在3D中實現遮擋效果

image-20241126222727606

要完成深度，就需要兩張圖，一張繪製出來的渲染圖，一張順帶用程式碼生成的深度圖，那麼兩者結合深度圖越白色的地方就會渲染的比較黑，實現陰影效果，深度越黑的地方實現遮擋效果

image-20241126220840447

深度設定有三種

image-20241126223819354

用在函式里面的有

一般小於等於用的多

輸入畫素就是渲染圖，緩衝器就是深度圖

image-20241126220912366

當前有兩個平面

image-20241126224044366

image-20241126224140770

image-20241126224152102

不寫入

image-20241126224508629

總是寫入

image-20241126224519143

深度寫入和深度測試程式碼

深度寫入就是深度圖會寫入進來，雖然看不到但是存在於記憶體中

image-20241126224728082

深度測試就是檢不檢測深度，比如這裡設定的是比他小就會被大的遮擋，這個紅色要比有光的要大，那麼從紅色望過去按理說會遮擋住有光，那麼此時不開啟有光的深度測試，就不再檢測深度，同時渲染比紅色後渲染，那麼就會看到此時深度不生效

image-20241126225124606

如果做深度測試

GIF

5.材質混合模式

混合模式可用值

image-20241126225517167

設定混合模式，前面都是定義好的，只有最後一種自定義選擇的時候，才能去選擇blending下面的設定

image-20241126225608786

不混合

完全不透明，透明區域用白色覆蓋

image-20241126225625681

additive

兩個顏色直接相加，比如背景牆的黃色和平面的紅色相加 ，白色加上任何顏色還是白色

這種用在光上常見，兩個光結合

image-20241126225807539

目標顏色也就是背景減去原顏色也就是紅色，那就是綠色

其他顏色減去白色都是黑色

image-20241126225906174

直接相乘

兩個顏色相乘會得到一個更暗的顏色

透明乘任何都是白色

image-20241126230057300

剩下就是自定義

5.1透明冰塊透明液體透明杯子多個透明物體混合渲染

一個模型杯子

image-20241126230333437

裡面是裝有水的，但是外面看不見

image-20241126230352128

原因是水是透明的，透明跟玻璃混合有一些問題

載入模型微調資料

先渲染冰塊再水再杯子

image-20241126230629140

隱藏杯子和水，把冰塊材質變為透明

image-20241126230837814

image-20241126230831436

image-20241126230856372

顯示水，發現冰塊不見

image-20241126230920854

拿到水的材質，重新設定材質，並且為透明，透明度為0.5

image-20241126231043360

image-20241126231051966

其原因就是這裡沒有設定混合，所以預設就是原先水的透明度就是1，很透明，和裡面透明物體相乘就還是很透明1，那就完全看不到裡面，所以如果要解決，就把水的透明度調低

然後同樣設定杯子材質透明度

image-20241126231521125

此時能夠勉強看到水和冰塊

image-20241126231540751

第二種解決辦法就是混合

首先先把水混合調為自定義

image-20241126231757132

此時就可以gui去調節

GIF

GIF

image-20241126232035980

同理設定杯子

image-20241126232120909

6.裁剪

6.1 裁剪平面

比如現在有這個一個物體

這是一個

image-20241127222703495

image-20241127222547425

裁剪是材質的屬性，一共三個

image-20241127222617287

首先建立一個平面，這個平面是一個數學庫，不會真正大小，第一個引數是什麼位置，比如下面這個例子就是一個三圍向量，但是平行於y軸

第二個引數就是與原點的距離

image-20241127222910807

image-20241127223008296

然後設定材質的裁剪平面，並且在渲染器開啟裁剪平面

image-20241127223106548

image-20241127223114460

然後就可以透過設定剛才的兩個屬性，單獨來設定就是這麼設定，來達到一個裁剪的不同效果

image-20241127223311208

GIF

裁剪也可以建立多個裁剪平面放入陣列

image-20241127223820278

第一個是平行於y軸，第二個是平行於x軸，也就是第一個右邊，第二個上面會保留

而並集就是所有，也就是兩個都滿足的才會保留

image-20241127223825638

預設的效果是並集，也可以交集，但是交集就是各滿足各的都可以保留image-20241127224031633

image-20241127224042505

image-20241127224047977

6.2 裁剪場景

裁剪場景就要用到渲染器的屬性

image-20241127224157552

xy從什麼地方開始，裁剪寬高多少

image-20241127224229639

image-20241127224238254

那麼此時另外一邊，就可以空出來去弄其他的場景，甚至相機都可以再來一個

比如現在再來一個場景

image-20241127224419245

image-20241127224714127

GIF

7.模板渲染

現在有一個平面一個球

image-20241127225005329

現在實現一個效果，讓小球只渲染在平面上，沒了平面，就沒了小球，這時候就需要平面作為一個模板

image-20241127225112014

首先需要開啟

image-20241127225142113

image-20241127225225859

首先兩個都要設定屬性允許寫入

然後在模板（平面處）設定mask代表者寫入值允許範圍多少

ref是一個基準值，模板和寫入模板的應該保持一致，並且要在範圍內

image-20241127225455910

然後是緩衝區判斷，就是什麼時候允許寫入，這個值表示當他們相等時寫入

image-20241127225712193

image-20241127225719601

最後當深度值和緩衝都相等時，在模板處設定透過寫入方式，固定的值

image-20241127225809225

GIF

image-20241127225956671

7.1 實現金屬切割面

前面裁剪物體後，會發現裁剪到的區域是空心的，如果想要實心呢

image-20241127230045907

實現效果，建立平面，材質，注意屬性metalness是金屬度，roughness是粗糙度

image-20241127230535157

image-20241127230541607

image-20241127230545334

image-20241127230604012

那現在就可以用到模板了，只要切面才顯示

兩個物體首先是裡面這個物體

image-20241127230708504

image-20241127230724419

GIF

相關文章