桌面应用音视频【免费下载链接】Mineradio-paused一款以电影镜头、粒子视觉和歌词舞台为核心的沉浸式音乐播放器。项目地址https://gitcode.com/gh_mirrors/mi/Mineradio-paused点击查看免费下载导读本文以 Mineradio 仓库中的 docs/GLASS_SVG_TEXTURE.md 为骨架系统讲解这款以电影镜头、粒子视觉和歌词舞台为核心的沉浸式音乐播放器如何用 SVG Filter 实现带色散扭曲的玻璃质感——而非普通毛玻璃。你将掌握核心 CSS 变量与基线参数、feDisplacementMap三通道 RGB 色差滤镜的构造原理、displacement map 生成器的实现细节、搜索栏与底部控制台带质感一起出现的揭示时序以及 Wallpaper Engine 接入时的单表面采样约束最后落到一整套可执行的验收与安全修改规则。一、基线定位这是一份被冻结的视觉契约GLASS_SVG_TEXTURE.md开篇即说明其性质这是用户明确要求保存的播放器 SVG 玻璃质感基线。后续可以修补偏移、缺角、套用范围和响应式问题但不得随意重写核心质感。也就是说仓库中存在一份用户验收通过的视觉基准所有后续改动都必须以它为约束。用户已确认当前播放器控制台质感要保存并计划逐步套用到搜索栏、小按钮、部分面板和 3D 歌单架。同时用户明确不接受以下五种结果这组负向验收清单直接决定了实现的底线普通毛玻璃没有扭曲质感中间糊成一团的毛玻璃大面积白色渐变扫过去的廉价质感右侧缺一块、整体右偏、上下错位明显因套用 SVG 导致性能明显下降。从仓库证据看这套质感的落地位置集中在 public/index.html 顶部:root变量区、#bottom-bar样式、svg idcontrol-glass-svg的 filter 定义以及 public/js/modules/05-playback/15-control-glass-animations.js 中的运行时生成与动画逻辑。二、核心 CSS 变量一套变量驱动多处玻璃面CSS 变量定义在public/index.html顶部的:root中分为面板玻璃与按钮玻璃两套分别对应大面积容器与小尺寸控件:root{ --saved-panel-glass-bg:rgba(0,0,0,.10); --saved-panel-glass-filter:blur(12px) saturate(1.8) brightness(1.16); --saved-panel-glass-svg-filter:url(#mineradio-control-glass-filter) saturate(1); --saved-panel-glass-shadow:inset 0 0 2px 1px rgba(255,255,255,.35),inset 0 0 10px 4px rgba(255,255,255,.15),0 4px 16px rgba(17,17,26,.05),0 8px 24px rgba(17,17,26,.05),0 16px 56px rgba(17,17,26,.05),inset 0 4px 16px rgba(17,17,26,.05),inset 0 8px 24px rgba(17,17,26,.05),inset 0 16px 56px rgba(17,17,26,.05); --saved-panel-glass-radius:50px; --saved-button-glass-bg:rgba(0,0,0,.10); --saved-button-glass-filter:blur(12px) saturate(1.8) brightness(1.16); --saved-button-glass-svg-filter:url(#mineradio-control-glass-filter) saturate(1); --saved-button-glass-shadow:inset 0 0 2px 1px rgba(255,255,255,.34),inset 0 0 10px 4px rgba(255,255,255,.13),0 10px 30px rgba(0,0,0,.18); --saved-button-glass-hover-bg:rgba(255,255,255,.055); --saved-button-glass-hover-shadow:inset 0 0 2px 1px rgba(255,255,255,.42),inset 0 0 12px 5px rgba(255,255,255,.17),0 12px 34px rgba(0,0,0,.22),0 0 18px rgba(255,255,255,.06); }这些变量的设计体现了渐进增强普通环境使用--saved-panel-glass-filterblur saturate brightness 的常规毛玻璃而在支持 SVG backdrop-filter 的环境下html.control-glass-svg-ok类会切换为--saved-panel-glass-svg-filter引用#mineradio-control-glass-filter并叠加saturate(1)。control-glass-svg-ok这个根类由运行时检测后添加——见supportsControlGlassSvgFilter()的实现public/js/modules/05-playback/15-control-glass-animations.js它通过尝试给一个测试元素设置backdrop-filter: url(#mineradio-control-glass-filter)并检查样式是否被保留来判断浏览器是否支持 SVG 引用滤镜同时主动排除 Safari 与 Firefox。从 public/css/index.css 可以看出这套变量的实际套用范围很广html.control-glass-svg-ok下包括.glass-saved-panel、.glass-saved-button、#bottom-bar、#play-btn、搜索相关面板、弹窗、popover、播放列表面板、home 卡片、封面裁剪等几十个选择器都切到了 SVG 滤镜面而--saved-panel-glass-filter这类降级值则保证不支持 SVG 滤镜时仍有可用的视觉基础。三、底部播放器控制台SVG 玻璃的母版3.1 基线 CSS#bottom-bar是整套质感的基准载体默认状态下无 SVG 支持如下#bottom-bar{ border-radius:50px; background:rgba(0,0,0,.10); border:0; backdrop-filter:blur(12px) saturate(1.8) brightness(1.16); -webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.16); box-shadow:inset 0 0 2px 1px rgba(255,255,255,.35),inset 0 0 10px 4px rgba(255,255,255,.15),0 4px 16px rgba(17,17,26,.05),0 8px 24px rgba(17,17,26,.05),0 16px 56px rgba(17,17,26,.05),inset 0 4px 16px rgba(17,17,26,.05),inset 0 8px 24px rgba(17,17,26,.05),inset 0 16px 56px rgba(17,17,26,.05); }而在 SVG 可用的环境中backdrop-filter 整体替换为对 SVG filter 的引用html.control-glass-svg-ok #bottom-bar{ background:rgba(0,0,0,.10); backdrop-filter:url(#mineradio-control-glass-filter) saturate(1); -webkit-backdrop-filter:url(#mineradio-control-glass-filter) saturate(1); } #bottom-bar::before{content:none} #bottom-bar::after{content:none}值得注意的细节::before/::after被强制置为content:none即不允许在控制台本体上叠加伪元素图层——这是为了避免额外的覆盖层破坏单表面质感这个约束在搜索栏部分会再次出现。3.2 SVG Filter 的关键参数主滤镜#mineradio-control-glass-filter定义于 public/index.html 的svg idcontrol-glass-svg内其冻结基线参数为color-interpolation-filterssRGB色彩空间强制 sRGB保证三通道色差混合符合预期主 filter idmineradio-control-glass-filterfilter 区域x-12% y-28% width124% height156%——故意向外扩张给 displacement 位移留出余量避免玻璃边缘被裁切RGB 三通道 displacement scaleRed180、Green170、Blue160RGB 共同对齐中心dx-90 dy0三通道分离后使用screen混合feBlend modescreen最后feGaussianBlur stdDeviation0.5做极轻的柔化。从实际 filter 结构看public/index.html每一通道的处理链是feImagedisplacement map→feDisplacementMap按 R/B 通道取样做扭曲scale 分别为 180/170/160→feOffset dx-90对齐中心→ 与SourceGraphic做feMerge→feColorMatrix只保留对应通道颜色 → 最后三段红绿蓝结果两两feBlend modescreen合成。文档对偏移语义做了严格规定controlGlassChromaticOffset只能围绕共同中心-90做 Red/Green/Blue 的相对分离不要再整体平移所有通道该值的 UI 下限为30这是保留最低可见色差的底线默认值90表示保持共同中心-90并增加适中 RGB 边缘分离最大值140只扩大三通道相对距离不移动整块玻璃禁止把 RGB 偏移改成正向、禁止删三通道色差、禁止把stdDeviation拉大。运行时实现印证了这套语义public/js/modules/05-playback/15-control-glass-animations.jsvar CONTROL_GLASS_BASE_SHIFT_X -90; var CONTROL_GLASS_CHROMA_MAX_SPREAD 22; function applyControlGlassChromaticOffsetToFilter(filter, baseShiftX, maxSpread, verticalFactor) { var chroma fx.controlGlassChromaticOffset / 140; var spread maxSpread * chroma; var verticalSpread spread * (verticalFactor null ? 0.08 : verticalFactor); setControlGlassChannelOffset(filter, dispRedShifted, baseShiftX - spread, -verticalSpread); setControlGlassChannelOffset(filter, dispGreenShifted, baseShiftX, 0); setControlGlassChannelOffset(filter, dispBlueShifted, baseShiftX spread, verticalSpread); }即Green 始终钉在-90中心Red 向左-90 - spread、Blue 向右-90 spread并各带微小的纵向分量垂直因子 0.08形成围绕中心的径向色散而非整体平移。normalizeControlGlassChromaticOffset则把任意输入钳制到[30, 140]。该参数的来源与持久化链路也很完整默认值在 public/js/modules/00-state/04-fx-defaults.js 中为controlGlassChromaticOffset: 50持久化层 public/js/modules/02-visual/04-visual-settings-persistence.js 与 public/js/modules/07-fx/00-preset-archive-data.js 均以layoutNumber(..., 30, 140)钳制读取FX 面板滑块fx-glassaberration直接绑定该值public/js/modules/07-fx/05-fx-panel-performance.js改动即触发applyControlGlassChromaticOffset()并同步落盘。四、Displacement Map 生成器运行时按尺寸生成扭曲贴图feDisplacementMap需要一个输入贴图feImage引用的 data URI SVG。由于播放器尺寸和圆角会随窗口变化贴图不能静态写死必须在运行时按元素实际尺寸生成。核心函数generateControlGlassDisplacementMap(width, height, radius)位于 public/js/modules/05-playback/15-control-glass-animations.jsfunction generateControlGlassDisplacementMap(width, height, radius) { width Math.max(240, Math.round(width || 400)); height Math.max(48, Math.round(height || 92)); radius Math.max(12, Math.round(radius || 50)); var borderWidth 0.07; var edge Math.min(width, height) * (borderWidth * 0.5); var innerW Math.max(1, width - edge * 2); var innerH Math.max(1, height - edge * 2); var svg svg viewBox0 0 width height xmlnshttp://www.w3.org/2000/svg defs linearGradient idglass-red x1100% y10% x20% y20%stop offset0% stop-color#0000/stop offset100% stop-colorred//linearGradient linearGradient idglass-blue x10% y10% x20% y2100%stop offset0% stop-color#0000/stop offset100% stop-colorblue//linearGradient /defs rect x0 y0 width width height height fillblack/ rect x0 y0 width width height height rx radius fillurl(#glass-red)/ rect x0 y0 width width height height rx radius fillurl(#glass-blue) stylemix-blend-mode:difference/ rect x edge.toFixed(2) y edge.toFixed(2) width innerW.toFixed(2) height innerH.toFixed(2) rx radius fillhsl(0 0% 50% / 1) stylefilter:blur(11px)/ /svg; return data:image/svgxml, encodeURIComponent(svg); }参数语义与生成原理width Math.max(240, ...)、height Math.max(48, ...)、radius Math.max(12, ...)设置最小尺寸与最小圆角下限避免贴图过小导致扭曲异常borderWidth 0.07边框宽度系数edge min(width, height) * 0.035用于缩进内层矩形制造玻璃内沿贴图内容黑色底 → 红色水平渐变x 方向从右到左即 X 通道编码位移量→ 蓝色垂直渐变y 方向从上到下Y 通道编码位移量以mix-blend-mode:difference叠加再用一个带blur(11px)的 50% 灰度内层矩形来压平中心、强化边缘。在feDisplacementMap中xChannelSelectorR yChannelSelectorB见 public/index.html因此红渐变驱动水平扭曲、蓝渐变驱动垂直扭曲中心灰块对应无位移的平区域边缘渐变产生水波般的折射扭曲——这正是普通毛玻璃没有的扭曲质感的来源。生成与缓存逻辑在updateGlassDisplacementMapForElementpublic/js/modules/05-playback/15-control-glass-animations.js读取元素getBoundingClientRect()与borderRadius组成宽x高:圆角的缓存 key只有 key 变化才重新生成 data URI 并写入img idcontrol-glass-map的href同时写xlink:href兼容旧环境。ResizeObserver与resize事件监听保证窗口变化后贴图随之更新。除主控制台外仓库还针对小尺寸控件生成了专用贴图避免共享大尺寸 map 造成的边缘裁切generateSearchBoxGlassDisplacementMap与generateSearchPillGlassDisplacementMap直接复用控制台生成器同文件 L105-L110但各自拥有独立的feImage与缓存 keygenerateAccountPillGlassDisplacementMap同文件 L79-L104为顶部账号 VIP 胶囊生成专用贴图并配套独立的#mineradio-account-pill-glass-filterscale 28、stdDeviation 0.16 的轻折射滤镜。五、搜索栏揭示时序让 SVG 质感随面板一起出现这是文档中最精细的工程约束。核心要求是搜索栏必须像底部播放器控制台一样带着 SVG 质感一起出现不能先显示透明玻璃框再等动画结束才加载色散——否则会出现首帧无质感的闪烁破坏观感。5.1 时序协议priming → ready / fallback运行时以三个根类状态机管理搜索栏玻璃的预热search-glass-priming正在等待 displacement map 生效预热帧阶段search-glass-readymap 已就绪可以带 SVG 质感揭示search-glass-fallbackSVG 不可用或生成失败走降级路径。对应的实现见 public/js/modules/05-playback/15-control-glass-animations.jssetSearchGlassPriming/setSearchGlassReady/setSearchGlassFallback三者在html与#search-area上同步切换类queueSearchGlassReadyAfterPaint在search-box-glass-map有href后等待 3 帧requestAnimationFrame计数再切到 ready确保 SVG 纹理真正上屏后才允许面板揭示。5.2 与 peek 面板系统的协作搜索面板的弹出由setPeek(el, on, key)驱动public/js/modules/10-shell/02-peek-panels-upload.js。对key search且面板未展开时会先调用prepareSearchGlassBeforePeek()预热若返回 false尚未 ready则走scheduleSearchPeekAfterGlassReady通过requestAnimationFrame轮询isSearchGlassReadyForReveal()接受 ready 或 fallback最多兜底 140ms同文件 L46-L63超时后也必须加peek保证不因玻璃加载而卡死交互。prepareSearchGlassBeforePeek()的完整流程public/js/modules/05-playback/15-control-glass-animations.jsfunction prepareSearchGlassBeforePeek() { if (!document.documentElement.classList.contains(control-glass-svg-ok)) return true; setSearchGlassFallback(false); var ready updateSearchBoxGlassDisplacementMap(); updateSearchPillGlassDisplacementMap(); if (!ready || !glassImageHasHref(document.getElementById(search-box-glass-map))) { setSearchGlassPriming(false); setSearchGlassFallback(true); return true; } if (document.documentElement.classList.contains(search-glass-ready)) return true; return syncSearchGlassReadyState(true, false); }启动时initControlGlassSurface同文件 L377-L434会同步执行一次prepareSearchGlassBeforePeek()再用requestAnimationFrame与setTimeout(..., 140)双保险预热并在 ResizeObserver 回调中持续刷新 search box / search pill 贴图。5.3 表面规则禁止伪元素叠加文档明确了两条表面规则隐藏的#search-box保持透明backdrop-filter:none只有可见的#search-area.peek #search-box才携带已保存的面板背景/阴影并在 SVG 可用时直接引用url(#mineradio-search-box-glass-filter) saturate(1)禁止把搜索框 SVG 玻璃放在#search-box::before上——那会与揭示状态分离成独立图层让弹层看起来像SVG 迟到了。这条规则在 quick-check 中有对应的硬性断言scripts/quick-check.js 的Search glass entrance guard校验#search-box::before { content:none !important }、校验.peek揭示时背景/阴影/滤镜必须来自--saved-panel-glass-*变量、校验 SVG 滤镜必须直接作用于#search-area.peek #search-box而非伪元素同时校验.search-mode-tabs容器保持透明background:transparent !important、backdrop-filter:none !importantSVG 质感只落在每个 tab 胶囊按钮上url(#mineradio-search-pill-glass-filter) saturate(1) !important。此外搜索历史/结果列表在无 SVG 时使用blur(34px) saturate(1.34) brightness(1.08)的线性渐变毛玻璃降级且不得退回rgba(0,0,0,.90)的黑底。六、Wallpaper Engine 单表面规则拒绝双重玻璃当 Mineradio 以壁纸形态运行Wallpaper Engine时文档记录了一个 2026-07-18 的用户决策明确否定了额外的可直接透明玻璃层。旧方案Mineradio WE Glass Refraction、第二个圆角 DWM 面、DwmQueryThumbnailSourceSize局部取样与1.105放大/错位方案全部失效并禁止恢复。当前唯一允许的实现如下原生层只有一个全窗Mineradio WE DWM Surface精确 WE 源窗仍在它下面保持真实 Windows 鼠标视差#wallpaper-engine-glass-sampler只裁切真实#bottom-bar内部视频保持完整视口 1:1 对齐不做缩放镜片或二次折射采样源 HWND 必须与唯一基础 DWM HWND 相同。运行时兼容字段dwmGlassSurfaceWindowId只是该 HWND 的别名不代表第二个窗口采样流必须在 DWM 缩略图激活前对普通基础 HWND 建立捕获首帧后再激活同一 HWND 的 DWM 缩略图并在预热黑帧变成真实壁纸像素后才添加wallpaper-engine-glass-sampler-ready最终扭曲和 RGB 色散只由既有#mineradio-control-glass-filter产生。Red180、Green170、Blue160、共同中心-90、screen混合、stdDeviation0.5等冻结参数不因 WE 接入改变采样 HWND 本身没有光标画面不得用读取/隐藏/替换系统光标或 DOM 假光标处理捕获。Scene 停止、切换、隐藏或退出时必须停止该 MediaStream。源码侧由syncWallpaperEngineControlGlassSurface与syncWallpaperEngineGlassSamplerGeometry落实public/js/modules/05-playback/15-control-glass-animations.js采样器按#bottom-bar的真实矩形含圆角半径定位视频元素以负偏移覆盖整个视口实现 1:1 裁切几何数据通过updateWallpaperEngineGlassSurface送入原生层且带 30ms 节流与dwmGeometryKey变更检测最大化/还原时由animateWallpaperEngineControlGlassSurface(520)做 520ms 动画跟随。quick-check 中也有对应断言scripts/quick-check.js要求采样器存在、cursor-free、1:1 对齐并通过既有 SVG 控制台玻璃输出。文档给出的验收要点Mineradio WE Glass Refraction窗口数为0基础 HWND 与采样源 HWND 相等采样视频轨为live且无音频采样器矩形与控制台矩形一致最大化/还原后仍对齐。七、Safe Change Rules什么能改、什么不能改文档将改动分为三档这是维护这套视觉系统最重要的边界可以改修复右侧缺块、尺寸缓存、ResizeObserver 更新、特定面板的 SVG map 尺寸给搜索栏、小按钮等新增独立 filter/map避免共享同一个大尺寸 map仓库中 search-box、search-pill、account-pill 三套独立 filter/map 正是这一策略的落地。谨慎改调整 filter 区域、offset、scale。改前必须截图对比防止边缘裁切或色差过度。禁止改把controlGlassChromaticOffset改回同时设置所有feOffset dx的整体左右偏移整体替换为普通blur()毛玻璃为了性能删除色差或扭曲质感——性能问题必须通过节流、缓存、减少实时重算来解决而不是删效果。从实现看减少实时重算确实有据可依贴图按宽x高:圆角缓存 key 命中即跳过重生成updateGlassDisplacementMapForElementDWM 几何上报带 30ms 节流与 key 比对所有尺寸变更都包在requestAnimationFrame中避免在布局抖动周期内重复计算。八、验收清单黑底与亮底双重检查文档要求最终验收时在黑底和亮底背景下各看一遍检查点如下控制台右侧没有缺块搜索栏没有右侧缺失、整体右偏或白色廉价渐变播放器中间不是糊的仍有水波扭曲和 RGB 色差鼠标 hover、播放暂停、切歌后没有明显卡顿。这四条与开篇的用户不接受清单一一对应缺块/右偏对应右侧缺陷白色渐变对应廉价质感中间糊对应无扭曲卡顿对应性能问题形成闭环。仓库中的 scripts/quick-check.js 提供自动化守护如Search glass entrance guard、控制台玻璃源切换器 guard、账号胶囊专用 map guard 等把其中大部分结构性约束固化为可重复执行的断言防止后续改动无意中破坏基线。九、小结与扩展阅读Mineradio 的 SVG 玻璃质感是一套冻结基线 渐进增强 状态机预热 严格边界的完整工程实践CSS 变量保证降级可用SVG Filter 提供 RGB 三通道色散扭曲displacement map 按元素尺寸运行时生成并缓存搜索栏通过 priming/ready/fallback 状态机确保质感与面板同帧出现Wallpaper Engine 场景则强制单 DWM 表面 1:1 采样避免二次玻璃叠加。对想复现或改造类似扭曲玻璃效果的开发者而言本文覆盖了从视觉参数、滤镜结构、生成器代码到验收标准的全链路。进一步阅读建议基线文档docs/GLASS_SVG_TEXTURE.md滤镜定义与 SVG 容器public/index.html运行时生成、色差应用与预热状态机public/js/modules/05-playback/15-control-glass-animations.js搜索栏 peek 揭示与 140ms 兜底public/js/modules/10-shell/02-peek-panels-upload.js色差默认值与持久化钳制public/js/modules/00-state/04-fx-defaults.js、public/js/modules/02-visual/04-visual-settings-persistence.js自动化验收断言scripts/quick-check.js赞分享桌面应用音视频【免费下载链接】Mineradio-paused一款以电影镜头、粒子视觉和歌词舞台为核心的沉浸式音乐播放器。项目地址https://gitcode.com/gh_mirrors/mi/Mineradio-paused点击查看免费下载相关推荐从零打造玻璃质感Three.js材质继承系统完全指南从零打造玻璃质感Three.js材质继承系统完全指南 Three.js作为JavaScript 3D库的领军者其材质系统采用面向对象的继承架构让开发者能够前端3D渲染图形学Bug Fix Document — AutoResearchClaw PipelineBug Fix Document — AutoResearchClaw Pipeline 生成日期YYYY MM DD 反馈来源N 位测试者 总计问题N人工智能大模型AI Agent自主智能体深度研究科研MCP 服务后端玻璃拟态视觉风格全解在 ppt-master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示玻璃拟态视觉风格全解在 ppt master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示 本文以 skills/ppt master/reAI 技能人工智能AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考