vfx+sdf实现炫酷的液态文本3d动画效果代码-html代码-BFW代码库

vfx+sdf实现炫酷的液态文本3d动画效果代码

代码语言：html

所属分类：动画

代码描述：vfx+sdf实现炫酷的液态文本3d动画效果代码

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


  
</head>

<body translate="no">
  <h1>BFW</h1>
  
      <script  type="module">
// Using VFX-JS.
// https://amagi.dev/vfx-js
import { VFX } from "https://esm.sh/@vfx-js/core";
import { getSDFImage } from "https://esm.sh/@fand/image-to-sdf@0.1.0";

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

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

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

float get(vec2 uv) {
  return texture2D(src, uv).r;
}

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

// https://iquilezles.org/articles/smin
float smin(float a, float b, float k) {
    float h = max(k-abs(a-b),0.0);
    return min(a, b) - h*h*0.25/k;
}

float sdText(vec3 p) {
  p.xy *= rot(sin(time * 0.5) * 0.2);
  p.xz *= rot(-time * 0.3);

  float dxy = get(clamp(p.xy * 0.5 + 0.5, 0., 1.));
  float dz = abs(p.z);
  
  return length(vec2(dxy, dz)) - .1;
}

float sdParticles(vec3 p) {
  vec3 q = p;
  q.xz *= rot(time * 0.23);
  float r = .1 * (sin(p.x + p.z) + 1.1);  
  q.y -= time;
  q += 2.3;
  q = mod(q, 5.) - 2.5;
  float d = length(q) - r;
  
  q = p;
  q.xy *= rot(.2).........完整代码请登录后点击上方下载按钮下载查看