shadertoy 這個網站如何玩？

---

首先要明白一點，shadertoy是一個 基於 pixel shaders 的 playgrounds.

對於pixel shaders不同於傳統意義上的shader,傳統意義上的shader是根據GPU渲染管線，從cpu把圖元傳遞到頂點著色，在通過varing傳遞給片元，從而處理光照的。所以頂點著色器是每個頂點運行一次，而片元著色器是每個片元（像素）運行一次。而pixel shaders中你可以理解成只是相當於在opengl中只對片元著色（fragment）進行編程，你可以想像成是一個canvas畫布。

想要開始進行shadertoy學習，你先從如下幾點入手：

1、了解GLSL的基本語法，並掌握數據類型（比如向量，矩陣），以及一大堆c語言的處理函數

可以從這幾個資源去學習：

1.1 GLSL. 語法基礎；

1.2 GLSL 內建函數

1.3 片元著色編程學習：The Book of Shaders

1.4 馮樂樂寫的相關教程：【ShaderToy】 - candycat

2、有了以上對於glsl的基本語法以及片元著色編程的基礎，就學習shadertoy自己的幾個API,參見如下網址：http://www.shadertoy.com/howto

尤其需要注意一下幾個件事：

2.1、入口函數不是main,而是 void mainImage( out vec4 fragColor, in vec2 fragCoord );

2.2 、 shadertoy自己的輸入值

uniform vec3 iResolution;

uniform float iGlobalTime;

uniform float iGlobalDelta;

uniform float iGlobalFrame;

uniform float iChannelTime[4];

uniform vec4 iMouse;

uniform vec4 iDate;

uniform float iSampleRate;

uniform vec3 iChannelResolution[4];

uniform samplerXX iChanneli;

3、shdertoy的擴展了幾個特殊輸入

3.1 聲音著色器：vec2 mainSound( float time ) 本質上就是H5的audio而已，但通過shader輸入。

3.2 VR著色器： void mainVR( out vec4 fragColor, in vec2 fragCoord, in vec3 fragRayOri, in vec3 fragRayDir )

以上這些在官網的howto裡面全有。

4、掌握了如上這些知識，基本上可以嘗試寫shader了。沒事多看看上面幾個大神的的作品裡代碼的實現，也經常去逛逛這些大神的blog。很多實現的思路可以從他們的分享里獲得，比如iq[http://www.shadertoy.com/user/iq], Fabrice Neyret[https://www.shadertoy.com/user/FabriceNeyret2]

另外或許好的shader需要充分學習關注大神們的數學思路，注意學習圖形學千萬別過多關注代數意義，而要把精力放在矩陣、向量、標量這三者運算的幾何意義上！

————————————————————

補充《關於shadertoy如何製作3Dshader》：

1、shadertoy輸入源只有默認的幾張圖和2段視頻

2、利用shadertoy製作的3D的模型的話，使用的是ray-Marching技術構建的distance filed

所謂ray-marching類似於簡單的ray-tracing原理。

3、過程化建模。

利用數學公式構建基礎幾何體，比如球體，盒子，錐體，圓柱體之類。然後利用交差並補運算做排列組合。在加以blend和twist等扭曲計算。

4、利用這種方法建立的模型都是體素。形狀變換複雜，可以非常真實的描繪全局光線。但運算量巨大。

5、過程化材質

具體請看iq大神博客：

fractals, computer graphics, mathematics, demoscene and morewww.iquilezles.org

iq大神的視頻教程：

https://www.youtube.com/user/mari1234mari

這個視頻教程包含基礎的shadertoy如何寫

https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg/videos

想要更多探討可以加我的群：570851203【視覺效果編程】，大家一起探討。

---

推薦閱讀：