webgl+canvas实现波浪圆环液态动画效果代码-html代码-BFW代码库

webgl+canvas实现波浪圆环液态动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现波浪圆环液态动画效果代码

下面为部分代码预览，完整代码请点击下载或在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);
}

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);
}

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy * 2.0 - 1.0;
    st.x *= u_resolution.x / u_resolution.y;
    st = abs(st);
    float time = u_time/2.0;
    vec3 finalColor = vec3(0.0);

    for(int i = 1; i <= 8; i++){
        vec2 pos = vec2(0.0, 0.0);
        float r = float(i) / 10.0;
        float noiseFactor = noise(st * oscillate(time/5.0, 0.0, 10.0) + time/1.5) * 0.2;
        float obj = sdf_circle(st, pos, r + noiseFactor);
        float glow = 0.01 / max(abs(obj), 0.01);

        if (obj < 0.0) {
            float intensity = noise(st + time) * 0.1 + 0.4;
            finalColor += vec3(float(i)/8.0 , float(i)/4.0, float(i)/5.0) * intensity * glow;
        }
    }

    finalColor = clamp(finalColor, 0.0, 1.0);
    
    gl_FragColor = vec4(finalColor, 1.0);
}

</script>
  
      <script >
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

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

function g.........完整代码请登录后点击上方下载按钮下载查看