WebGL 模拟真实的鼠标拖动水面波动动画代码-html代码-BFW代码库

WebGL 模拟真实的鼠标拖动水面波动动画代码

代码语言：html

所属分类：动画

代码描述：WebGL 模拟真实的鼠标拖动水面波动动画代码

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

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

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

  
  
  
<style>
:root {
  color-scheme: dark;
}
html,
body {
  margin: 0;
  height: 100%;
  background: #05070a;
  overflow: hidden;
}
#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
#fail {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font: 14px/1.6 system-ui, sans-serif;
  color: #cdd8e0;
  background: radial-gradient(120% 120% at 50% 30%, #0d1620, #05070a);
}
#fail[hidden] {
  display: none;
}
.dg.ac {
  z-index: 20 !important;
}
</style>


  
  
</head>

<body translate="no">
  <canvas id="c" aria-hidden="true"></canvas>
<div id="fail" hidden>This piece needs WebGL2 with float render targets.</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script >
"use strict";
const MAX_DROPS = 12;
const uName = (k) => "u" + k[0].toUpperCase() + k.slice(1);
const GROUPS = [
    { name: "Simulation", items: [
            { k: "resolution", v: 256, t: "s", opts: [128, 256, 512], on: v => rebuildSim(+v) },
            { k: "propagation", v: 0.245, min: 0, max: 0.249, st: 0.001, tgt: "u" },
            { k: "damping", v: 0.996, min: 0.9, max: 1, st: 0.0005, tgt: "u" },
            { k: "edgeWidth", v: 0.045, min: 0, max: 0.2, st: 0.001, tgt: "u" },
            { k: "edgeDamp", v: 0.9, min: 0.5, max: 1, st: 0.005, tgt: "u" },
            { k: "clampH", v: 1.6, min: 0.2, max: 4, st: 0.05, tgt: "u" },
            { k: "simRate", v: 60, min: 20, max: 120, st: 1 },
            { k: "maxSub", v: 4, min: 1, max: 8, st: 1 },
            { k: "paused", v: false, t: "b" },
        ] },
    { name: "Interaction", items: [
            { k: "brushRadius", v: 0.032, min: 0.005, max: 0.15, st: 0.001 },
            { k: "brushBase", v: 0.012, min: 0, max: 0.1, st: 0.001 },
            { k: "brushGain", v: 0.9, min: 0, max: 3, st: 0.01 },
            { k: "brushMax", v: 0.09, min: 0.01, max: 0.4, st: 0.005 },
            { k: "clickStrength", v: 0.22, min: 0, max: 1, st: 0.01 },
            { k: "clickRadius", v: 0.05, min: 0.005, max: 0.2, st: 0.001 }.........完整代码请登录后点击上方下载按钮下载查看