# @edinstvo/glass 中文文档 规范地址：https://npmcn.com/package/%40edinstvo/glass/ 版本：1\.1\.5 npm 元数据更新时间：2026-11-11T20:16:48.561Z 中文译文更新时间：2026-11-13T07:02:13.983Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40edinstvo/glass 原文对照：https://npmcn.com/package/%40edinstvo/glass/?lang=original 项目主页：https://github.com/EdinstvoAI/edinstvo-glass 源码仓库：https://github.com/EdinstvoAI/edinstvo-glass ## 关键信息（来自 npm 元数据） - 包体积（解压后）：236 kB，49 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2026-11-04T12:06:11.099Z - 最新版本发布：2026-11-11T20:16:48.061Z - 近 30 天下载量：2466（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：14（近 12 个月 14 个） ## 中文简介 网络用液体玻璃:一个在macOS和Windows上外观相同的WebGL材料. ## 安装 ```sh npm install @edinstvo/glass ``` 也可以使用：`pnpm add @edinstvo/glass`、`yarn add @edinstvo/glass`、`bun add @edinstvo/glass` ## README ![Edinstvo Glass](https://npmcn.com/package/%40edinstvo/glass/logo.png) Edinstvo Glass是一个网络上真实玻璃的简单库. 其核心是一个WebGL镜头,通过弯曲的边缘来弯曲光线,将后面的颜色和霜分出来,在macOS和Windows上相同. 它是一个没有依赖关系的网络组件. ## 文档 见文件全文,并附有游乐场和实例,地点: [glass.makark.ru/ 文档](https://glass.makark.ru/docs/)。 。 。 . ## 无 从 npm 安装 : ```bash npm i @edinstvo/glass ``` ```html Hello ``` ## 出口 - `@edinstvo/glass` - 说吧 `attachGlass`,每个设置的元素类别、默认值和范围. - `@edinstvo/glass/define` - 登记册 `edinstvo-glass` 财务报告和审定财务报表 `edinstvo-glass-group`。 。 。 . - `@edinstvo/glass/glass.css` - 基础材料 `backdrop-filter`,用于没有JavaScript或GPU的页面. ## 捐款 Edinstvo Glass是开源的 我们赞赏发布报告和调取请求. ### 建立促进发展机构 初始化还原 : ```bash git clone https://github.com/EdinstvoAI/edinstvo-glass.git cd edinstvo-glass npm ci ``` 跑长凳: ```bash npm run demo ``` 单击一个玻璃元素来选择它。 大纲和检查员标题显示当前目标,控件读取其设置。 合并形状共享一个材料: 选择 **编辑组材料** 以编辑该表面,或编辑单个形状上的动作。 未合并的元素可以有自己的物质设置. 测试 : ```bash npm test ``` ## 许可证 [麻省理工学院](https://npmcn.com/package/%40edinstvo/glass/LICENSE) ## 厚度 `thickness` 设置 CSS 像素中前表面和后表面之间的光学距离,从 `0` 改为 `96` (默认) `6`) (中文(简体) ). `depth` 控制曲线地表剖面. `strokeThickness` 独立设置可见边宽,从 `0` 改为 `8` CSS 像素( 默认) `1`) (中文(简体) ). ```html Content ``` 局部材料层可独立地覆盖每个属性; `inherit` 保留父值,并 `default` 恢复引擎默认值。 折射通过近似曲线前表面和平坦后表面使用出行距离,并配置了折射指数. 这是一个正图屏幕-空间模型;它不提供可旋转的3D网格或多个内部反射. ## 照明 为页面设定一次光. 任何元素都可以替换一个设置并保留其余的. ```js import { setSceneLight } from "@edinstvo/glass"; setSceneLight({ direction: "top-left", intensity: "80%", color: "white", softness: 0.6 }); ``` ```html ``` 见 [照明](https://glass.makark.ru/docs/lighting/)。 。 。 . ## 背景适应 适应默认关闭。 启用每个元素或一次场景 : ```js import { setSceneMaterial } from "@edinstvo/glass"; setSceneMaterial({ adaptation: "full", adaptationStrength: 1 }); ``` ```html Readable text Manual material ``` | 模式 | 什么变化 | | --- | --- | | `off` | 没有背景分析; 所有物质值都保持手动 | | `tint` | 本地光/ 暗背景的自动锡; 文本处于应用程序控制之下 | | `contrast` | 自动锡、前景和透明度适应抽样对比 | | `full` | 相矛盾的适应也会在视觉复杂背景上起霜 | `adaptationStrength` (单位:千美元)`0`– 说吧 –`1`将调整与你的材料相混合。 明确 `tint` 财务报告和审定财务报表 `foreground` 颜色保留。 设定 `foreground="auto"` 用于自动黑白文本。 模式 `contrast` 财务报告和审定财务报表 `full` 将所选文本颜色公布为 `--glass-foreground`;网络组件将其应用到其内容上. 与 `attachGlass`,应用 `color: var(--glass-foreground, inherit)` 来修改文本。 输入符号是 `--glass-adaptation`, (中文(简体) ), `--glass-adaptation-strength` 财务报告和审定财务报表 `--glass-text-color`。 。 。 . 使用 `adaptationDuration` (单位:千美元)`0`– 说吧 –`1000` 毫秒,默认值 `300`这也适用于返回手动材料。 设定 `adaptation-duration="0"` 立即进行修改。 减动偏好跳过插入. 解决过渡时间表框架;一旦解决,就停止。 源头仍以每150毫秒最多采样一次,而对比目标则在样本之间缓存. `full` 倾向于稳定的玻璃外观:在普通无障碍环境下,它最多会以0.18来改变配置的透明度,并最多会以0.18来提高霜度. 选择 `contrast` 当抽样对比目标应优先于透明度时。 系统对比度或透明度的提高可以超越其中的视觉界限 `full` 还有. `data-glass-adapting` 标出一个过渡; 抽样对比估计描述其目标,而不是每个中间框架. 发动机对所供应背景的12×12个作物进行取样,每个活性地表每活性地表最多一次。 样本包括地色,亮度和变相. 样本被缓存,分析没有运行 `off` 或强度 `0`。 。 。 . `setSceneMaterial(null)` 清除场景材料默认; `setSceneLight` 继续独立覆盖照明属性。 当地 `inherit` 财务报告和审定财务报表 `default` 每一财产的工作. 对采样颜色的对比模式目标4.5:1,或7:1与 `prefers-contrast: more`,使用 [W3C 相对亮度和对比定义](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)这是在光学扭曲、照明和最后文本渲染之前的估计,而不是WCAG遵守保证。 手工取色或降低适应强度可能会使目标无法被达到. `data-glass-contrast` 报告抽样估计数。 分别审计所提供的接口. `prefers-reduced-transparency: reduce` 降低对比模式的透明度。 强制颜色隐藏光学画布,并在网络组件中使用系统颜色. 两种偏好都没有开始连续的动画循环. ## 地表几何 ```html ``` ```js const surface = attachGlass(element, { geometry: { shape: "path", path: "M50 0L100 100H0Z", viewBox: [0, 0, 100, 100] }, material: { refraction: 0.4, depth: 12 }, }); surface.set({ geometry: { shape: "ellipse" } }); ``` | 形状 | 几何 | | --- | --- | | `rounded-rect` | CSS 角半径; 有默认值 | | `circle` | 在元素的短边上刻入一圈 | | `ellipse` | 跨越元素宽度和高度的椭圆形 | | `superellipse` | 连续剖面图; `curvature` 从2(椭圆)到8 | | `path` | SVG 路径数据映射自 `viewBox` 输入元素边框 | 几何学会改变阴影器的轮廓及其常态,因此折射,散射,光圈,光线和反射都跟着这个形状. 它还参与现有的团体合并和分层组成。 设置网络组件的 `.geometry` 属性到要更新的新对象; 几何不添加第二个渲染器或上下文. 路径只接受路径数据,而不是SVG标记,脚本或外部资源. 使用 `fill-rule="evenodd"` 或者说 `geometry.fillRule` 用来填补空洞 极限是路径数据的64 KiB, ±1,000,000范围内的4096指令和有限度坐标. 无效的标记被属性 API 拒绝;无效的属性使用带有控制台警告的默认大纲. 无效的本地路径语法使用视图框. 限制绑定的输入大小,而不是每个浏览器本土路径光栅的运行时间. 每个自定义轮廓被烤成256×256签名的相距瓦. 原始和平滑相距使用16位已打包的通道. 平地图共享一出地表地图;只有几何变化才能重建出地表图,而正常的相互作用可以再用其GPU纹理. GPU地图集在大多数4个地图集和32个米B的缓存目标,必要时不包括一个活地地图集. 距离转换跟随线性时间 [Felzenszwalb - Huttenlocher 方法 化学式](https://cs.brown.edu/people/pfelzens/papers/dt-final.pdf)。 。 。 . 椭圆和超椭圆使用相距相近. 小型 SVG 细节,高度凸起的路径,大元素和极端的侧面变化可能揭示出采样或平地文物. 几何控制了光学画布;HTML布局和命中测试保持矩形,自定义的HTML内容不会被自动剪接到路径上. 自定义路径没有自动框阴影 。 CSS倒置使用普通圆形矩形来代替再生任意路径光学. ## 光学模型 屏幕- 空间镜头使用可配置的 Snell 折射 `ior` (单位:千美元)`1`– 说吧 –`2.4`默认值 `1.5`) (中文(简体) ). `ior="1"` 光学上与空气相匹配,不产生几何折射。 曲线剖面的高度以材料厚度的一半为界. `depth` 定义其宽度。 射线偏移使用浅厚的回旋修正. 在放牧角度上,镜头会混合成更尖锐的背景样本,因此弯道在被冰冻的玻璃上仍然可见. 已启用的环境反射使用未极化的双电流弗雷斯内尔方程来混合被反射出并传递出颜色. 方程式和IOR公约 [PBRT 二电接口描述](https://pbr-book.org/4ed/Reflection_Models/Specular_Reflection_and_Transmission)。 。 。 . `reflection="0"` 仍然会禁用这种贡献。 场景图像是可用的反射源;这不会重建隐藏的3D环境或模拟重复的内部反射. `dispersion-mode="artistic"` 使用故意RGB抵消. `dispersion-mode="physical"` 在610,550和460纳米时使用两期Cauchy近似值,通用系数为:0.004 μm2 `dispersion`。这个系数是说明性的,不是装有光学玻璃目录的条目或全光谱溶液。 物理通道的分离遵循地表发生和光学路径,而不是装饰取向光的角度. `dispersion="0"` 在两种模式中禁用频道分离. ```html Content ``` 实施时仍采用2D光学近似法并带有正图外观. 丁,起重,开花,触动扭动和反相适应是外观控制,所以结合它们并不构成能完全保持光谱材料. 不涉及三维旋转或单独的渲染器. ## 常见问题 ### @edinstvo/glass 是什么？ 网络用液体玻璃:一个在macOS和Windows上外观相同的WebGL材料\. ### 如何安装 @edinstvo/glass？ 在项目目录运行 npm install @edinstvo/glass，或使用 pnpm add / yarn add / bun add。 ### @edinstvo/glass 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @edinstvo/glass 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @edinstvo/glass 可以商用吗？ @edinstvo/glass 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @edinstvo/glass 的下载量有多少？ 根据 npm 官方下载统计，@edinstvo/glass 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,466 次，日均约 82 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @edinstvo/glass 还在维护吗？ 最新版本 1\.1\.5 发布于 2026/11/12（1 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/11/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。