curtains实现冲击波动画效果代码
代码语言:html
所属分类:动画
代码描述:curtains实现冲击波动画效果代码,鼠标点击跟随波纹动画。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { /* make the body fits our viewport */ position: relative; width: 100%; height: 100vh; margin: 0; overflow: hidden; } #wrap-texture{ position: relative; } #canvas { /* make the canvas wrapper fits the document */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { /* define the size of your plane */ width: 100%; height: 100vh; } .plane img { /* hide the img element */ display: none; } </style> </head> <body> <div id="wrap-texture"> <!-- div that will hold our WebGL canvas --> <div id="canvas"></div> <!-- div used to create our plane --> <div class="plane"> <!-- images that will be used as textures by our plane --> <img data-sampler="texture0" id="texture0" src="//repo.bfw.wiki/bfwrepo/image/5ee9f6f685b56.png" crossorigin="anonymous" /> <img data-sampler="ripple" id="noise" src="//repo.bfw.wiki/bfwrepo/image/627afb04496aa.png" crossorigin="anonymous" /> </div> </div> <script id="vs"> #ifdef GL_ES precision mediump float; #endif // those are the mandatory attributes that the lib sets attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat4 texture0Matrix; uniform mat4 rippleMatrix; // if you want to pass your vertex and texture coords to the fragment shader varying vec3 vVertexPosition; varying vec2 vTextureCoord; varying vec2 vRippleTextureCoord; void main() { vec3 vertexPosition = aVertexPosition; gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0); // set the varyings vTextureCoord = (texture0Matrix * vec4(aTextureCoord, 0., 1.)).xy; vRippleTextureCoord = (rippleMatrix * vec4(aTextureCoord, 0., 1.)).xy; vVertexPosition = vertexPosition; } </script> <script id="fs"> #ifdef GL_ES precision mediump float; #endif #define PI2 6.2831.........完整代码请登录后点击上方下载按钮下载查看
网友评论0