webgl实现可调参数液态变动着色器代码-html代码-BFW代码库

webgl实现可调参数液态变动着色器代码

代码语言：html

所属分类：动画

代码描述：webgl实现可调参数液态变动着色器代码

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

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

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


  
  
  
<style>
/* Loading Orb — CSS panel */

:root { color-scheme: dark; }

* { margin: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #05060a;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* one full-window canvas renders the main orb AND every preset thumbnail
   (each into its own scissor region) — pointer-events off so the buttons work */
#orb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .loading { animation: none; }
}

/* preset switcher — left column of live, animated orb thumbnails */
#presets {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.preset {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
}

/* transparent window — the canvas draws this preset's orb behind it.
   the outset box-shadow paints the page background over the square corners,
   so the orb is visually clipped to the rounded border. */
.preset__thumb {
  width: clamp(46px, 8vh, 64px);
  height: clamp(46px, 8vh, 64px);
  border-radius: 14px;
  border: 1px solid rgba(150, 160, 190, 0.3);
  background: transparent;
  box-shadow: 0 0 0 7px var(--page-bg, #05060a);
  transition: border-color .25s, transform .25s;
}

.preset:hover .preset__thumb {
  border-color: rgba(185, 205, 255, 0.65);
  transform: translateY(-2px);
}

.preset.is-active .preset__thumb {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 7px var(--page-bg, #05060a);
}

.preset__name {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 206, 228, 0.55);
  transition: color .25s;
}

.preset:hover .preset__name,
.preset.is-active .preset__name { color: #fff; }

/* keep the dat.gui panel above the canvas */
.dg.main { z-index: 10; }

/* light-background presets: flip the chrome to dark ink so it stays readable */
body.light-bg .loading { color: rgba(20, 24, 40, 0.7); }
body.light-bg .preset__na.........完整代码请登录后点击上方下载按钮下载查看