中級Shader教程03 2Dshader框架

//

0.2Dshader設計流程

0.確定shader效果
1.空間劃分
2.透視模擬

1.空間劃分

程序實現對多個物體進行屬性修改或創建的時候，往往會用到for循環，但是在shader中，for循環是每個pixel都要執行的，效率很低，而且從另外的角度來看，一個屏幕有大量的pixel，這本身就是一種潛在的大循環。所以在2D shader中for循環是被類似”pixel劃分整個屏幕”這種空間劃分的技巧所代替。(ps：3D中是對整個世界空間進行格子劃分來實現for循環)

舉個例子：
在空間中繪製不同顏色的圓形格子

1.空間劃分

uv *=20;//將uv放大後frac
uv = frac(uv);

如下：從左到右一次爲原始uv，grid後的uv,以及根據grid後的uv繪製的圓

2.每個grid獲取ID

fixed2 Hash22(fixed2 co){
    fixed x = frac(sin(dot(co.xy ,fixed2(122.9898,783.233))) * 43758.5453);
    fixed y = frac(sin(dot(co.xy ,fixed2(457.6537,537.2793))) * 37573.5913);
    return fixed2(x,y);
}

fract(sin(x*bigVal1)*bigVal2)產生的數比較隨機的原因是：
sin(x*bigVal1) 會將x值的變化波動被放大，且隨機，設這個值的變化爲detX,則 frac(detX*bigVal2) 會讓本來的小的波動再次放大，然後fract會讓整體的數的變化受影響的因素變多，所以得到的了一個較爲隨機的值

3.添加隨機值

讓每個柵格擁有不同的隨機值

fixed2 r = Hash22(floor(uv));
col = fixed3(r,0.0);

2.透視效果分析

使用2D模擬3D需要考慮透視問題，如下圖：

總體有以下幾點：

1. 前景看到的東西會比較大
2. 前景看到的東西會比較少
3. 前景看到的物體會比較清晰(模擬現實)

3.範例目錄

接下來的幾個粒子都是使用這個套路實現。下面是幾個場景中覆蓋的知識點：

1.2DSea

.length
.atan 極座標
.smoothstep
.sin cos

2.2DSnow

.hash
.空間劃分

3.2DFireParticle

.hash
.nois

4.2DLava

.fbm

---

7.鏈接：

• 本教程配套項目源碼
• 本人shadertoy地址
• 第一時間更新blog地址