https://www.armbbs.cn/forum.php?mod=viewthread&tid=116944

超強的區域性渲染著色器shadertoy，VSCode上也有對應的外掛

https://www.shadertoy.com/

他們官網上分享了很多炫酷的設計Demo效果，每個都是渲染著色出來的。







VSCode也有對應的外掛
https://marketplace.visualstudio.com/items?itemName=stevensona.shader-toy

https://zhuanlan.zhihu.com/p/477011787

對shadertoy早有耳聞，實在驚歎於大神們把數學轉化為美妙影象的黑魔法。這兩天快速瞭解了一下shadertoy的一些原理，也寫了幾個shader，此文記錄一下我對於shadertoy的基礎認識。此文不做具體的技術介紹，只是分享我對shadertoy的整體認識，以及文末提供收集的一些學習資料。

• 2d繪圖

抽象的來理解，shadertoy就是提供了一塊畫布，但是與processing或者一些手工繪圖工具不一樣，shadertoy的操作物件是畫素點，需要用程式指定每個畫素點的顏色。從原理上來說，shadertoy是一個畫素著色器，輸入變數是每個畫素點的座標fragCoord，輸出變數是每個畫素點的顏色fragColor，我們在shadertoy裡面的工作就是計算或者指定fragColor的值。由於畫素是影象最基本的單元，所以理論上shadertoy可以繪製出任何效果。

畫素繪製。基於shadertoy的工作原理，最容易想到的繪製方法就是將畫素點的座標通過一些數學計算和變化，最後賦值給顏色。計算螢幕座標uv值、三角函式等都是常用的手法。下面是一位大神的作品。

幾何繪製。shadertoy，或者說glsl，沒有提供繪製基本幾何圖形的函式，但是我們可以自行定義這些函式。比如說，要畫一個圓心在p半徑為r的圓，那麼滿足length(fragCoord-p）==r的畫素點就在圓上了。推廣一步，只要是有解析式的二維圖形，我們都可以用這種方式來繪製。如果把他們封裝成函式或者結構體，我們就可以用繪製幾何圖形的方式來寫shader了。

• 3d繪圖

由於shadertoy只提供畫素著色器（相當於一塊平面畫布），不提供頂點著色器，也不能輸入模型，所以在三維物體的渲染和製作上有難度。其中常用方法是SDF（符號距離函式）和raymarching的方法。

我們在maya或者rhino中建模時，大多數建立的幾何圖形時顯式幾何，通常我們指定一些控制點、控制線就可以繪製圖形，這些圖形非常直觀容易容易控制，但是很難計算距離。還有一種幾何稱為隱式幾何，比如說球體，他們往往可以用一個數學公式表達，這非常便於求距離或者判斷位置關係。