作品简介
10年前，WebGL的普及改变了整个浏览器端的应用市场，我们可以在浏览器上利用GPU硬件能力，实现一些高质量高性能的图形绘制和动画渲染。
今天分享的是一个基于WebGL的水波动画，我们可以将该动画应用到任意一张图片上去，实现图片的水波动画特效。同时也可以控制一些参数改变水波动画的样式，例如波纹的方向、大小等。
关键代码
下面的代码主要用于创建WebGL着色器（shader），水波的效果就是通过着色器实现的。
const vsSource = document.getElementById("vertShader").innerHTML;
const fsSource = document.getElementById("fragShader").innerHTML;
const gl = canvasEl.getContext("webgl") || canvasEl.getContext("experimental-webgl");
if (!gl) {
alert("WebGL is not supported by your browser.");
}
function createShader(gl, sourceCode, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, sourceCode);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER);
function createShaderProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(program));
return null;
}
return program;
}
源码下载
“百度网盘: https://pan.baidu.com/s/1wxb1eSArs_8pgYxtTgjihw?pwd=n7kd 提取码: n7kd
