1.SuperSlide滚动的遮层遮罩遮罩层宽/高怎么计算的?如何设置具体一个值?
2.ligerUI中ligerDialog和ligerWindow的区别
3.Cypress 踩坑记 - DOM 遮挡
4.[UE5] 遮挡剔除 源码阅读
5.UGUI源码阅读之Mask
6.DIY vue3组件: 动手实现高斯模糊遮罩层的对话框效果

SuperSlide滚动的遮罩层宽/高怎么计算的?如何设置具体一个值?

       以下是全部代码，请自行修改及js路径 SuperSlide - 实用焦点图 *{ margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal px/px 宋体; }img{ border:0; }a{ text-decoration:none; color:#; }a:hover{ color:#1。源码

ligerUI中ligerDialog和ligerWindow的区别

       ä»ŽAPI来看，它们之间视乎没有根本性的区别，下面看对比图，

       æˆ‘这里只列出了API文档中参数的对比图，两个类其他的API也与图中情况差不多，Dialog的API比较多，但几乎都涵盖了Window中的API，可以自行访问下面的网址查看：

/

       Window的API里面比Dialog多出了一样东西，那就是事件回调函数。

       ä¸ºä»€ä¹ˆä»–们的API这么接近，为啥不是一个东西呢？下面我找到了它的源码：

/ligerui/LigerUI/tree/Release/Source/lib/ligerUI/js/plugins

       åœ¨ ligerWindow.js 中，我发现第行，如下

l.controls.Window.ligerExtend(l.core.Win,代码 {

       åŒæ ·æˆ‘在 ligerDialog.js 中，行，有同样的一句话，如下

l.controls.Dialog.ligerExtend(l.core.Win, {

       è¿™è¡¨ç¤ºDialog与Window是继承自同一个父类 l.core.Win，随后我查看了 js/core/base.js，在这个文件的行我看到了 liger.core.Win 的真实面目。liger.core.Win 并没有做很多的事情，只实现遮罩功能和定义一些抽象接口。

       æœ€åŽæˆ‘又重新回去阅读了 ligerDialog.js 的代码，从第 行开始一直到结束，这才是 Dialog 与 Window 最大的区别所在，Dialog 是单例对象，不建议在使用的时候继承与扩展，而 Window 是一个多例类，允许直接继承并扩展。

       æˆ‘拿出源码里面 5个 最基本的函数，来说明 Dialog 是单例类的事实：

$.ligerDialog.open = function (p)

       {

           // å®žä¾‹åŒ–一个 l.controls.Dialog å¯¹è±¡

           // å†…部可以追述到第行，使用 liger.run() å‡½æ•°æž„造 Dialog å®žä¾‹

           return $.ligerDialog(p); 

       };

       $.ligerDialog.close = function ()

       {

           // æ ¹æ® Dialog类型 æŸ¥åˆ°åˆ°æ‰€æœ‰çš„ dialog å®žä¾‹å¯¹è±¡

           var dialogs = l.find(l.controls.Dialog.prototype.__getType());

           

           // å¾ªçŽ¯æ¯ä¸€ä¸ª dialog实例并销毁

           for (var i in dialogs)

           {

               var d = dialogs[i];

               d.destroy.ligerDefer(d, 5);

           }

           

           // éšè—é®ç½©å±‚

           // åœ¨ligerUI中，所有的窗口使用的是一个全局的mask

           // ç›¸å…³ä»£ç å¯ä»¥çœ‹ js/core/base.js è¡Œ

           l.win.unmask();

       };

       $.ligerDialog.show = function (p)

       {

           var dialogs = l.find(l.controls.Dialog.prototype.__getType());

           if (dialogs.length)

           {

               for (var i in dialogs)

               {

                   // å¦‚果已经存在 dialog实例，那么就直接使用实例对象

                   // æ˜¾ç¤ºå·²å­˜åœ¨çš„dialog，并返回

                   dialogs[i].show();

                   return;

               }

           }

           

           // å¦‚果不存在 dialog实例，则初始化一个实例并返回

           return $.ligerDialog(p);

       };

       $.ligerDialog.hide = function ()

       {

           var dialogs = l.find(l.controls.Dialog.prototype.__getType());

           

           // éšè—dialog实例也是相同的方式

           for (var i in dialogs)

           {

               var d = dialogs[i];

               d.hide();

           }

       };

       $.ligerDialog.tip = function (options)

       {

           // åˆå§‹åŒ–选项参数

           options = $.extend({

               showType: 'slide',

               width: ,

               modal: false,

               height: 

           }, options || { });

           $.extend(options, {

               fixedType: 'se',

               type: 'none',

               isDrag: false,

               isResize: false,

               showMax: false,

               showToggle: false,

               showMin: false

           });

           

           // æž„造一个Dialog实例

           return $.ligerDialog.open(options);

       };

       æ ¹æ®ä¸Šé¢çš„代码解读，结论就很清晰了：

       Dialog是一个单例对象，不建议继承与扩展

       Window是多例类，允许继承并扩展

       æˆ‘觉得ligerUI对Window的设计没有 Ext 设计得好，Dialog应作为Window的一个单例对象才相对合理，Ext就是这么做的。有兴趣的话，可以了解下Ext，Ext是目前我认为前端UI组件化设计得最好的一个框架。

Cypress 踩坑记 - DOM 遮挡

       Cypress是一个热门的测试工具，但使用过程中发现了某些问题，遮层遮罩以下记录问题发现及解决思路。源码

       在Cypress下，代码源码时代胡老师点击指令通常能正常工作，遮层遮罩但在特定场景下却表现异常。源码例如，代码测试点击遮罩层以关闭弹窗时，遮层遮罩预期操作顺畅，源码但当模型填充内容后，代码操作突然失败。遮层遮罩

       测试代码简明易懂，源码执行Cypress后，代码一切如预期，但当模型内容增多，原本能正常点击的地方开始报错，明显不合理。

       查阅文档发现，点击指令支持坐标或位置参数，但并未解决问题，神武3端源码似乎点击操作与元素遮挡计算有关。Cypress的遮挡计算似乎还有待优化。

       深入源码分析，发现Cypress点击操作会进行一些判断，重要参数coords.fromElViewport显示了中心点坐标。Cypress使用该坐标获取最顶层元素并与目标元素进行对比。这是点击成功与否的关键因素，即中心点被遮挡可点击，未被遮挡则不能点击，操作略显简单粗暴，导致点击稳定性问题。

       为验证分析结论，创建了测试用例。首先，创建一个极小的遮挡元素置于中央，测试发现点击失败。之后，将四周元素全部遮挡，仅留下中心一点，结果却能成功点击。

       总结，港壳朔源码Cypress的遮挡检查方式过于直接，可能不甚妥当，且容易引起混淆。理论上，采用多层对比交叉区域的方法可能更为合理。关于点击方式的优化，提供坐标或方位选择，以更准确判断是否遮挡，而非仅支持force操作，后者会降低测试意义。

[UE5] 遮挡剔除 源码阅读

       这篇文章旨在深入解析虚幻引擎5（UE5）原生的遮挡剔除机制，重点关注硬件遮挡剔除，并简述其他遮挡剔除技术及调试方法。此外，文章还涉及到移动端软件遮挡剔除技术的介绍和移动端的特定遮挡剔除流程。以下为详细内容。

       ### 遮挡剔除技术概览

       UE5采用多种方法进行遮挡剔除，包括硬件遮挡剔除、分层Z缓冲遮挡剔除、视锥体剔除、距离剔除、溯源码登录失败体积剔除，以及特殊的VR环绕剔除、软件遮挡剔除和预计算遮挡剔除。这些方法旨在优化游戏性能，减少可视Actor的绘制数量。

       ### 硬件遮挡查询(Hardware Occlusion Queries)

       硬件遮挡查询需要与GPU进行数据交互，用于判断特定几何体是否被其他物体遮挡。在虚幻引擎中，通过使用硬件Query，能够批量创建查询、分配连续内存空间并进行后续定位，从而实现高效的回读数据过程。以DX为例，虚幻引擎利用了硬件Query的优势，实现了一套完整且高效的查询流程。

       ### 硬件遮挡查询流程

       硬件遮挡查询的流程包括创建查询请求、执行具体查询内容（如在准备查询的Primitive周围绘制包围盒）、结束查询请求以及在每帧结束时回读查询数据。通过这种方式，虚幻引擎能够在下一帧中基于前一帧的数据进行高效的遮挡剔除。

       ### 分层Z缓冲遮挡查询(Hierarchical Z-Buffer Occlusion)

       分层Z缓冲遮挡查询使用多层级的ida pro源码修改Z缓冲，通过记录上一级中周围四点中最远处的深度值，实现更精细的遮挡测试。计算结果通过shader进行处理并存储在贴图或缓冲中，最终回传至CPU以优化渲染性能。

       ### 预计算可见性剔除(PreCompute Visibility Culling)

       预计算可见性剔除通过在场景中放置特定体积来预估可见性，适用于中小规模场景，但对大规模场景优化效果有限。

       ### 移动端软件查询(UE4)

       在UE4中，软件遮挡剔除功能虽然已被UE5淘汰，但其优势在于无平台限制、低延迟和对GPU友好，但开发成本较高。

       ### UE5遮挡剔除源码阅读

       UE5的遮挡剔除源码涉及多个类和结构体，如FPrimitiveOcclusionHistory、PendingOcclusionQuery、FRHIRenderQuery和FSceneViewState等。关键变量包括PrimitiveVisibilityMap、PrimitiveOcclusionHistorySet以及与多GPU支持相关的宏定义。

       ### 遮挡剔除流程

       在延迟渲染管线中，遮挡剔除流程包含视锥体剔除、距离剔除、硬件遮挡剔除或分层Z缓冲剔除等多个阶段。在移动端前向渲染管线中，同样执行初始化视锥体、执行渲染前处理以及最终调用硬件遮挡查询的流程。

       ### 遮挡剔除调试

       通过查看stat initviews、调用统计函数，可以深入了解各种遮挡剔除相关函数的调用次数和平均时间，有助于优化渲染性能。

       UE5的遮挡剔除机制涉及多种技术，旨在提高游戏的渲染效率和视觉质量。通过源码阅读和调试，开发者可以深入了解并优化这些机制，实现更流畅、更高效的渲染体验。

UGUI源码阅读之Mask

       Mask主要基于模版测试来进行裁剪，因此先来了解一下unity中的模版测试。

       Unity Shader中的模版测试配置代码大致如上

       模版测试的伪代码大概如上

       传统的渲染管线中，模版测试和深度测试一般发生在片元着色器（Fragment Shader）之后，但是现在又出现了Early Fragment Test，可以在片元着色器之前进行。

       Mask直接继承了UIBehaviour类，同时继承了ICanvasRaycastFilter和IMaterialModifier接口。

       Mask主要通过GetModifiedMaterial修改graphic的Material。大致流程：

       1.获取当前Mask的层stencilDepth

       2.StencilMaterial.Add修改baseMaterial的模板测试相关配置，并将其缓存

       3.StencilMaterial.Add设置一个unmaskMaterial，用于最后将模板值还原

       MaskableGraphic通过MaskUtilities.GetStencilDepth计算父节点的Mask层数，然后StencilMaterial.Add修改模板测试的配置。

       通过Frame Debugger看看具体每个batch都做了什么。先看第一个，是Mask1的m_MaskMaterial，关注Stencil相关的数值，白色圆内的stencil buffer的值设置为1

       这个是Mask2的m_MaskMaterial，根据stencil的计算公式，Ref & ReadMask=1，Comp=Equal，只有stencil buffer & ReadMask=1的像素可以通过模板测试，即第一个白色圆内的像素，然后Pass=Replace，会将通过的像素写入模板值（Ref & WriteMask=3），即两圆相交部分模板值为3

       这个是RawImage的Material，只有模板值等于3的像素可以通过模板测试，所以只有两个圆相交的部分可以写入buffer，其他部分舍弃，通过或者失败都不改变模板值

       这是Mask2的unmaskMaterial，将两个圆相交部分的模板值设置为1，也就是还原Mask2之前的stencil buffer

       这是Mask1的unmaskMaterial，将第一个圆内的模板值设置为0，还有成最初的stencil buffer

       可以看到Mask会产生比较严重的overdraw。

       2.drawcall和合批

       每添加一个mask，一般会增加2个drawcall（加上mask会阻断mask外和mask内的合批造成的额外drawcall），一个用于设置遮罩用的stencil buffer，一个用于还原stencil buffer。

       如图，同一个Mask下放置两个使用相同的RawImage，通过Profiler可以看到两个RawImage可以进行合批

       如图，两个RawImage使用相同的，它们处于不同的Mask之下，但是只要m_StencilValue相等，两个RawImage还是可以进行合批。同时可以看到Mask1和Mask1 (1)，Mask2和Mask2 (1)也进行了合批，说明stencilDepth相等的Mask符合合批规则也可以进行合批。

       StencilMaterial.Add会将修改后的材质球缓存在m_List中，因此调用StencilMaterial.Add在相同参数情况下将获得同一个材质球。

DIY vue3组件: 动手实现高斯模糊遮罩层的对话框效果

       前言 & 一点点废话

       最近迷上了前端设计，想借此机会放松一下平日里繁忙的AI工作。帮朋友重构班级主页网站时，发现Vue3的模块化设计极为便捷，许多组件和钩子可以直接复用。因此，我决定整理并分享个人设计的组件实现。未来几篇文章将围绕这一主题展开。

       你可能会问：为什么自己写组件，而不是直接使用像Element-Plus这样的库呢？答案是：尽管Element-Plus功能丰富，但其接口有限，样式定制难度较高，可能无法满足设计爱好者的需求。另外，大型组件库体积较大，对于追求轻量级和高效应用的开发者来说，自定义HTML5、CSS3与Vue3组件可能更为合适。我的组件库旨在简化复用流程，提供直观的特效展示，让使用者在短时间内上手，并能根据需求进行个性化定制。

       为了帮助读者快速了解并复用组件，我将文章结构安排如下：

       组件效果展示

       登录界面和切换背景的对话框采用高斯模糊遮罩层，设计灵感源自苹果的特效，旨在吸引用户聚焦于对话框内容。

       用法指南

       参数设置说明：

       槽位（Slot）：用于嵌入自定义内容。

       模板（Template）部分：展示基本结构与布局。

       脚本（Script）部分：实现逻辑功能与状态管理。

       只需通过设置showDialog为true即可激活对话框。

       源码示例

       请根据需求调整mainColor和backFilter变量。以下是一个可行的样式方案，供参考：