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 float u_time;
uniform vec2 u_resolution;

float oscillate(float time, float minVal, float maxVal) {
    float sineWave = sin(time);
    float normalizedSine = (sineWave + 1.0) / 2.0;
    return mix(minVal, maxVal, normalizedSine);
}

vec3 palette(float t) {
    vec3 a = vec3(0.23, 0.1, 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 * tan(6.28318 * (c * t + d));
}

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

    float angle = atan(uv.y, uv.x);
    float radius = length(uv);

    float spiral = sin(radius * oscillate(time, 1.0, 10.0) - time * 2.0 + angle * 5.0);
    spiral += sin(radius/oscillate(time, 0.01, 0.09) - time * 0.01 + angle * 5.0);
    float t = 5.0 + 0.1 * spiral + time * 0.1 + radius * 0.4;

    vec3 color = palette(t) * 0.6;
    finalColor += color;
    

    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 getShaderSource(id) {
  return document.getElementById(id).textContent;
}

const vertexShaderSource = getShaderSource('vertex-shader');
const fragmentShaderSource = getShaderSource('fragment-shader');

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