彩绘波浪动画效果-html代码-BFW代码库

彩绘波浪动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Stream</title>

<style>
  body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #00f;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>

</head>
<body translate="no">
<body>
<canvas id="canvas" width="1400" height="600"></canvas>
</body>

<script>
      var canvas = document.getElementById("canvas");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Initialize the GL context
var gl = canvas.getContext('webgl');
if (!gl) {
  console.error("Unable to initialize WebGL.");
}

//Time step
var dt = 0.0003;
//Time
var time = 0.0;

//************** Shader sources **************

var vertexSource = `
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;

void main(){

	//Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy/resolution.xy;

	float t = time/3.4;
    
  vec2 pos = uv;
  pos.y /= resolution.x/resolution.y;
  pos = 10.0*(vec2(0.5, 0.5) - pos);
    
  float strength = 0.2;
  for(float i = 1.0; i < 9.0; i+=1.0){ 
  	pos.x += ceil(strength) * sin(-777.0+t*i+.4 * pos.y);
    pos.y += strength * cos(992.0*t+i*1.2 * pos.x)-t*19.5;
	}

	//Time varying pixel colour
  vec3 col = 0.6 + 0.9*sin(floor(time+pos.xyx+vec3(0,4,2)));
	
  //Fragment colour
  gl_FragColor = vec4(col,1.0);
}
`;

//************** Utility functions **************

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.uniform1f(widthHandle, window.innerWidth);
  gl.uniform1f(heightHandle, window.innerHeight);
}


//Compile shader and combine with source
function compileShader(shaderSource, shaderType) {
  var shader = gl.createShader(shaderType);
  gl.shaderSource(shader, shaderSource);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw "Shader compile failed with: " + gl.getShaderInfoLog(s.........完整代码请登录后点击上方下载按钮下载查看