webgl实现线圈网状交织屏保动画效果代码-html代码-BFW代码库

webgl实现线圈网状交织屏保动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现线圈网状交织屏保动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  height: 100vh;
  margin: 0;
}
body, html, #glcanvas {
overflow: hidden
}
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>

  
  
</head>

<body translate="no">
  <canvas id="glcanvas"></canvas>
  <script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec2 a_position;
    void main() {
      gl_Position = vec4(a_position, 0.0, 1.0);
    }
  </script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
float PI = 3.14;
  
float oscillate(float time, float minVal, float maxVal) {
    float sineWave = sin(time);
    float normalizedSine = (sineWave + 1.0) / 2.0;
    return mix(minVal, maxVal, normalizedSine);
}

vec2 rotate(vec2 pos, float angle) {
    float cosAngle = cos(angle);
    float sinAngle = sin(angle);
    mat2 rotationMatrix = mat2(cosAngle, -sinAngle, sinAngle, cosAngle);
    return rotationMatrix * pos;
}
vec3 palette( float t ) {
    vec3 a = vec3(0.5, 0.5, 0.0);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.25,0.4,0.55);

    return a + b*cos( 6.28318*(c*t+d) );
}
float hash(vec2 p) {
    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}
float noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    vec2 u = f * f * (3.0 - 2.0 * f);
    
    return mix(mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x),
               mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
               u.y);
}

vec2 warp(vec2 p) {
    vec2 offset = vec2(noise(p + p.y), noise(p + p.x));
    return p + offset;
}

float tile(vec2 position) {
    position *= 2.0;
    position = fract(position) - 0.5;
    vec2 p = abs(position);

    float d1 = dot(p, vec2(0.0, 0.0));
    float d2 = max(p.x + u_time/5.0, p.y + u_time/5.0);

    return max(d1, d2);
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy * 2.0 - 1.0;
    st.x *= u_resolution.x / u_resolution.y;
    st *= 3.0;
    st = warp(st);
    st = rotate(st, u_time/10.0);
    vec3 finalColor = vec3(0.0);

    float sq = tile(st);
    finalColor = palette(sq * 0.4 - exp(length(st * 0.1)));
    gl_FragColor = vec4(finalColor,1.0);
}
</script>
  
      <script id="rendered-js" >
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');

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

function getShaderSource(id) {
  return document.getElementById(id).textContent;.........完整代码请登录后点击上方下载按钮下载查看