教程手冊：The Book of Shaders

教程地址：https://thebookofshaders.com/05/?lan=ch

最近了解了一下Shader的內容，看到了這本書，當看到此章節(jié)時，很是愚笨，未能理解如下這段代碼的意思，看不懂其中的幾個算法表達的是什么意思。

代碼片段一：

上述代碼對應圖案為：

后來逐步的深入了解smoothstep函數(shù)和剔除一些無關的計算，大概明白了一些內容，這里記錄下來。

我們先將無關的計算剔除掉，變成如下的內容和圖案。

代碼塊二：

對應圖案：

這里我們看到，只是變動了?color = pct*vec3(0.0,1.0,0.0); 這一行，去掉了背景的漸變。背景成為了黑色，當時我在思考，背景默認是黑色吧（疑點1）？還是很迷糊，沒有理解，看了smoothstep函數(shù)的由來，寫了個小例子來驗證smoothstep函數(shù)的結果，大概已經(jīng)理解了一些。

后來覺的還是很懵，這還不是我想要的，我想要更直觀的表現(xiàn)方式，于是拋開上述已有的代碼，思考如果自己劃線改如何畫。

我們想到，y=x，并且還有線寬，好像有點意思了。于是乎寫了下面的代碼。

代碼片段三：

嗯，這里看到了我們想要圖案，這里是在書籍網(wǎng)站的代碼塊中實時編輯的，我們把代碼放到KodeLife（學習Shader的IDE）中看看，如下。

咦，線條沒了，背景色也變了，怎么回事呢？

經(jīng)過一番嘗試后，加上了背景色，想要的圖案又回來了，如下代碼片段四。

好像理解了什么，背景色并不是默認為黑色，（應該是緩存區(qū)沒有刷新，導致屏幕上輸出的一直都是線條的顏色，我們加上了背景色之后就好了，個人猜測，有大佬可以指點一下。）

好了，到了這里我們明白了線條是怎么畫出來的，怎么來的了，就是修改不同位置的顏色輸出，就可以得到自己想要的圖案。

嗯，我們的看起來好像很毛躁，沒有原書中的那么平滑。

我們再把原書中的smoothstep拿出來放到我們自己代碼中看看。

代碼片段五：

嗯，很平滑，也有了黑色的背景。這是因為smoothstep每次計算都會給出不同的值，不在上下限的值會給出0或1，調換smoothstep的參數(shù)一和參數(shù)二，就會看到這種效果。

如下：

至此大概對smoothstep的概念和用法有了一定的了解。