canvas+webgl随机屏保动画效果代码-html代码-BFW代码库

canvas+webgl随机屏保动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas+webgl随机屏保动画效果代码

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

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

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

  
  
<style>
body {
  height: 100vh;
  margin: 0;
}
body,
html {
  overflow: hidden;
}
</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 float u_time;

float hash(vec2 p) {
    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

vec3 palette(float t) {
    vec3 a = vec3(0.0, 0.0, 0.45);
    vec3 b = vec3(0.5, 0.3, 0.12);
    vec3 c = vec3(0.23, 0.9, 0.7);
    vec3 d = vec3(0.6, 0.3, 0.2);
    return a + b * cos(6.28318 * (c * t + d));
}
vec3 palette2(float t, float u_time) {
    vec3 a = vec3(0.5 + 0.1 * sin(u_time * 6.28318), 0.9, 0.9);
    vec3 b = vec3(0.9, 0.5 + 0.5 * cos(u_time * 6.28318), 0.5);
    vec3 c = vec3(0.2, 1.0, 1.0);
    vec3 d = vec3(0.25, 0.4, 0.55 + 0.45 * sin(u_time * 6.28318));

    return a + b * cos(6.28318 * (c * t + d));
}
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);
}

float sdf_circle(vec2 p, vec2 c, float r) {
    return length(p - c) - r;
}

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 warp(vec2 p, float time) {
    vec2 offset = vec2(noise(p + oscillate(time/2.0, 1.0, 10.0)), noise(p + osc.........完整代码请登录后点击上方下载按钮下载查看