做圖形就要玩shader，我的shader進階之路，從學習怎么使用shaderToy開始。首先介紹我是看哪篇文章學習的，給出參考文章地址：https://blog.csdn.net/xufeng0991/article/details/78076824，由於本菜鳥是第一次玩shaderToy，就完全根據丿寒灬風丨博主的腳步往前走，一步一步學。
第一步，咱來注冊一個賬號哈。簡單方便，有賬號了，我的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