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