WebGL實現雨水特效實驗
今天我們將要和大家分享一些 WebGL 實驗，在這個實驗中我們將創建一個非常逼真的雨滴效果，并把它放到不同的場景中去。在這篇文章中，我們將給出制作這種效果所用到的一些一般性技術和技巧的概覽。
請注意：文中制作的效果還處于試驗階段，可能無法在所有瀏覽器中都看到預期的效果。***使用 Chrome。
入門
如果我們想制作一個基于現實世界的效果，那么首先我們需要剖析一下它看起來究竟是什么樣子的，這樣制作出的效果才能顯得真實。如果你去找一些水滴落在窗戶上的圖片來看(當然，你肯定已經在生活中觀察過他們了)，你會發現由于折射，雨滴似乎會把它后面的圖像上下顛倒。
圖片來源：Wikipedia, GGB reflection in raindrop
同時你還會看到相互之間距離很近的雨滴會合并成一個——而且如果超過了一定的尺寸，它就會向下滑落，并且留下一道小小的痕跡。
為了模擬這種行為，我們必須繪制大量的雨滴，在每一幀上都更新它們的折射效果，并且要在一個合適的幀率下做這些事情，為此我們需要極好的性能———所以，為了能夠使用顯卡的硬件加速，我們將使用 WebGL。
WebGL
WebGL 是一個繪制 2D 和 3D 圖形的 JavaScript 接口，并且允許使用 GPU 以獲得更好的性能。它基于 OpenGL ES，著色器由一門叫做 GLSL 的語言寫成，而不是 JS。
總之，如果你僅僅做過網頁開發，那么它看起來是很難使用的——這不僅僅是一門新的語言，而且還是一個全新的概念——但是一旦你掌握了一些核心的概念，它就會變得容易不少。
在這篇文章中我們將僅給出一些基本的使用示例，更多深入的解析請參閱 WebGl Fundamentals 。
首先我們需要一個 canvas 標簽。WebGL 是在 canvas 上繪制的，它是一個繪制環境，類似于我們用 getContext('2d') 獲取到的繪制環境。
- <canvas id="container" width="800" height="600"></canvas>
- var canvas = document.getElementById("container");
- var gl = canvas.getContext("webgl");
接下來我們需要一段程序，它由頂點著色器和片段著色器(譯注：『片段著色器』又稱『像素著色器』)構成。著色器就是一些函數：頂點著色器在每個頂點執行一次，而片段著色器在每個像素上都被調用一次。它們的任務分別是返回坐標和顏色。這是我們的 WebGL 應用的核心。
首先來創建我們的著色器。這是一個頂點著色器，我們不會對頂點做任何修改，所以簡單地讓數據穿過它就好了：
- <script id="vert-shader" type="x-shader/x-vertex">
- // gets the current position
- attribute vec4 a_position;
- void main() {
- // returns the position
- gl_Position = a_position;
- }
- </script>
這個是片段著色器。這個著色器將會根據坐標來設置每個像素點的顏色。
- <script id="frag-shader" type="x-shader/x-fragment">
- precision mediump float;
- void main() {
- // current coordinates
- vec4 coord = gl_FragCoord;
- // sets the color
- gl_FragColor = vec4(coord.x/800.0,coord.y/600.0, 0.0, 1.0);
- }
- </script>
現在我們把著色器連接到 WebGL 環境中去：
- function createShader(gl,source,type){
- var shader = gl.createShader(type);
- source = document.getElementById(source).text;
- gl.shaderSource(shader, source);
- gl.compileShader(shader);
- return shader;
- }
- var vertexShader = createShader(gl, 'vert-shader', gl.VERTEX_SHADER);
- var fragShader = createShader(gl, 'frag-shader', gl.FRAGMENT_SHADER);
- var program = gl.createProgram();
- gl.attachShader(program, vertexShader);
- gl.attachShader(program, fragShader);
- gl.linkProgram(program);
- gl.useProgram(program);
接下來我們創建一個對象然后在它上面繪制我們的著色器。這里我們來畫個矩形——確切地說，畫兩個矩形。
- // create rectangle
- var buffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
- gl.bufferData(
- gl.ARRAY_BUFFER,
- new Float32Array([
- -1.0, -1.0,
- 1.0, -1.0,
- -1.0, 1.0,
- -1.0, 1.0,
- 1.0, -1.0,
- 1.0, 1.0]),
- gl.STATIC_DRAW);
- // vertex data
- var positionLocation = gl.getAttribLocation(program, "a_position");
- gl.enableVertexAttribArray(positionLocation);
- gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
***，繪制整個圖像：
- gl.drawArrays(gl.TRIANGLES, 0, 6);
結果如下：
之后你可以盡情玩弄這些著色器以便搞明白它是怎么工作的。你可以在 ShaderToy 上找到很多很棒的著色器的例子。
雨滴
現在讓我們來看看如何制作雨滴的效果。首先我們來看一下單個的雨滴是什么樣的：
現在這里發生了很多事情。
Alpha 通道變成了這樣是因為我們使用了類似于文章 Creative Gooey Effects 中提到的一個技術來讓雨滴粘連到一起。
顏色變成這樣也是有原因的：我們使用了類似 法線貼圖 的技術來實現折射效果。我們將利用雨滴的顏色來獲取我們透過雨滴看到的貼圖的坐標。這是沒有遮罩時它的樣子：
在這張圖片中，我們將通過綠色通道的數據來獲取 X 坐標，通過紅色通道的數據來獲取 Y 坐標。
現在我們可以寫我們的著色器了，并且可以同時使用貼圖數據和雨滴的位置來翻轉并扭曲雨滴后方的貼圖了。
下雨過程
在創建雨滴之后，我們就可以開始對下雨進行模擬了。
讓雨點之間相互作用是很難快速計算的——隨著新的雨點的到來，運算量將會呈指數級增長——所以我們必須做一點優化。
在這個示例中，我把大雨點和小雨點分開了。小雨點繪制在一個單獨的 canvas 上，并且沒有沒追蹤。這樣我就可以繪制上千個小雨滴而且不會讓速度有任何減慢。缺點是它們都是靜態的，而且由于我們每幀都在創建新雨滴，他們將會累積起來。為了修復這個問題，我們將會使用大一點的雨滴。
由于大雨滴是會移動的，于是我們可以利用它們來清除它們下方的小雨滴。擦除操作在 canvas 中比較麻煩：實際上我們還是要畫一些東西出來，但是要使用 globalCompositeOperation='destination-out。因此，每當一個大的雨滴移動，我們就會在小雨滴的 canvas 上繪制一個圓，并使用復合操作來清除這些雨滴，使效果更加逼真。
***，我們把所有這些繪制在一個大的 canvas 上，然后把它作為我們的 WebGL 著色器的貼圖。
為了把它做得更輕便一點，我們要利用背景會失焦這一事實，因此我們用了一個小尺寸的貼圖，然后把它放大。在 WebGL 中，貼圖的尺寸會直接影響到性能。我們需要用另外一個沒有失焦的貼圖來制作雨滴。模糊是一個代價很高的操作，實時的模糊處理應該盡量避免掉——但是由于雨滴很小，我們可以把貼圖也變得很小。
總結
為了制作像雨滴這樣的逼真的效果，我們需要考慮很多復雜的細節。先將效果從現實世界中分離出來是重建任何一個效果的關鍵所在，一旦知道了它在現實世界中是如何工作的，我們就可以把它的行為映射到虛擬世界。有了 WebGL，我們可以獲得很高的性能(我們可以使用顯卡的硬件加速)因此對于這類效果，它是一個很不錯的選擇。
希望各位喜歡這個實驗并且受到啟發!
示例(http://tympanus.net/Development/RainEffect/)
源碼(http://tympanus.net/Development/RainEffect/RainEffect.zip)
