2026/9/15 12:20:16
FEATURED · 精选文章 
Gods Eye View 检测覆盖层详解屏幕空间边界框与目标ID如何工作【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view在 Gods Eye View 这款基于真实数据的间谍卫星模拟器中**检测覆盖层Detection Overlay**是最具战术感的功能它用屏幕空间的角框bracket和带目标ID的呼号标牌把真实飞行的飞机、AIS 船只、卫星等对象实时框选出来。本文将用通俗的方式讲清楚这两件事的工作原理——边界框是怎么从三维坐标变到屏幕像素的以及目标ID标签又是如何竞争有限的显示预算的。一、检测覆盖层是什么开启检测后你会看到每个被跟踪对象周围出现一个四角瞄准框旁边挂着一块写着呼号如航班号、MMSI 号和指标如 FL340 高度层、14kn 航速的暗色小牌。这套功能由一个独立模块驱动核心文件是 detection.js其文件头注释明确写道Universal Detection Overlay — renders styled screen-space bounding boxes over tracked objects (vehicles, flights, satellites)关键点所有几何都在屏幕空间计算而不是贴在三维地球上。框和文字是画在一个与 WebGL 场景分离的 2D 画布Canvas上的这样既能用 CSS 混合模式做出夜视NVG、热成像FLIR等传感器特效又不会干扰底层的 Cesium 三维渲染。二、屏幕空间边界框从三维到像素1. 投影每帧把世界坐标压到屏幕上每一帧检测模块都会遍历所有已注册数据层航班、军机、AIS 船只、卫星等向每个层拉取可检测对象getDetectableObjects()。拿到一个三维世界坐标后只需做一次矩阵乘法——乘以本帧的视图-投影矩阵view-projection matrix——即可得到屏幕坐标先用裁剪空间的 w 分量判断对象是否在相机背后clipW 0直接剔除再换算成像素坐标(sx, sy)并做视口边界检查出屏的对象留了一点边距 padding不画框。这套剔除逻辑见 detection.js 的 _drawOverlay。2. 框的大小会随距离变化边界框不是固定像素值对象类型框尺寸策略飞机AIR按近大远小曲线缩放与场景中的 3D 广告牌同一条曲线拉近时框跟着变大不会显得突兀船只 / 卫星 / 车辆固定尺寸DENSE 模式下略放大正在被跟踪的目标使用更大的框尺寸突出显示3. 角框Bracket只画四个角边界框在视觉上是四段 L 形角线而不是封闭矩形。绘制函数 appendCornerBracket 用框的半宽/半高计算四个角的线段长度取短边的 55%。这样做有两个好处性能所有同色框合并进一个Path2D一次stroke()批量描边而不是每个框一次绘制调用观感开放式的角框更像雷达/传感器 UI不会像实线框那样糊住目标。4. 颜色来自威胁分层Tier每个对象先解析一个分层键civil / military / sea / space / vehicle见 resolveTier。分层决定框的颜色、标牌左侧的强调色条和引线颜色——军事目标在多数主题下会以高对比色呈现一眼可辨。三、目标 ID 与呼号标牌谁能获得标签1. 标签的两行结构每个标牌由 composeLabel 组装主行primary目标ID——航班号、MMSI、卫星名等最多 18 个字符亮色显示副行secondary类别 · 指标例如NAV · GPS、FL340、14 kn最多 26 个字符暗色显示。高度会被格式化为航空标准的飞行高度层formatFlightLevel如 34000 英尺显示为FL340速度则取整为节14 kn。数据缺失时标签优雅降级为只有 ID 一行不会出现半成品文字。2. 四个角位的避让布局标牌不一定画在框的正上方。系统会依次尝试东北、西北、东南、西南四个角位见 _buildLabelPlacements每个候选位置都要通过三道检查不越出画布——保留 4px 安全边距不与 HUD 面板重叠——通过 rectIntersectsAny 与 UI 预留矩形做碰撞检测位于光圈keyhole可读范围内——离视场中心越远的标牌透明度越低避免边缘文字干扰。选中后一条引线leader line从标牌边缘连到框的角明确它指向哪个目标。3. 标签仲裁器有限的显示预算这是整个覆盖层最精巧的部分。屏幕上对象可能有成百上千个但文字标签如果全部显示就会变成牛皮癣。因此系统引入一个全局标签预算label budget预算随相机高度动态调整。相机越远能容纳的标签越少。预算表定义在 detectionPolicy.js 的VIEW_SCALE_BUDGETS中视角密度 0%25%50%75%100%街景级923456890城市级718355370区域级410203040全球级614284256预算再按数据层分配。军事层权重最高1.4其次是交通1.15、CCTV1.1、航班/卫星/船只1.0共享单车0.9见 detection.js 的 LAYER_WEIGHTS仲裁器LabelArbiter用弹性/加权两种策略把预算切分给各层被选中的目标获得稳定身份——标签出现后不会每帧闪变目标离开后还要淡出300ms保证视觉连续性见 labelArbiter.js。4. 求解节流为什么不会卡标签选谁上屏的求解每125ms才重新执行一次LABEL_SOLVE_INTERVAL_MS而框的位置每帧都重新投影。也就是说框每帧重算永远紧贴目标标签低频求解决定名单名单内的标签每帧跟随重投影。再配合池化对象只创建一次、之后只改字段和批量绘制即使 DENSE 模式下也有稳定帧率。四、密度档位与视觉主题密度从稀疏到全景用户可通过 UI 选择五档密度0/25/50/75/100对应四种状态档位名称效果0OFF覆盖层完全关闭画布隐藏25SPARSE只保留最少的精选标签屏幕中央还有一个淡淡的焦点圈提示取舍范围50BALANCED混合层级的稳定标签集合默认75–100DENSE尽可能多的标签即旧版的PANOPTIC/GOD模式档位解析与密度归一化逻辑集中在 detectionPolicy.js旧名称SURVEY、GOD、PANOPTIC会自动迁移到新命名保证分享链接向后兼容。主题换个滤镜框就换一套颜色检测覆盖层支持retro、surveillance、thermal、default四套主题THEME_MAP主题控制框线颜色、标牌底色、辉光强度和扫描线透明度。切换到热成像风格时暗色标牌背景会自动换用天空减淡的变体——因为标牌底板存在的意义是让文字在复杂地面上可读而对着空旷的夜空就不需要那么重了。五、源码导览相关文件都在哪想深入阅读实现时建议按以下顺序均为仓库相对路径主渲染循环src/data/detection.js —— 模式管理、投影、预算、诊断信息纯函数绘制工具src/data/detectionDraw.js —— 角框几何、标签排版、文字测宽密度与预算策略src/data/detectionPolicy.js —— 五档密度、视角预算表标签仲裁器src/data/labelArbiter.js —— 配额分配与稳定身份渲染需求策略src/data/detectionRenderDemand.js —— 何时该多要一帧设计决策记录docs/CURRENT-STATE.md 中有大量关于该模块的演进说明六、上手体验打开你的第一块传感器画布在应用界面的 Controls 面板中找到Detection开关即可开启配合 Parameters 面板里的密度滑块你可以直观感受到标签预算随相机高度变化的效果飞往一个繁忙机场把视角拉到街景级把密度拉到 100% —— 你会看到标签数量最多但框很精致慢慢拉远到城市级、区域级 —— 标签数量被自动收敛留下的都是各层权重最高的目标切换到 thermal 主题再开一个巡航模式Cockpit—— 注意框的透明度会被自动调整保证座舱视角下不挡视线detection.js 的 cockpitActive 逻辑。小贴士URL 后加?detectDebug1可以看到左上角的开发者遥测横幅当前模式、可见数/源数量、密度、渲染耗时这也是排查标签为什么少了的捷径。小结Gods Eye View 的检测覆盖层是屏幕空间 UI 实时三维数据的一个优秀工程样本边界框一次矩阵投影得到像素坐标四角线批量绘制尺寸随距离和跟踪状态自适应目标ID稳定的身份求解器决定谁有名字四角位避让布局 预算配额保证文字不重叠、不刷屏可解释性所有关键决策预算、配额、透明度都有诊断数据输出行为透明可调。这套机制让一屏真实世界既能保持传感器般的紧张感又不失可读性——这正是它比传统地图标注高级的地方。【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
God‘s Eye View 检测覆盖层详解：屏幕空间边界框与目标ID如何工作
Gods Eye View 检测覆盖层详解屏幕空间边界框与目标ID如何工作【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view在 Gods Eye View 这款基于真实数据的间谍卫星模拟器中**检测覆盖层Detection Overlay**是最具战术感的功能它用屏幕空间的角框bracket和带目标ID的呼号标牌把真实飞行的飞机、AIS 船只、卫星等对象实时框选出来。本文将用通俗的方式讲清楚这两件事的工作原理——边界框是怎么从三维坐标变到屏幕像素的以及目标ID标签又是如何竞争有限的显示预算的。一、检测覆盖层是什么开启检测后你会看到每个被跟踪对象周围出现一个四角瞄准框旁边挂着一块写着呼号如航班号、MMSI 号和指标如 FL340 高度层、14kn 航速的暗色小牌。这套功能由一个独立模块驱动核心文件是 detection.js其文件头注释明确写道Universal Detection Overlay — renders styled screen-space bounding boxes over tracked objects (vehicles, flights, satellites)关键点所有几何都在屏幕空间计算而不是贴在三维地球上。框和文字是画在一个与 WebGL 场景分离的 2D 画布Canvas上的这样既能用 CSS 混合模式做出夜视NVG、热成像FLIR等传感器特效又不会干扰底层的 Cesium 三维渲染。二、屏幕空间边界框从三维到像素1. 投影每帧把世界坐标压到屏幕上每一帧检测模块都会遍历所有已注册数据层航班、军机、AIS 船只、卫星等向每个层拉取可检测对象getDetectableObjects()。拿到一个三维世界坐标后只需做一次矩阵乘法——乘以本帧的视图-投影矩阵view-projection matrix——即可得到屏幕坐标先用裁剪空间的 w 分量判断对象是否在相机背后clipW 0直接剔除再换算成像素坐标(sx, sy)并做视口边界检查出屏的对象留了一点边距 padding不画框。这套剔除逻辑见 detection.js 的 _drawOverlay。2. 框的大小会随距离变化边界框不是固定像素值对象类型框尺寸策略飞机AIR按近大远小曲线缩放与场景中的 3D 广告牌同一条曲线拉近时框跟着变大不会显得突兀船只 / 卫星 / 车辆固定尺寸DENSE 模式下略放大正在被跟踪的目标使用更大的框尺寸突出显示3. 角框Bracket只画四个角边界框在视觉上是四段 L 形角线而不是封闭矩形。绘制函数 appendCornerBracket 用框的半宽/半高计算四个角的线段长度取短边的 55%。这样做有两个好处性能所有同色框合并进一个Path2D一次stroke()批量描边而不是每个框一次绘制调用观感开放式的角框更像雷达/传感器 UI不会像实线框那样糊住目标。4. 颜色来自威胁分层Tier每个对象先解析一个分层键civil / military / sea / space / vehicle见 resolveTier。分层决定框的颜色、标牌左侧的强调色条和引线颜色——军事目标在多数主题下会以高对比色呈现一眼可辨。三、目标 ID 与呼号标牌谁能获得标签1. 标签的两行结构每个标牌由 composeLabel 组装主行primary目标ID——航班号、MMSI、卫星名等最多 18 个字符亮色显示副行secondary类别 · 指标例如NAV · GPS、FL340、14 kn最多 26 个字符暗色显示。高度会被格式化为航空标准的飞行高度层formatFlightLevel如 34000 英尺显示为FL340速度则取整为节14 kn。数据缺失时标签优雅降级为只有 ID 一行不会出现半成品文字。2. 四个角位的避让布局标牌不一定画在框的正上方。系统会依次尝试东北、西北、东南、西南四个角位见 _buildLabelPlacements每个候选位置都要通过三道检查不越出画布——保留 4px 安全边距不与 HUD 面板重叠——通过 rectIntersectsAny 与 UI 预留矩形做碰撞检测位于光圈keyhole可读范围内——离视场中心越远的标牌透明度越低避免边缘文字干扰。选中后一条引线leader line从标牌边缘连到框的角明确它指向哪个目标。3. 标签仲裁器有限的显示预算这是整个覆盖层最精巧的部分。屏幕上对象可能有成百上千个但文字标签如果全部显示就会变成牛皮癣。因此系统引入一个全局标签预算label budget预算随相机高度动态调整。相机越远能容纳的标签越少。预算表定义在 detectionPolicy.js 的VIEW_SCALE_BUDGETS中视角密度 0%25%50%75%100%街景级923456890城市级718355370区域级410203040全球级614284256预算再按数据层分配。军事层权重最高1.4其次是交通1.15、CCTV1.1、航班/卫星/船只1.0共享单车0.9见 detection.js 的 LAYER_WEIGHTS仲裁器LabelArbiter用弹性/加权两种策略把预算切分给各层被选中的目标获得稳定身份——标签出现后不会每帧闪变目标离开后还要淡出300ms保证视觉连续性见 labelArbiter.js。4. 求解节流为什么不会卡标签选谁上屏的求解每125ms才重新执行一次LABEL_SOLVE_INTERVAL_MS而框的位置每帧都重新投影。也就是说框每帧重算永远紧贴目标标签低频求解决定名单名单内的标签每帧跟随重投影。再配合池化对象只创建一次、之后只改字段和批量绘制即使 DENSE 模式下也有稳定帧率。四、密度档位与视觉主题密度从稀疏到全景用户可通过 UI 选择五档密度0/25/50/75/100对应四种状态档位名称效果0OFF覆盖层完全关闭画布隐藏25SPARSE只保留最少的精选标签屏幕中央还有一个淡淡的焦点圈提示取舍范围50BALANCED混合层级的稳定标签集合默认75–100DENSE尽可能多的标签即旧版的PANOPTIC/GOD模式档位解析与密度归一化逻辑集中在 detectionPolicy.js旧名称SURVEY、GOD、PANOPTIC会自动迁移到新命名保证分享链接向后兼容。主题换个滤镜框就换一套颜色检测覆盖层支持retro、surveillance、thermal、default四套主题THEME_MAP主题控制框线颜色、标牌底色、辉光强度和扫描线透明度。切换到热成像风格时暗色标牌背景会自动换用天空减淡的变体——因为标牌底板存在的意义是让文字在复杂地面上可读而对着空旷的夜空就不需要那么重了。五、源码导览相关文件都在哪想深入阅读实现时建议按以下顺序均为仓库相对路径主渲染循环src/data/detection.js —— 模式管理、投影、预算、诊断信息纯函数绘制工具src/data/detectionDraw.js —— 角框几何、标签排版、文字测宽密度与预算策略src/data/detectionPolicy.js —— 五档密度、视角预算表标签仲裁器src/data/labelArbiter.js —— 配额分配与稳定身份渲染需求策略src/data/detectionRenderDemand.js —— 何时该多要一帧设计决策记录docs/CURRENT-STATE.md 中有大量关于该模块的演进说明六、上手体验打开你的第一块传感器画布在应用界面的 Controls 面板中找到Detection开关即可开启配合 Parameters 面板里的密度滑块你可以直观感受到标签预算随相机高度变化的效果飞往一个繁忙机场把视角拉到街景级把密度拉到 100% —— 你会看到标签数量最多但框很精致慢慢拉远到城市级、区域级 —— 标签数量被自动收敛留下的都是各层权重最高的目标切换到 thermal 主题再开一个巡航模式Cockpit—— 注意框的透明度会被自动调整保证座舱视角下不挡视线detection.js 的 cockpitActive 逻辑。小贴士URL 后加?detectDebug1可以看到左上角的开发者遥测横幅当前模式、可见数/源数量、密度、渲染耗时这也是排查标签为什么少了的捷径。小结Gods Eye View 的检测覆盖层是屏幕空间 UI 实时三维数据的一个优秀工程样本边界框一次矩阵投影得到像素坐标四角线批量绘制尺寸随距离和跟踪状态自适应目标ID稳定的身份求解器决定谁有名字四角位避让布局 预算配额保证文字不重叠、不刷屏可解释性所有关键决策预算、配额、透明度都有诊断数据输出行为透明可调。这套机制让一屏真实世界既能保持传感器般的紧张感又不失可读性——这正是它比传统地图标注高级的地方。【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
