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);
			}
		`);
		th.........完整代码请登录后点击上方下载按钮下载查看