引言
是篇文,述说PROTO RECON之方术 — 一实验之应用,合手机之感应器与浏览器内之机器学习,自编程之前之需求演至于今。吾已验其界面之行,然犹初读其源码之阶。于此,吾辑其原之需求与人工智能所生之源码图,以为将来深究之基。
- 现场演示(实验):原型重建(云flare Workers)
- 仓库: github.com/katsutoshi0katsutoshi/proto_recon
- 隔离实验沙盒: CodePen / @wlzpaovm-the-bashful
注此乃测试之中。繁重任务之调优未竟——自行承担风险。
其始也
起于一疑: 可乎筑数字之体验于真实世界之上? 其念之萌,在今之电话传感,能否将旧时科幻游戏之机器人视或机舱视之景,叠于实景之上。
著码之先,吾撮其要,与灵机对谈,化功能之约于文辞,而后始事。
技术之择(未施之先)
| 域 | 采用 / 考量 | 注记 |
|---|---|---|
| 物形之辨 | TensorFlow.js (COCO-SSD / BlazeFace) | "物象辨识"为机器人视感之枢,尽在浏览器中 |
| 地图 | 小叶 | 游戏中所习见之"此处即你"之示也 |
| 躁声 / 效应 | 初时GLSL / three.js | 欲复用旧时筑效之经验 |
噪层乃后加之。吾使游标行之,三.js 被弃,而择 Canvas 2D 与 CSS 以效 CRT。直书无赘,故体轻——此决实偿于真器.
陀螺、罗盘、高程(于所支之器),GPS 及类此之器亦在目,联于HUD与微图.
当时之需(概要)
谋篇之文——经与人工智能反复商讨而成——题曰战术侦察&指揆终局"项目:锁定(暂名)"。彼时,传感之精微,使吾辈推度第二阶段必需以Unity(原生)为基重撰之。。然以游标编程,事竟顺遂,虽无three.js,景亦转佳,遂向。一阶段或可独于网中成之。
核心之旨
- 形貌:单色绿之军式界面,扫描线,噪影
- 。人工智能。:实时目标侦测,锁定追踪
- :沉浸感:陀螺仪、高度计、蜂鸣声——仪器与音效反馈
- :未来:VR眼镜HUD,视线控制(概念阶段)
计划与现状
| :项目 | :计划(截至2026年4月) | :当前(原型侦察) |
|---|---|---|
| 堆栈 | Next.js + Three.js + TF.js | Vite + 纯 JS + TF.js (无 Three.js) |
| Altimeter | 气压传感器 (假定原生支持) |
地理位置altitude (仅支持特定设备) |
| 地图 | (计划中仅略作说明) | Leaflet 微缩图已实现 |
| 导弹效果 | 点击发射虚拟导弹 | 尚未实现 |
| 第二阶段Unity | 气压高度、触觉等 | 尚未开始 (网页原型持续进行中) |
| 距离显示 | (规划中多未明确) | WebXR击测仅计(无边界框预估距离) |
全规划文卷因长而收
全规划文卷(项目:锁定之击草稿)
战术侦察&指导终端应用——"项目:锁定之击(暂名)规划文卷"
此篇总括一智能手机相机滤镜之构思,融复古未来主义界面与现代人工智能于一体。
一、项目概览
一"戏"之应用,复现八十至九十年代科幻电影游戏中所见之军事侦察终端之体验,以实时智能手机相机馈路与人工智能为之。军事侦察终端
二、核心构思
- 视觉:單色緑,呼應舊式終端。掃線與雜訊,復古之趣盎然。
- :人機互動。:實時物體辨識,自動鎖定目標。
- :沉浸體驗。:陀螺儀,氣壓高度計,蜂鳴反饋。
- :擴展性。:VR眼鏡(如Hacosco)與視線控制HUD——概念階段。
三、主功能(节选)
三、一、视频滤镜
- 绿幕覆盖(夜视镜纹理)
- 边缘条形图及扫描指示器
三、二、AI锁定
- 自动移动目标检测,以绿框追踪
- 目标恒定于准星中心时,SE加速
- 锁启毕:匣转赤,警音鸣。
- 轻点以发射虚拟导弹(效果)
3.3 传感仪器
- 旋仪:俯仰偏转之数显
- 气压计:相对高度(源自气压传感器,如 iPhone 等)
四、发展之期(当时之路线图)
- 一阶段:網絡原型(Next.js 與 Three.js 與 TF.js)。可通 URL 分享。
- :第二階段。:Unity 端口。氣壓高度,震動。
- :第三階段。:VR/XR。立體顯示,視線鎖定。
:五、發布策略。
:Qiita / Zenn 記錄開發,社交短視頻,Reddit 記錄等。
肇于丙申年四月廿九日(规划之期)
开发之序
编撰之事委诸光标,渐次增其能,至于今之状。至若示之方,吾载其要于金米,询以何方为善。已察其行于界面,然观其本,乃其次事。下所列之目次及相倚之图,乃智工所造,为是文而洁之。
本源之陈
众木之根,乃乎HTML
| 文 | 角色 |
|---|---|
index.html |
主界面。BIOS/启动画面,启动进度,相机画面,准星/检测覆盖,指南针/高度条,小地图,CRT效果等。加载/src/main.js为模块 |
privacy.html |
隐私政策(静态页面:收集数据,使用目的等) |
oss-notice.html |
静态开源软件/第三方许可声明 |
src/ — 运行时文件
入口,配置,界面
| 文件 | 角色 |
|---|---|
main.js |
应用中心。启动序列,相机获取,模块启停,HUD更新,用户操作(启停、锁定等) |
appConfig.js |
开发者调校默认值(相机、CRT、物体检测、面部遮罩、小地图、动作联动、实时健康等) |
applyDevConfig.js |
应用于devConfig.crt作为CSS变量于document.documentElement(光晕、扫描线等) |
uiLexicon.js |
一源统合界面文字(如启动画面、状态显示、错误提示、缩略图标签等),兼具将文字应用于HTML之能 |
style.css |
全局布局、HUD、CRT、缩略图及准星样式(绿军风界面) |
视频与人工智能推演
| 文件 | 角色 |
|---|---|
tfBackend.js |
一次性TensorFlow.js后端初始化(WebGPU→WebGL→CPU) |
personDetection.js |
COCO-SSD 物体检测。边界框绘制,锁定区域,目标事件,推理健康通知 |
facePrivacy.js |
焰面识形隐面(私域覆层) |
lockTrackKeys.js |
锁区目标稳定ID(位置量化+与前帧匹配) |
遥距&增强现实
| 文牍 | 职司 |
|---|---|
objectRange.js |
HUD上目标距离——仅测量实际距离(WebXR等);不包含bbox估算距离 |
webxrHitTestRange.js |
WebXR沉浸式AR结合真实世界距离(米)输入至objectRange
|
导航,地图,传感器
| 文件 | 角色 |
|---|---|
compass.js |
设备朝向(指南针)封装。朝向解析,方位标识,iOS权限请求 |
miniMap.js |
地望监察与微图之表(位、向、速、高之应) |
miniMapLeaflet.js |
叶图之始,现位之标(向箭),瓦片之显 |
motionHud.js |
倾β/γ于DeviceOrientation,以适右立之HUD |
motionStabilityLink.js |
倾/震之连,于准星/微图之视差及警(含振) |
应 &监察
| 文件 | 角色 |
|---|---|
liveHealth.js |
轻量级实时健康监察(推理延迟、连续失败、视频停滞)及HUD通知 |
audioFx.js |
Web音频API用于启动、检测、锁定、错误音效等 |
src/—仅测试(未在屏幕上使用)
| 文件 | 角色 |
|---|---|
lockTrackKeys.test.js |
单元测试lockTrackKeys.js
|
liveHealth.test.js |
之单元測試,liveHealth.js
|
tfBackend.test.js |
之单元測試,tfBackend.js
|
依賴關係(概覽)
flowchart TB
index[index.html] --> main[main.js]
main --> config[appConfig / applyDevConfig / uiLexicon]
main --> cam[camera + HUD]
main --> det[personDetection]
main --> face[facePrivacy]
det --> tf[tfBackend]
face --> tf
main --> map[miniMap]
map --> leaf[miniMapLeaflet]
main --> nav[compass / motionHud / motionStabilityLink]
main --> range[objectRange]
range --> xr[webxrHitTestRange]
main --> health[liveHealth]
main --> sfx[audioFx]
main.js 統攝萬物;appConfig.js 設置與 uiLexicon.js 复制驅動行為與顯示,跨模塊傳遞之。
結束 — 次當閱讀何者
后之文将开源并逐细探之。下之研习路径乃所定阅文次序(01已以此文之文图毕之)
源文研习路径(三十二部——点击展之)
第一阶——配置与骨格(无需权限)
| [#] | 题/旨 | 主文件 | 核心技术 | 常见陷阱 |
|---|---|---|---|---|
src/ |
- |
|||
| 02 |
devConfig — 远程控制行为 |
appConfig.js |
相机、检测、CRT键义 | 一变而涉全应用 |
| 03 | 一源供界面文字——uiLexicon
|
uiLexicon.js,index.html
|
集中字符串与错误信息 | 寻遗硬编码文字 |
| 04 | CRT标记至CSS——applyDevConfig
|
applyDevConfig.js,style.css
|
JS配置→CSS变量(:root) |
变量名拼写误破样式 |
| 05 | HTML之骨 — 浮影 & HUD之DOM | index.html |
层叠(视频/画布/HUD) |
z-index vs hidden属性 |
第二幕 ⭐⭐ — 观之而启"戏台"(无镜亦可试之)
界面之动与音之控,无需器之权.
| # | 標題 / 題旨 | 主文件 | 核心之技 | 常犯之失 |
|---|---|---|---|---|
| 六 | 水花,基本输入输出系统,乱码文 |
main.js,style.css
|
首运行界面流程,计时控制 | 计时器重置,文句错乱 |
| 七 | 启动覆盖层——进度与步骤 | main.js |
启动时异步状态 | 失败步骤永无过渡至error
|
| 08 | Web音频——点击后播放 | audioFx.js |
AudioContext及用户手势 |
自动播放策略,静默错误 |
| 09 | 十字准星SVG与固定布局 |
index.html,style.css
|
居中固定CSS布局 | 何故motionStabilityLink 已禁用 |
| 10 | 实时HUD帧与CRT噪声 |
style.css,main.js
|
视频扫描线效果 | 噪声渲染成本canvas
|
第三阶段 ⭐⭐⭐ — 媒体、传感器、磁带(需真实设备)
| [#] | 标题/主题 | 主文件 | 核心技术 | 常犯之失 |
|---|---|---|---|---|
| 十一 | 鏡頭 —getUserMedia且蓄好尚 |
main.js |
facingMode, 流水之取 |
iOS之权限时序,连接悬滞 |
| 十二 | 視頻演講——object-fit: cover
|
style.css,main.js
|
隐晦渐显之预览过渡 | 非所愿之镜缩 |
| 十三 | 启动全序列——startCamera
|
main.js |
轻触后:相机→模型载入 | 并行与串行切换时之故障日志 |
| 14 | 航向胶带——连续角度与N跳 |
compass.js,main.js
|
0°–360°展开,SVG控制 | 北向(N)剪裁,填充不足 |
| 15 | 倾斜胶带——β / γ与motionHud
|
motionHud.js,main.js
|
DeviceOrientation |
deviceorientationabsolute行为异同 |
| 16 | Altitude tape — GPS altitude callback |
miniMap.js,main.js
|
Geolocation API | Devices where altitude is null
|
| 17 | Minimap — Leaflet and OSM/CARTO | miniMap.js |
External tile map, marker | 處理位置拒絕 |
| 18 | 速度HUD — 公里每小時自coords.speed
|
miniMap.js |
坐標變更之速度 | 速度顯--當靜止時 |
第四階段 ⭐⭐⭐⭐ — 檢測、隱私、機器學習
| # | 標題/主題 | 主要文件 | 核心技術 | 常遇陷阱 |
|---|---|---|---|---|
| 19 | TF.js后端—WebGPU→WebGL→CPU | tfBackend.js |
图形API回退 | 不兼容设备,首编译,发热 |
| 20 | COCO-SSD简介—ensureModel与节流 |
personDetection.js |
模型载入,推理节流 | CDN载入失败,动态import()
|
| 21 | 框线绘制drawVideoCover且画布 |
personDetection.js |
对齐绘制video方之理也 |
失谐之变,DPR |
| 廿二 | 锁定区—驻留,键位稳定 | personDetection.js |
追踪标识,平滑 | 身份易位,明灭闪烁 |
| 廿三 | 距離—僅WebXR觸發測試 |
objectRange.js,webxrHitTestRange.js
|
HUD上测距 | 不兼容设备无距离显示 |
| 二十四 | 面部马赛克—BlazeFace与画布合成 | facePrivacy.js |
rAF加限速推理 | 绘制周期与推理冲突 |
| 二十五 | 马赛克间隔与热度—intervalMs
|
facePrivacy.js |
推理FPS与负载权衡 | 機器凍結,熱節流 |
第五階 ⭐⭐⭐⭐⭐ — 整合,運作,錯誤
| [#] | 標題 / 主題 | 主要文件 | 核心技術 | 常見陷阱 |
|---|---|---|---|---|
| 26 | 實時健康 — 延遲,視頻停滯 | liveHealth.js |
主線程停滯監測 | 负载峰值之下的误报 |
| 廿七 | 初创企业之错误处理——超时及catch
|
main.js |
异步之误隙 | 模型载入超时 |
| 廿八 | 再访而存其迹 | vite.config.js |
PWA(Progressive Web App),Vite构建 | failed to fetch dynamically imported module |
| 廿九 | 重审重启 — 模型废弃 | main.js |
谨防内存泄漏 | 再试甚重 |
| 30 |
motionStabilityLink — 何以视差被裁 |
motionStabilityLink.js |
视差与可读性 | 渲染滞涩 |
| 31 | 整合 — main.js协奏 |
main.js (全) |
生命周期管理 | 触控时紧密耦合破除 |
| 32 | 回望录——瑕疵录及来日之计 | 此应用整体 | 定于减负之策 | 论"致命之虫已逝" |
后篇将启于路图《二》(appConfig.js)。












