当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

简介

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

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

```html
<canvas id="container" width="800" height="600"></canvas>
var canvas = document.getElementById("container");
var gl = canvas.getContext("webgl");
```
接着我们需要告诉程序两个着色器：定点着色器（vertex shader）和片段着色器（fragment shader）。着色器是一个函数，定点着色器会在每个定点运行一次，片段着色器会在渲染每个像素时都调用一次。它们的任务就是返回坐标系和颜色。这是WebGL的核心应用。

现在开始创建着色器，下面是一个定点着色器：这里简单的进行处理，在顶点不做任何处理，让数据简单的通过：

```html
<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>    
```            
下面是片段着色器：它根据坐标位置来设置每个像素的颜色。

```html
<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的上下文中。

```html
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);     
```           
然后，我们需要创建一个对象，并在它里面渲染着色器。这里简单的插件一个矩形对象。

```html
// 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);  
```              
最后，渲染所有的东西。
```html

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果