UD5工具箱
WebGPU 渲染基础三角形 - 入门演示
使用 WebGPU API 绘制一个彩色三角形，展示初始化、管线、着色器和绘制循环。
标签： 演示文稿工具
共 88+ 款工具Delaunay 三角剖分演示 - 空圆特性
逐步添加点并增量式构建 Delaunay 三角网，展示边翻转操作。
二分图最大匹配 Hopcroft-Karp 演示
展示 Hopcroft-Karp 算法寻找最大匹配的过程，包括 BFS 和 DFS 阶段。
线段树区间查询演示 - 构建/更新/查询
可视化线段树的构建、单点更新和区间求和查询过程，理解树状结构。
最大团问题图例演示 - 穷举搜索与启发式
在无向图上查找最大团，高亮显示顶点，演示回溯或启发式搜索过程。
布隆过滤器演示 - 添加元素与存在性检查
使用多个哈希函数和位数组，演示布隆过滤器的添加和查询，计算误判率。
NFC 只读演示 - 扫描并显示 NDEF 记录
使用 Web NFC 读取附近标签的 NDEF 消息，展示每条记录的类型和内容。
指针锁定 API 演示 - 3D 迷宫移动
使用指针锁定 API 在 3D 场景中控制视角移动，模拟 FPS 游戏鼠标控制。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
Contact Picker 多属性获取演示 - 选择联系人信息
使用 Contacts Picker API 从系统通讯录中选择姓名、邮箱和电话等多个字段。
Datalist 自动建议增强演示 - 动态数据源
演示如何动态更新 datalist 选项以实现搜索建议，并处理键盘选择。
无障碍名称计算演示 - 元素的可访问名称来源
选择一个元素，展示浏览器如何根据 ARIA 属性、内容、label 等计算其可访问名称。
页面生命周期事件演示 - freeze/resume等
展示页面从active到frozen等状态切换事件，记录日志，帮助理解浏览器优化机制。
WebSocket 压缩扩展演示 - permessage-deflate 效果
建立带压缩扩展的 WebSocket 连接，对比压缩前后消息大小。
WebGPU 计算着色器演示 - 并行矩阵乘法
使用 WebGPU 编写计算着色器执行矩阵乘法，对比 CPU 性能。
Navigation API 演示 - 现代前端路由导航
使用新的 Navigation API 拦截导航、管理历史条目，构建类 SPA 体验。
Web NFC 写入演示 - 向 NFC 标签写数据
使用 NDEF 格式向 NFC 标签写入文本、URL 或自定义记录。
发布订阅模式演示 - 自定义事件总线实现
可视化展示发布/订阅模式的运作，添加订阅者和发布者，查看事件流。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
WebCodecs API 图像解码器 - 解码 JPEG/PNG 帧
使用 ImageDecoder API 解码图片并逐帧显示（若为动图），展示底层编解码能力。
加密媒体扩展演示 - EME 播放 DRM 内容示意
模拟 Encrypted Media Extensions 流程，展示如何请求许可证并播放受保护视频。
X-Forwarded-For 模拟器 - 代理链 IP 追加演示
模拟多层代理逐步添加 X-Forwarded-For 头的过程，理解如何获取真实客户端 IP。
Tor 电路构建模拟演示 - 洋葱路由中继选择可视化
可视化展示 Tor 如何选择入口、中间和出口节点建立电路，帮助理解匿名通信原理。
Web Component 生命周期演示 - 自定义元素钩子调用
创建一个自定义元素，展示 constructor、connectedCallback、attributeChangedCallback 等钩子的触发时机。
DOM 事件传播模拟器 - 捕获与冒泡阶段可视化
构建嵌套元素，触发事件并逐步显示事件流经路径，可切换捕获/冒泡模式。
Server-Sent Events 模拟器 - 单向实时数据流演示
在前端创建模拟 SSE 连接，接收服务器推送的消息流并实时渲染到页面。
轮询机制模拟器 - setInterval 数据请求演示
模拟客户端定时请求服务器数据，展示网络延迟和响应，对比短轮询效率。
beforeunload 事件演示 - 页面离开确认对话框
激活 beforeunload 事件，尝试刷新或关闭标签页时会弹出浏览器确认提示，展示实现方式。
粘贴事件处理演示 - 监听并解析剪贴板内容
捕捉页面粘贴事件，展示文本、HTML 或图片数据，演示如何定制粘贴行为。
HTML 拖放 API 演示 - 文件与元素拖拽交互
通过实例展示原生拖放 API 的使用，包括文件拖拽上传和页面元素排序功能。
浏览器录音演示 - MediaRecorder API 录制音频
使用浏览器内置 MediaRecorder 录制麦克风音频并下载为 WAV 或 WebM 文件。
广告拦截器检测演示 - 判断用户是否启用拦截
通过加载测试广告脚本或元素来检测浏览器是否启用广告拦截插件，并展示检测原理。
XSS 过滤器测试沙盒 - 输入转义与过滤演示
输入可能的攻击向量，选择不同的转义或过滤策略，实时查看是否被安全处理，教育安全开发。
WebGL 指纹展示 - GPU 渲染器与扩展信息
获取显卡型号、WebGL 参数和扩展信息，展示 WebGL 指纹的独特性和隐私风险。
Canvas 指纹演示工具 - 图形渲染差异识别设备
通过绘制隐藏图形并获取像素哈希，展示 Canvas 指纹如何用于跟踪用户，并给出防护建议。
CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览
选择不同的混合模式并调整背景与前景，实时查看混合效果，支持所有标准混合模式。
PGP加密解密演示 - 公钥加密私钥解密
生成临时密钥对，演示非对称加解密短消息的过程。
简易机器翻译演示 - 前端调用本地模型模拟
使用示例翻译对演示翻译过程，了解机器翻译基本界面。
斯巴达棒密码演示 - 绕棍子写解密
模拟古代斯巴达人将羊皮纸绕在棍上写信息的方法，输入文本解密。
视错觉库 - 交互体验著名错觉
收录多幅动态与静态视错觉，可调节参数观察效果，附科学解释。
航班动态查询模拟 - 演示航班延误信息
输入（虚拟）航班号，显示模拟的登机口、延误状态等，用于教学或演示。
自由手绘白板 - 无限画布与激光笔
使用鼠标或触控笔在无限画布上涂鸦，激光笔模式不留下痕迹，适合演示思路。
HTML Input 类型全览演示 - 每个type实时渲染
列出从text到color的所有input type，旁边实时展示控件的原生渲染，表单开发参考。
SQL JOIN 类型交互演示 - 韦恩图与结果预览
选择表A和表B的样本数据，查看INNER/LEFT/RIGHT/FULL JOIN的韦恩图与实际输出结果。
四季成因互动演示 - 地轴倾角与光照
3D地球展示地轴倾角与公转，调节月份直观理解太阳直射点移动如何形成四季。
图像纹理合成演示器 - 基于样图生成大图
上传一小块纹理样本，利用简单模板匹配算法无缝扩展填充成一张大图。
CSRF防护概念演示 - Token验证流程
模拟跨站请求伪造攻击以及如何通过CSRF Token进行防护的流程演示。
请求节流演示器 - 滑块/桶算法可视化
动画展示滑动窗口和令牌桶算法如何限制API请求速率，对比两者差异。
在线要点演示器 - 类似PPT的极简演讲
输入Markdown风格要点列表，全屏展示时逐步放大当前项，类似非线性的展示。
SQL注入演示平台 - 模拟漏洞与防护
构建一个虚拟的登录窗，演示SQL注入登录绕过，并展示参数化查询如何防范。
WebAuthn模拟器 - 创建与验证凭据
使用CTAP2模拟器或安全密钥在浏览器中体验无密码注册与认证流程。
结构化克隆演示 - 深拷贝支持类型
选择各种数据类型演示structuredClone的深拷贝能力，对比JSON.parse的限制。
Web Worker计算演示 - 后台斐波那契不卡顿
在主线程和Worker中分别计算大斐波那契数，对比界面的响应度。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
人眼极限分辨率演示 - 角分辨测试
显示渐小条纹，测试你能分辨的最小视角，对照理论视网膜细胞密度。
采样定理演示 - 欠采样与混叠现象
调节采样频率，观察对正弦波的离散采样和重建效果，演示欠采样导致的频率混叠。
数字滤波器设计器 - 低通/高通/带通
在Canvas上绘制理想频率响应，并应用简单FIR滤波器对合成信号进行滤波，听音效对比。
K-Means聚类演示器 - 交互式数据分类
在Canvas上随机撒点，运行K-Means算法，观察中心点迭代移动和簇的形成。
声明式链接捕获演示 - 一键打开PWA
设置capture_links清单字段，让浏览器在点击链接时自动打开PWA而不是新标签页。
用户空闲检测高级演示 - 区分空闲/锁定
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。