Minecraftgoose/GooseHyperGlassCDN

# GooseHyperGlassCDN 2.0

🇨🇳 中文  |  🇬🇧 English

# 中文 纯 WebGL 渲染的液态玻璃 UI 组件库。一个 ` ``` 完整接入文档见 [线上文档页](https://glass.goose.cc.cd/doc/)。 ## 组件 | 组件 | mode | 说明 | |------|------|------| | 开关 Toggle | `single-toggle` / `toggle-card` / `toggle` | 透明版 / 白卡版 / 双份 | | 滑块 Slider | `single-slider` / `slider-card` / `slider` | 透明版 / 白卡版 / 双份 | | 底部标签栏 Bottom Tabs | `single-bottom-tabs` / `bottom-tabs-2` / `bottom-tabs` | 3tab / 4tab / 双排 | | 按钮组 Buttons | `buttons` | 按钮列表，自定义文字和样式 | | 弹窗 Dialog | `dialog` | 标题 + 正文 + 取消/确定 | | 滚动容器 Scroll | `scroll-container` | 玻璃卡片列表 | ## JS API 组件内容通过 JS API 设置（避免 attribute 解析的时序坑）： ``` var el = document.querySelector('liquid-glass'); // 底部标签栏 Bottom tabs el.setTabs([[ { icon:'M10 20v-6h4v6...', label:'首页 Home', viewport:24 }, { icon:'M15.5 14h-.79...', label:'发现 Discover', viewport:24 }, { icon:'M12 21.35l-...', label:'收藏 Favorite', viewport:24 } ]]); // 按钮组 Buttons el.setButtons([ { id:'t', label:'透明 Transparent', style:'transparent' }, { id:'s', label:'表面 Surface', style:'surface' } ]); // 弹窗 Dialog el.setDialog({ title:'提示 Notice', body:'通知内容', cancelText:'取消 Cancel', okayText:'确定 OK' }); // 滚动容器 Scroll container el.setScroll([{ title:'标题 Title', subtitle:'副标题 Subtitle' }]); ``` ## 项目结构 ``` ├── build.mjs # esbuild 构建脚本 / esbuild build script ├── src-bundle/ │ ├── liquid-glass.ts # Web Component 自定义元素 / Custom Element │ └── empty-react.ts # React 别名为空桩 / React alias stub ├── liquid-glass/src/components/liquid-glass/ │ ├── renderer/ # WebGL 渲染器 / WebGL renderer │ ├── catalog/ # 各组件 builder / Component builders │ ├── shaders/ # GLSL 着色器 / GLSL shaders │ ├── shapes/ # 玻璃形状 / Glass shapes │ ├── context.tsx # 手势交互系统 / Gesture interaction system │ └── catalog.tsx # 组件路由 / Component router └── README.md ``` ## 构建 ``` npm install esbuild node build.mjs ``` 输出 `liquid-glass.js`（~345KB，gzip ~95KB）。部署到 CDN 时将产物放入对应目录即可。 ## 技术栈 - WebGL 1.0（Canvas 渲染器 / Canvas renderer） - Custom Elements v1（`` 标签 / `` tag） - TypeScript → esbuild IIFE bundle - 零 React（构建时 alias 为空桩 / React aliased to empty stub at build time） - 无任何运行时依赖 / Zero runtime dependencies ## 浏览器支持 Chrome 80+ / Edge 80+ / Safari 14+ / Firefox 80+ （需要 WebGL 1.0 + Custom Elements v1 + ES2020） (Requires WebGL 1.0 + Custom Elements v1 + ES2020) ## 关于某"耻辱柱"的回应 martin65536 在其 README 中设置了"耻辱柱"章节，列出了以下指控。由于本项目的渲染引擎代码源自 martin65536/liquid-glass-webgl，这些指控的逻辑值得玩味。 ### "系统性抹除署名" 他在 Issue 里说我"在宣传文案中把上游作者抹除"。 看看我们现在的官网底部——**martin65536/liquid-glass-webgl** 几个大字 28px 加粗橙色爆闪彩虹动画，比他自己的 README 标题还大。文档页底部也有。GitHub README 表格专门一行写 WebGL 移植版，链接直达他仓库。 他说我"抹除"他——除非他瞎了，否则怎么可能看不见？ ### "强制降分辨率且不可调" 我们的代码来自你的仓库。你说我有这个问题——那你的原版也有这个问题。我们加了 dpr 属性让用户可调，你的版本让用户去设置页手动调。同一件事，两套说法。 ### "滥用 blur 滤镜" Blur 参数直接对应 Kyant 原版 Android 项目的玻璃模糊参数。如果你认为这是"滥用"，那你从 Kyant 移植的时候就已经"滥用"了。 ### "未处理浏览器默认点击行为" 这个我承认早期版本确实没处理，后来已经修复（加了几行 CSS tap-highlight）。martin65536 的仓库初期连 README 和 LICENSE 都没有——半斤八两。 ### "对话框布局异常" 早期版本的 bug，已修复。你的版本早期 bug 也不少——你的 README 自己写了"如果感觉画面卡顿，可到主页底部设置入口，适当降低 DPR"。 ### "渲染锯齿严重" WebGL 标准由 GPU 驱动控制 MSAA。这不是"缺失"，这是标准行为。 ### "连 G2 连续曲率圆角都未能正确实现" G2 continuous curvature 是公开数学方案，不是 martin65536 的独占技术。而且——你的代码里 G2 曲率实现是从 Kyant 的 Kotlin 源码移植的，我的代码是从你的仓库拉的。如果你能写对，我自然也能写对。如果我写错了，那说明你的原版也有问题——因为你代码里那一套就是从我拉的版本里来的。你总不能一边说"你的代码和我高度一致"，一边又说"你这里写错了但我那里是对的"吧？ ### "开源了又不让用" 你的仓库用的是 **Apache-2.0 许可证**。Apache-2.0 明确允许"复制、修改、分发"——这是开源许可证的基本功能。你选了 Apache-2.0，就意味着你同意了别人可以用你的代码。 现在我用了，你跑来骂我"抄袭"。那我问你：**你开源干屁的？** 如果你不想让别人用你的代码，可以选择 All Rights Reserved，或者加 Commons Clause。你选了 Apache-2.0 又指责别人"抄袭"，这叫既当又立。整个开源社区没有这么玩的。 ### 总结 martin65536 列出的所有技术问题，要么是无关紧要的细节（已修复），要么是他的原版同样存在的问题。他用 AI 生成的项目嘲笑别人代码质量，自己在 README 设专栏攻击另一个开源项目——这才是真正该被钉在耻辱柱上的行为。 ## License Apache License 2.0

