webgl实现夜晚乌云中爱心发光动画效果代码-html代码-BFW代码库

webgl实现夜晚乌云中爱心发光动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现夜晚乌云中爱心发光动画效果代码

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

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

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

  
</head>

<body translate="no">
  
  
      <script >
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2");

document.body.innerHTML = "";
document.body.appendChild(canvas);
document.body.style = "margin:0;touch-action:none;overflow:hidden;";
canvas.style.width = "100%";
canvas.style.height = "auto";
canvas.style.userSelect = "none";

const dpr = window.devicePixelRatio;

function resize() {
  const {
    innerWidth: width,
    innerHeight: height } =
  window;

  canvas.width = width * dpr;
  canvas.height = height * dpr;

  gl.viewport(0, 0, width * dpr, height * dpr);
}
window.onresize = resize;

const vertexSource = `#version 300 es
    #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
    #else
    precision mediump float;
    #endif
    
    in vec4 position;
    
    void main(void) {
        gl_Position = position;
    }
`;

const fragmentSource = `#version 300 es
/*********
 * made by Matthias Hurrle (@atzedent) 
 */
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 O;
uniform float time;
uniform vec2 resolution;
#define FC gl_FragCoord.xy
#define R resolution
#define T time
#define S smoothstep
vec3 palette(float t) {
    vec3    
    a=vec3(.2),
    b=vec3(.15),
    c=vec3(.125),
    d=vec3(1,.8,.6);
    return a+b*cos(6.3*(c*t+d));
}
float rnd(vec2 p) { return fract(sin(dot(p,vec2(12.9898,78.233)))*345678.); }
float noise(vec2 p) { vec2 i=floor(p), f=fract(p), u=S(.0,1.,f); float a=rnd(i),b=rnd(i+vec2(1,0)),c=rnd(i+vec2(0,1)),d=rnd(i+1.); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }
float fbm(vec2 p) { float t=.0, a=1.; for (int i=0; i<5; i++) { t+=a*noise(p+T*.2); p*=2.; a*=.5; } return t; }
vec3 pattern(vec2 uv) {
    vec3 col = vec3(0);
    vec2 p = uv;
    float d = 1.;
    for (float i=.0; i<3.; i++) {
        p = vec2(cos(uv.x),sin(uv.y))*i;
        uv *= 2.;
        d = fbm(uv*d+T*.2);
        col += d+length(p);
    }
    return col;
}
float heart(vec2 p) {
    #define.........完整代码请登录后点击上方下载按钮下载查看