webgl+canvas实现线条波纹动画效果代码-html代码-BFW代码库

webgl+canvas实现线条波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现线条波纹动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<style>
    html, body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background:#000;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#000;
}
</style>
  <script>
"use strict";
// webGL line_strip
const webGL = {
	init(options) {
		this.elem = document.querySelector("canvas");
		this.gl = (
			this.elem.getContext("webgl", options) ||
			this.elem.getContext("experimental-webgl", options)
		);
		if (!this.gl) return false;
		const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
		this.gl.shaderSource(vertexShader, `
			precision highp float;
			attribute vec2 aPosition;
			uniform vec3 uHSV;
			uniform vec2 uResolution;
			varying vec4 vColor;
			vec3 hsv2rgb(vec3 c) {
				vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
				vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
				return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
			}
			void main() {
				gl_PointSize = 1.0;
				gl_Position = vec4(
					( aPosition.x / uResolution.x * 2.0) - 1.0, 
					(-aPosition.y / uResolution.y * 2.0) + 1.0, 
					0.0,
					1.0
				);
				vColor = vec4(hsv2rgb(uHSV), 1.0);
			}
		`);
		this.gl.compileShader(vertexShader);
		const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
		this.gl.shaderSource(fragmentShader, `
			precision highp float;
			varying vec4 vColor;
			void main() {
				gl_FragColor = vColor;
			}
		`);
		this.gl.compileShader(fragmentShader);
		this.program = this.gl.createProgram();
		this.gl.attachShader(this.program, vertexShader);
		this.gl.attachShader(this.program, fragmentShader);
		this.gl.linkProgram(this.program);
		this.gl.useProgram(this.program);
		this.aPosition = this.gl.getAttribLocation(this.program, "aPosition");
		this.gl.enableVertexAttribArray(this.aPosition);
		this.positionBuffer = this.gl.createBuffer();
		this.uHSV = this.gl.getUniformLocation(this.program, "uHSV");
		this.gl.enableVertexAttribArray(this.uHSV);
		this.resize();
		window.addEventListener("resize", () => this.resize(), false);
		return this;
	},
	resize () {
		const dpr = window.devicePixelRatio || 1;
		this.width = this.elem.width = this.elem.offsetWidth * dpr;
		this.height = this.elem.height = this.elem.offsetHeight * dpr;
		const uResolution = this.gl.getUniformLocation(this.program, "uResolution");
		this.gl.enableVertexAttribArray(uResolution);
		this.gl.uniform2f(uResolution, this.........完整代码请登录后点击上方下载按钮下载查看