webgl+canvas实现彩色网格变色变形动画效果代码-html代码-BFW代码库

webgl+canvas实现彩色网格变色变形动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现彩色网格变色变形动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  
  background:
  repeating-radial-gradient(
  circle at center,
    #444 0 10%,
    #111 10% 20%
  );
  
  touch-action: none;
}

canvas {
  width: 100%;
  height: auto;
  object-fit: contain;
}
</style>


</head>

<body >
  <canvas id="canvas"></canvas>

  
      <script >
/*********
* made by Matthias Hurrle (@atzedent)
*/

/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext('webgl2');
const dpr = window.devicePixelRatio;
const touches = new Set();

const vertexSource = `#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

in vec2 position;

void main(void) {
    gl_Position = vec4(position, 0., 1.);
}
`;
const fragmentSource = `#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/

#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

uniform vec2 resolution;
uniform float time;

#define T time
#define S smoothstep

out vec4 fragColor;

float hash21(vec2 p) {
  p = fract(p * vec2(324.967, 509.314));
  p += dot(p, p + 75.09);

  return fract(p.x * p.y);
}

float flip(vec2 p) {
  float rand = hash21(p);
  return rand > .5 ? 1.: -1.;
}

mat2 rot(in float a) {
  float s = sin(a),
  c = cos(a);

  return mat2(c, -s, s,.........完整代码请登录后点击上方下载按钮下载查看