基于WebGL的超逼真雨点水滴打落屏幕特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于WebGL的超逼真雨点打落屏幕特效。该雨点打落屏幕特效有3种效果，分别是雨点打落玻璃窗口效果，雨滴滑落特效和带视频播放的雨滴效果。

WebGL技术对浏览器的要求比较高，请使用最新版本的现代浏览器来查看效果。IE浏览器需要IE11才支持WebGL，关于浏览器对WebGL的支持可以查看caniuse.com。另外DEMO中的视频采用MP4格式，FireFox浏览器不支持这个格式的视频。查看这个DEMO最佳体验是使用谷歌Chrome浏览器来查看。

使用方法

关于WebGL

WebGL是用于渲染2D和3D图形的JavaScript API，它允许使用GPU来提高性能。WebGL基于OpenGL ES，但是他的着色器（shaders）并不是使用JavaScript来写的，而是使用一种称为GLSL的语言编写。如果你想了解更多关于WebGL的信息，请参考：WebGl Fundamentals。

这里我们简单介绍一下WebGL的使用方法：首先需要创建一个canvas元素，WebGL在WebGL上进行渲染，它通过canvas.getContext('2d')来进行上下文的渲染。

<canvas id="container" width="800" height="600"></canvas>

var canvas = document.getElementById("container");
var gl = canvas.getContext("webgl");

接着我们需要告诉程序两个着色器：定点着色器（vertex shader）和片段着色器（fragment shader）。着色器是一个函数，定点着色器会在每个定点运行一次，片段着色器会在渲染每个像素时都调用一次。它们的任务就是返回坐标系和颜色。这是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);

最后，渲染所有的东西。