基于WebGL的超逼真雨点水滴打落屏幕特效

当前位置:主页 > Html5库 > html5 canvas > 基于WebGL的超逼真雨点水滴打落屏幕特效
基于WebGL的超逼真雨点水滴打落屏幕特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-11-05
    阅读:
简要教程

这是一款基于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);                
              

最后,渲染所有的东西。

gl.drawArrays(gl.TRIANGLES, 0, 6);                
              

得到的结果如下图所示:

WebGL效果

现在你可以尝试制作自己的着色器。在ShaderToy这个网站上有很多关于着色器的例子,你可以参考。