three+vfx实现三维水泡飘动动态文字融合效果代码-html代码-BFW代码库

three+vfx实现三维水泡飘动动态文字融合效果代码

代码语言：html

所属分类：动画

代码描述：three+vfx实现三维水泡飘动动态文字融合效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');


html, body { height: 100%; margin: 0; }
body {
  background: black;
  background-image: linear-gradient(
    340deg,
    hsl(220deg 50% 30%) 0%,
    hsl(200deg 30% 40%) 20%,
    hsl(180deg 20% 50%) 35%,
    hsl(220deg 30% 60%) 70%,
    hsl(270deg 30% 70%) 90%,
    hsl(300deg 30% 70%) 100%
  );
  display: grid;
  place-content: center;
  overflow-x: hidden;
}
img {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: stretch;
}

h1 {
  margin: 0;
  font-size: 15vh;
  line-height: 1.2;
  max-width: 100%; 

  font-family: "Cinzel Decorative";
  text-align: center;
  color: white;
}
</style>


  
</head>

<body translate="no">
  <h1 contenteditable>Type<br>here.<br>please.</h1>
  
      <script type="module">


import { VFX } from "//repo.bfw.wiki/bfwrepo/js/module/vfx-core.mjs";

function lerp(a, b, t) {
  return a * (1 - t) + b * t;
}

const shader = `
precision highp float;
uniform vec2 resolution;
uniform vec2 mouse;
uniform vec2 offset;
uniform float time;
uniform sampler2D src;
uniform vec3 mouseDir;
#define PI 3.141593

mat2 rot(float t) {
  return mat2(cos(t), -sin(t), sin(t), cos(t));
}

float rand(vec2 p) {
  return fract(sin(dot(p, vec2(484., 398.)) * 984.));
}

float sdSphere(vec3 p, float r) {
  return length(p) - r;
}

float map(vec3 p) {
  // Center sphere
  float d = sdSphere(p - mouseDir * 8., 3.);

  // Rotate world
  p.xz *= rot(sin(time * 0.3) * 0.5);  
  p.xy *= rot(time * 0.7);  
  
  // Place spheres
  float l = 4.4;
  d = min(d, sdSphere(p + vec3(1, 1, 1) * l, 2.0));
  d = min(d, sdSphere(p + vec3(-1, -1, 1) * l * 2., 1.7));  
  d = min(d, sdSphere(p + vec3(-1, 1, -1) * l, 1.2));  
  d = min(d, sdSphere(p + vec3(1, -1, -1) * l, 2.9));    

  return d;
}

vec3 getNormal(vec3 p) {
  vec2 d = vec2(1, 0);
  return normalize(vec3(
    map(p + d.xyy) - map(p - d.xyy),
    map(p + d.yxy) - map(p - d.yxy),
    map(p + d.yyx) - map(p - d.yyx)
  ));
}

vec3 spectrum(float x) {
    return cos((x - vec3(0, .5, 1)) * vec3(.6, 1., .5) * PI);
}

float surface(vec3 p, vec3 n, vec3 rd, vec3 lig) {        
  float c = 0.;
  
  // specular
  vec3 hal = normalize(lig - rd);
  float spe = pow(clamp(dot(hal, n), 0., 1.), 250.);
  c += spe * 0.9;
      
  // diffuse
  c += clamp(dot(n, lig), 0., 1.) * 0.4;

  return c;
}

void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;
  vec2 p = uv * 2. - 1.;
  p.x *= resolution.x / resolution.y;
  
  p *= resolution.y / 1000.;
    
  vec3 ro = vec3(0, 0, 30);
  vec3 rd = normalize(vec3(p, -7));
  vec3 rp;
  
  float t = 0.;
  float d;
   
  vec4 c = vec4(0);
  vec4 light = vec4(0);  
  
  vec3 n = vec3(-1);
  
  for (int i = 0; i < 50; i++) {
    rp = ro + rd * t;
    d = map(rp);

    if (d < 0.01) {     
      n = getNormal(rp); 
      break;
    }
    if (t > 50.) {
      break;
    }

    t += d;
  }
  
  if (n.z > 0.) {
    float glaze = clamp(1. + dot(rd, n), 0., 1.);

    // Cheap dispersion
    float z = rp.z + 5.; // wall.........完整代码请登录后点击上方下载按钮下载查看