@edinstvo/glass

Edinstvo Glass是一个网络上真实玻璃的简单库.

其核心是一个WebGL镜头,通过弯曲的边缘来弯曲光线,将后面的颜色和霜分出来,在macOS和Windows上相同. 它是一个没有依赖关系的网络组件.

文档

见文件全文,并附有游乐场和实例,地点: glass.makark.ru/ 文档。 。 。 .

无

从 npm 安装 :

npm i @edinstvo/glass

<script type="module">
  import "@edinstvo/glass/define";
</script>

<edinstvo-glass frost="0.4" refraction="0.5">Hello</edinstvo-glass>

出口

• @edinstvo/glass - 说吧 attachGlass,每个设置的元素类别、默认值和范围.
• @edinstvo/glass/define - 登记册 edinstvo-glass 财务报告和审定财务报表 edinstvo-glass-group。 。 。 .
• @edinstvo/glass/glass.css - 基础材料 backdrop-filter,用于没有JavaScript或GPU的页面.

捐款

Edinstvo Glass是开源的 我们赞赏发布报告和调取请求.

建立促进发展机构

初始化还原 :

git clone https://github.com/EdinstvoAI/edinstvo-glass.git
cd edinstvo-glass
npm ci

跑长凳:

npm run demo

单击一个玻璃元素来选择它。 大纲和检查员标题显示当前目标,控件读取其设置。 合并形状共享一个材料: 选择 编辑组材料 以编辑该表面,或编辑单个形状上的动作。 未合并的元素可以有自己的物质设置.

测试 :

npm test

许可证

麻省理工学院

厚度

thickness 设置 CSS 像素中前表面和后表面之间的光学距离,从 0 改为 96 (默认) 6) (中文(简体) ). depth 控制曲线地表剖面. strokeThickness 独立设置可见边宽,从 0 改为 8 CSS 像素( 默认) 1) (中文(简体) ).

<edinstvo-glass thickness="18" stroke-thickness="1" refraction="0.45">Content</edinstvo-glass>

局部材料层可独立地覆盖每个属性; inherit 保留父值,并 default 恢复引擎默认值。 折射通过近似曲线前表面和平坦后表面使用出行距离,并配置了折射指数. 这是一个正图屏幕-空间模型;它不提供可旋转的3D网格或多个内部反射.

照明

为页面设定一次光. 任何元素都可以替换一个设置并保留其余的.

import { setSceneLight } from "@edinstvo/glass";

setSceneLight({ direction: "top-left", intensity: "80%", color: "white", softness: 0.6 });

<edinstvo-glass light-color="blue" reflection="0.6" dynamic-refraction="0.5"></edinstvo-glass>

见 照明。 。 。 .

背景适应

适应默认关闭。 启用每个元素或一次场景 :

import { setSceneMaterial } from "@edinstvo/glass";
setSceneMaterial({ adaptation: "full", adaptationStrength: 1 });

<edinstvo-glass adaptation="contrast">Readable text</edinstvo-glass>
<edinstvo-glass adaptation="off" tint="#fff">Manual material</edinstvo-glass>

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 相对亮度和对比定义这是在光学扭曲、照明和最后文本渲染之前的估计,而不是WCAG遵守保证。 手工取色或降低适应强度可能会使目标无法被达到. data-glass-contrast 报告抽样估计数。 分别审计所提供的接口.

prefers-reduced-transparency: reduce 降低对比模式的透明度。 强制颜色隐藏光学画布,并在网络组件中使用系统颜色. 两种偏好都没有开始连续的动画循环.

地表几何

<edinstvo-glass shape="ellipse" style="width:240px;height:120px"></edinstvo-glass>
<edinstvo-glass shape="superellipse" curvature="5"></edinstvo-glass>
<edinstvo-glass shape="path" path="M50 0L100 100H0Z" view-box="0 0 100 100"></edinstvo-glass>

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" } });

几何学会改变阴影器的轮廓及其常态,因此折射,散射,光圈,光线和反射都跟着这个形状. 它还参与现有的团体合并和分层组成。 设置网络组件的 .geometry 属性到要更新的新对象; 几何不添加第二个渲染器或上下文.

路径只接受路径数据,而不是SVG标记,脚本或外部资源. 使用 fill-rule="evenodd" 或者说 geometry.fillRule 用来填补空洞 极限是路径数据的64 KiB, ±1,000,000范围内的4096指令和有限度坐标. 无效的标记被属性 API 拒绝;无效的属性使用带有控制台警告的默认大纲. 无效的本地路径语法使用视图框. 限制绑定的输入大小,而不是每个浏览器本土路径光栅的运行时间.

每个自定义轮廓被烤成256×256签名的相距瓦. 原始和平滑相距使用16位已打包的通道. 平地图共享一出地表地图;只有几何变化才能重建出地表图,而正常的相互作用可以再用其GPU纹理. GPU地图集在大多数4个地图集和32个米B的缓存目标,必要时不包括一个活地地图集. 距离转换跟随线性时间 Felzenszwalb - Huttenlocher 方法 化学式。 。 。 .

椭圆和超椭圆使用相距相近. 小型 SVG 细节,高度凸起的路径,大元素和极端的侧面变化可能揭示出采样或平地文物. 几何控制了光学画布;HTML布局和命中测试保持矩形,自定义的HTML内容不会被自动剪接到路径上. 自定义路径没有自动框阴影 。 CSS倒置使用普通圆形矩形来代替再生任意路径光学.

光学模型

屏幕- 空间镜头使用可配置的 Snell 折射 ior (单位:千美元)1– 说吧 –2.4默认值 1.5) (中文(简体) ). ior="1" 光学上与空气相匹配,不产生几何折射。 曲线剖面的高度以材料厚度的一半为界. depth 定义其宽度。 射线偏移使用浅厚的回旋修正. 在放牧角度上,镜头会混合成更尖锐的背景样本,因此弯道在被冰冻的玻璃上仍然可见.

已启用的环境反射使用未极化的双电流弗雷斯内尔方程来混合被反射出并传递出颜色. 方程式和IOR公约 PBRT 二电接口描述。 。 。 . reflection="0" 仍然会禁用这种贡献。 场景图像是可用的反射源;这不会重建隐藏的3D环境或模拟重复的内部反射.

dispersion-mode="artistic" 使用故意RGB抵消. dispersion-mode="physical" 在610,550和460纳米时使用两期Cauchy近似值,通用系数为:0.004 μm2 dispersion。这个系数是说明性的,不是装有光学玻璃目录的条目或全光谱溶液。 物理通道的分离遵循地表发生和光学路径,而不是装饰取向光的角度. dispersion="0" 在两种模式中禁用频道分离.

<edinstvo-glass ior="1.5" reflection="1" dispersion-mode="physical"
  dispersion="0.5" thickness="12" depth="12" frost="0.1">
  Content
</edinstvo-glass>

实施时仍采用2D光学近似法并带有正图外观. 丁,起重,开花,触动扭动和反相适应是外观控制,所以结合它们并不构成能完全保持光谱材料. 不涉及三维旋转或单独的渲染器.