之前做網站的時候一直驚歎老外的網頁有一個可以動的粒子背景，也一直找不到合適的方法來做。學了threejs之後，終於可以大展身手了。效仿的網址連結是：http：//dnacapital。com/
網站效果：
其實之前文章《threejs將動態模型轉化為動態粒子效果》中也提到過這個製作方法。今天的文章主要是GLSL材質的除錯。
1。 準備好相應的模型
因為要高度效仿原網站，所以從network裡下載了原網站的模型，在https：//gltf-viewer。donmccurdy。com/這個預覽模型網站上看到的效果：
2。 載入模型的程式碼：
3。 材質部分定義了3個顏色值：
4。 獲取模型中所有的點加到場景中：
5。 postprocessing的效果用了官網的bloom這個效果，可以讓底部虛化
引入4個js庫
6。 在自定義PASS中用了chromatic-aberration的效果，可以讓邊緣虛化。網址為https：//github。com/spite/Wagner/blob/master/fragment-shaders/chromatic-aberration-fs。glsl
7。 調整材質的引數
8。 對應的vertex。glsl檔案：
9。 對應的片元著色器程式碼：
10。 渲染：
最終效果：
總結：
有了這個效果，可以做很多炫酷粒子動畫，對模型進行簡單處理，抽出所有的點，做一些動畫。另外這個效果也可以不用模型，直接用程式碼寫，將一個平面透過球型方式扭曲也可以製作同樣的效果。對GLSL的材質控制有了更深的理解。
關於作者
做一隻爬的最久的烏龜，保持學習保持好奇，即使慢一點，遇到一點困難，只要最後能到達終點，又有什麼關係呢。
畢竟人生沒有白走的路，每一步都算數。
