UD5工具箱
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
6
细分面数
26
细分顶点
48
细分边数
4x
面数增长
Catmull-Clark 细分是一种经典的计算机图形学曲面细分算法，由 Edwin Catmull 和 Jim Clark 于1978年提出。它通过迭代地细化多边形网格来生成平滑的曲面，是 Pixar 动画工作室的 RenderMan 渲染器中 Subdivision Surface 的核心算法之一。该算法可以将任意拓扑结构的多边形网格（尤其是四边形网格）转化为视觉上平滑的曲面，广泛应用于电影特效、游戏建模和工业设计领域。
每次迭代包含四个关键步骤：
① 面点 (Face Point)：计算每个面的质心（所有顶点的平均值）；
② 边点 (Edge Point)：每条边的两端顶点与相邻两个面点的平均值；
③ 新顶点 (New Vertex)：根据原顶点价数 n，加权平均面点、边中点和原顶点位置：
④ 连接：将面点、边点和新顶点重新连接成四边形面。每次迭代后，非四边形面都会转化为四边形。
① 面点 (Face Point)：计算每个面的质心（所有顶点的平均值）；
② 边点 (Edge Point)：每条边的两端顶点与相邻两个面点的平均值；
③ 新顶点 (New Vertex)：根据原顶点价数 n，加权平均面点、边中点和原顶点位置：
(F + 2R + (n-3)×V) / n；④ 连接：将面点、边点和新顶点重新连接成四边形面。每次迭代后，非四边形面都会转化为四边形。
迭代次数直接影响曲面的平滑度和面数：
0次：显示原始控制网格（多面体），面数最少；
1次：产生明显圆润效果，面数增至约4倍；
2-3次：曲面已经非常光滑，通常满足视觉需求；
4次及以上：曲面几乎完全平滑，但面数呈指数增长（4ⁿ倍），计算量显著增加。在工业应用中，通常2-3次迭代即可获得视觉上满意的结果。
0次：显示原始控制网格（多面体），面数最少；
1次：产生明显圆润效果，面数增至约4倍；
2-3次：曲面已经非常光滑，通常满足视觉需求；
4次及以上：曲面几乎完全平滑，但面数呈指数增长（4ⁿ倍），计算量显著增加。在工业应用中，通常2-3次迭代即可获得视觉上满意的结果。
Loop 细分：专为三角形网格设计，在三角形面上生成更细的三角形，适用于游戏引擎中的三角网格；
Doo-Sabin 细分：类似于 Catmull-Clark，但使用不同的顶点定位公式，适用于任意多边形面；
Catmull-Clark 细分：特别适合四边形网格，能将任意拓扑转化为四边形主导的平滑曲面，是影视级曲面建模的首选算法，也是 OpenSubdiv 库的核心算法。
Doo-Sabin 细分：类似于 Catmull-Clark，但使用不同的顶点定位公式，适用于任意多边形面；
Catmull-Clark 细分：特别适合四边形网格，能将任意拓扑转化为四边形主导的平滑曲面，是影视级曲面建模的首选算法，也是 OpenSubdiv 库的核心算法。
使用顶部的形状下拉菜单可在立方体、四面体、八面体、小房子和环状雏形之间切换。拖动迭代次数滑块（0-4）可实时查看不同细分级别。您还可以：
• 点击控制网格按钮切换橙色线框的显示
• 点击线框按钮查看细分曲面的拓扑结构
• 点击旋转启用自动旋转，从不同角度观察曲面
• 在3D视图中拖拽鼠标旋转、滚轮缩放、右键拖拽平移视角
• 点击控制网格按钮切换橙色线框的显示
• 点击线框按钮查看细分曲面的拓扑结构
• 点击旋转启用自动旋转，从不同角度观察曲面
• 在3D视图中拖拽鼠标旋转、滚轮缩放、右键拖拽平移视角
Kruskal 最小生成树动画 - 按边排序并查集
动画展示 Kruskal 算法选择边和合并集合的过程，高亮生成树边。
Webpack 打包分析器 - stats.json 可视化
上传 webpack 的 stats.json，生成交互式树状图、模块大小排名，辅助优化构建体积。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
CSS 伪类效果测试场 - 实时查看 :is() :where() :has()
编写带有伪类的选择器，实时高亮匹配的HTML元素，探索现代CSS选择器的能力。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
布局网格覆盖层 - 可拖调栅格参考线
在任意网页上投射可拖拽调整的栅格覆盖线，用来测量和对齐设计稿。
Brainfuck在线解释器 - 步进调试
编写Brainfuck代码，以可视化的方式步进执行，观察活动纸带和指针。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
URL参数可视化提取 - 分层解析查询串
粘贴带参数的URL，以表格形式列出所有Query参数与值。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
HTML转JSX/TSX工具 - 替换核心属性
将普通HTML片段一键转为React可用的JSX，处理class→className、style等。
Promise 链可视化 - 异步流程时间轴
构建 Promise 链并显示每个 then/catch 的执行时间与状态，帮助理解微任务调度。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
滚动驱动动画创作台 - 基于Scroll Timeline的可视化
配置滚动容器与目标元素，自定义随滚动触发的关键帧动画，输出纯CSS代码。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
滚动驱动动画沙盒 - Animation Timeline演示
绑定动画进度到滚动位置，交互式调整参数，直观理解scroll-timeline和view-timeline。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
内联样式提取合并工具 - 汇总 style 属性为类
提取 HTML 中所有内联 style，智能合并相同样式生成 class，并替换为类名以减小体积。
洛伦兹吸引子绘制 - 三维蝴蝶曲线投影
用Canvas绘制经典的洛伦兹吸引子轨迹，可拖拽旋转视角展示蝴蝶形奇怪吸引子。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。