WebGL之shaderToy初使用
做圖形就要玩shader，我的shader進階之路，從學習怎麼使用shaderToy開始。首先介紹我是看哪篇文章學習的，給出參考文章地址：https://blog.csdn.net/xufeng0991/article/details/78076824，由於本菜鳥是第一次玩shaderToy，就完全根據 ofollow,noindex">丿寒灬風丨 博主的腳步往前走，一步一步學。
第一步，咱來註冊一個賬號哈。簡單方便，有賬號了，我的shaderToy賬號就是ccentry，截圖一張 
好了，我們已經可以看到，有很多demo可供學習，那麼我們就來做一個我們自己的小demo吧。我們新建一個demo，我們看到新建的demo給出了示例程式碼，如下圖
在右側的editor中我們可以看到，片段著色器的主函式是mainImage，帶2個引數 fragColor和fragCoord，其中fragColor是out vec4思維向量，fragCoord是in vec2二維向量，前者代表rgba顏色，後者代表螢幕XY的座標。我們來看看片段著色器對這兩個引數都做了什麼事。下面先把程式碼貼出來。
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.1 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
}
我們看到第一句註釋//Normalized pixel coordinates (from 0 to 1)，這句是說單位化片段的XY座標，使片段XY處於0到1區間內，這是怎麼做到的呢，他是通過將片段座標去除以iResolution解析度的xy，這就很討巧了，不管你螢幕解析度怎麼變化，都能將你的片段座標單位化到空間(0, 1)區間內，這樣就能統一空間座標系了不是。
接下來的第二件事就和時間軸有關係了我們在第二句程式碼中一點一點來分析，第二句程式碼是變色的關鍵，我們先來看這個0.1，這個我把他理解為環境光，當該值為0.1時，我們來看看顯式的效果是怎麼樣的，如下圖所示。 
我們可以看到，畫布的顏色是偏暗的，接下來就要滿足我的好奇心，我們把他改成0.7看看會怎麼樣，請看修改後的結果如下圖所示。
我們看到，畫布整個變亮了，這說明就是這個引數調節整個畫布的明暗程度，此引數越大，畫布越亮，越小越暗。
接下來我們看看第二句程式碼還做了什麼事，我們看到0.5*cos()，那麼這個0.5所代表的是啥，這裡做個實驗，我改成0.1試試啥效果，請看下圖。
我們再把他改成0.7試試看，效果如下。
我們對比一下發現，這是透明度的引數，越小越透明，越大越不透明。接下去我們看cos()內部的操作。我們在cos()內部是這樣寫的
iTime*0.3+uv.xyx+vec3(0,2,4)
這裡的iTime是幀重新整理率，這個數越大，動畫速度越快，也就是同樣的操作幀速越高。這裡*0.3就是減緩速度。uv.xyx是片段的座標，很多小夥伴問，為啥是xyx不是xxx也不是xyy呢，那麼我做了一下實驗，這個xyx是橫向縱向橫向繪製，xyy是橫向縱向縱向繪製，xxx是橫向橫向橫向繪製，最後的vec3()是繪製的顏色。不好理解，我就是靠自己不斷的改引數實驗出來的結論。接下來這個cos我也改成sin，發現也是呈漸變的繪製，所以這個數學函式可以改成任意的三角函式，就是一個時間曲線，類似bezier曲線。控制繪製時間週期的
最後我們來看看最後一句程式碼
// Output to screen fragColor = vec4(col,1.0);
很簡單，如註釋所言，輸出繪製的片段到螢幕上。
這是我第一次嘗試shaderToy，謹以此篇記錄第一步，再接再厲，給自己打打氣。感謝J.C大佬，繼續學習shader。如需引用本文，請註明出處： https://www.cnblogs.com/ccentry/p/10049113.html