# 英语 一个纯 WebGL 液态玻璃 UI 组件库。只需引入一个 ` ``` 完整接入文档：[线上文档](https://glass.goose.cc.cd/doc/)。 ## 组件 | 组件 | mode | 说明 | |-----------|------|-------------| | 开关 Toggle | `single-toggle` / `toggle-card` / `toggle` | 透明版 / 白卡版 / 双份 | | 滑块 Slider | `single-slider` / `slider-card` / `slider` | 透明版 / 白卡版 / 双份 | | 底部标签栏 Bottom Tabs | `single-bottom-tabs` / `bottom-tabs-2` / `bottom-tabs` | 3tab / 4tab / 堆叠 | | 按钮组 Buttons | `buttons` | 具有自定义文字和样式的按钮列表 | | 弹窗 Dialog | `dialog` | 标题 + 正文 + 取消/确定 | | 滚动容器 Scroll Container | `scroll-container` | 玻璃卡片列表 | ## JS API 组件内容通过 JS API 设置（避免了 attribute 解析时的时序问题）： ``` var el = document.querySelector('liquid-glass'); // Bottom tabs el.setTabs([[ { icon:'M10 20v-6h4v6...', label:'Home', viewport:24 }, { icon:'M15.5 14h-.79...', label:'Discover', viewport:24 }, { icon:'M12 21.35l-...', label:'Favorite', viewport:24 } ]]); // Buttons el.setButtons([ { id:'t', label:'Transparent', style:'transparent' }, { id:'s', label:'Surface', style:'surface' } ]); // Dialog el.setDialog({ title:'Notice', body:'Notification content', cancelText:'Cancel', okayText:'OK' }); // Scroll container el.setScroll([{ title:'Title', subtitle:'Subtitle' }]); ``` ## 项目结构 ``` ├── build.mjs # esbuild build script ├── src-bundle/ │ ├── liquid-glass.ts # Web Component custom element │ └── empty-react.ts # React alias stub ├── liquid-glass/src/components/liquid-glass/ │ ├── renderer/ # WebGL renderer │ ├── catalog/ # Component builders │ ├── shaders/ # GLSL shaders │ ├── shapes/ # Glass shapes │ ├── context.tsx # Gesture interaction system │ └── catalog.tsx # Component router └── README.md ``` ## 构建 ``` npm install esbuild node build.mjs ``` 输出 `liquid-glass.js`（~345KB，gzip 压缩后 ~95KB）。将产物放入您的 CDN 目录即可。 ## 技术栈 - WebGL 1.0（Canvas 渲染器） - Custom Elements v1（`` 标签） - TypeScript → esbuild IIFE bundle - 零 React（构建时 alias 为空桩） - 零运行时依赖 ## 浏览器支持 Chrome 80+ / Edge 80+ / Safari 14+ / Firefox 80+ (需要 WebGL 1.0 + Custom Elements v1 + ES2020) ## License Apache License 2.0

标签：CDN引入, TypeScript, UI组件库, Web Components, WebGL, 安全插件, 液态玻璃, 自动化攻击