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);
  q.xz *= rot(time * 0.2 - p.y * 0.03);  
  r = .08 * (sin(p.z - p.y) + 1.1); 
  q.y -= time * .7;
  q += 3.7;
  q = mod(q, 7.2) - 3.6;  
  d = min(d, length(q) - r);

  r = .08 * (sin(p.z - p.y) + 1.1); 
  
  q = p;  
  q.xz *= rot(time * 0.18 + p.y * 0.02);    
  q.x += sin(q.y) * .4;  
  q.y -= time * .6;  
  q.y = mod(q.y, 3.) - 1.5;    
  d = min(d, length(q) - r);

  q = p;  
  q.xz *= rot(time * -0.03 + p.y * -0.01);    
  q.x += sin(q.y * .7 + .8) * .6;  
  q.y -= time * .5;  
  q.y = mod(q.y, 4.) - 2.;    
  d = min(d, length(q) - r);

  return d;
}

float map(vec3 p) {
  float d = sdText(p);
  d = smin(d, sdParticles(p), .4);
  return d;
}

vec3 getNormal(vec3 p) {
  vec2 d = vec2(0, 1);
  return normalize(vec3(
    map(p + d.yxx) - map(p - d.yxx),
    map(p + d.xyx) - map(p - d.xyx),
    map(p + d.xxy) - map(p - d.xxy)
  ));
}

void trace(vec2 uv, vec2 p) {  
  vec3 ro = vec3(0, 0, 1.3);
  vec3 rd = normalize(vec3(p, -1));  
  
  vec3 rp;
  float t = 0.;
  float d = 0.;
  
  float c = 0.;
  flo.........完整代码请登录后点击上方下载按钮下载查看