HTML5-基于WebGL的超逼真雨点水滴打落屏幕特效 | 蓝文资源库

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

得到的结果如下图所示：

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

在线预览网盘下载

网盘下载密码：j456

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

使用方法

关于WebGL

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复