專案分享：透過Three.js製作AI訓練ROS地圖編輯器 ft. 劉哲佑、李育衡

• 時間：2024/03/13 19:00~21:00
• 地點：成大資訊系舊館2樓 4263階梯教室
• 講者資訊：
  • 資訊115 李育衡
    目前是成大 GDSC 雲端服務組的成員，興趣是寫一些小程式跟機器人，在因緣際會下碰到了 K8s ，越碰越好玩下，志向就慢慢轉變成變 SRE 了。
  • 資訊115 劉哲佑
    高中主要參與演算法競賽，目前專注於全端開發、CI/CD 和雲端整合技術。從高三就開始自由接案，負責大學 DSA 作業解題和網頁系統開發與維護。
    • Github：https://github.com/jason810496
    • linkedin：https://www.linkedin.com/in/zhe-you-liu/
• HackMD 共同筆記
• 活動報名頁面
• 簡報連結
• Slido 提問表單
• 回饋表單
• YouTube 講座錄影

共同筆記

演講目的

講述API與系統架構如何實作，讓大家都可以簡單地跟著實作

Tech Stack

• Three.js
• Unity
• ROS

Robot Operating System

• 目的: 開發機器人應用的統一架構，在這個專案是為了用來掃描場景作為地圖黨
• 一個node就像在整個系統下的物件(例如感測器、馬達)
• 實際案例1：福特用來作為自駕車實驗時，掃描街景地圖
• 實際案例2：Universal Robots 用來做機械手臂

Plus Robot Operating System

• 目的：增加 ROS 的易用性
• 問題：不好編輯、不好復原
• Scene Builder
  • 目的：解決上述問題
  • 用橡皮擦就能在Unity輕易劃掉掃描錯的地圖檔

後端架構（育）

• 主要用Python 撰寫
• UVICORN
  • 支援HTTPS與WebSocket
• Fast API
  • Flask
  • 有人在用FAST API嗎? 很多大公司都有在用，因為比起老牌的Flask來說相對比較簡單好用
• JSON Web Token
  • 用來驗證
• Pydantic
  • 目的：檢查用戶丟過來的資料是不是有符合data schema、可以自動生成出API文件
  • 例如：使用者註冊時必須要有頭像、名字、信箱…
• RDBMS（關連式資料庫）
  • 不想寫又臭又長的SQL，所以使用ORM(object-relational mapping)
  • 可以用key-value的方式簡單操作資料
• Docker
  • 封裝檔案（就這樣）
  • Client -> Docker:(Uvicorn + Fast API)
• 其他 Add-on
  • 用redis快取
  • CI/CD Tools: git-lab
  • k8s
• 遇到的問題1
  • ROS map data 是 json 檔，那是不是用Dynamo DB這種noSQL資料庫就好了
  • 一個欄位最大的儲存空間是400kb
  • 如果是掃瞄一間教室還ok
  • 掃描一座庭院會超過，但需要壓縮
  • 但是掃描一棟大樓的話就不可能存得下
  • 解決方法：用Dynamo DB存value，用S3儲存檔案
  • 儲存限制從 400kb -> 5TB
• 遇到的問題2（active/passive debugging）
  • 用cloudwatch做api的logging，error
  • 但是這樣發現問題有點慢，就需要使用者發現bug才會回報錯誤
  • 改用Sentry，主動監控error
• QA回答
  • Q: 你們的server是架在哪啊？自己的伺服器還是公司的伺服器還是雲端的ㄚ
    • A: Server架在AWS上
  • Q: 需要 WebSocket 的目的是什麼？
    • A: 目前沒用到，需要 WebSocket 主要是為了可擴展性（之後說不定會用到）
  • Q: Scene Builder 是從零開發的嗎？
    • A: 後端是，前端算是接手學長做一半的

前端架構（哲）

• 發請求的流程：前端 -> 後端(存地圖的資訊) -> S3檔案資料庫（存地圖檔本身）

• three.js

  • 是一種封裝後的 WebGL
  • 所有的東東都是一個「物件 Object」
  • Scene：整個3D場景
  • Camera：如何去看這個場景
    • 透視相機
    • 正交相機：因為要用2D畫面編輯3D檔，所以使用這個

• Trois.js（Trois is a french word, it means Three.）

  • = Three.js + Vue.js + Vite.js
  • 如果只用原生Three.js就會直接動到原生DOM
  • 用Three.js就可以將每個物件包成「元件」

• 編輯器

  • 使用者主要會遇到的event
    • onMouseDown：按下滑鼠
    • onMouseUp：放開滑鼠
    • onMouseMove：移動滑鼠
  • p.s. 強烈建議申請 github student pack 後下載 github copilet
  • 儲存檔案
    • 用js將currentSate轉成json檔
    • 用api發請求，拿到S3上傳檔案的api
    • 將json檔直接傳到S3資料庫，就不用經手後端ㄌ

• Mini Map

  • sync to editor
  • 跟編輯器是用同一個Scene跟Camera，只是視角拉遠一點

• SideBar

  • 狀態管理工具使用vuex(現在有點過時了，現在推薦pinia)

• Todo

  • 說不定這個專案可以包package發到npm上

• QA

  • Q: UI 設計誰做的?
    • A: 工設系的同學做的
  • Q: 編輯器的快取機制是甚麼?
    • A: 是存到 localstorage
  • Q: 地圖看的出來高低落差嗎?
    • A: No，因為被壓縮成 2D 了

• 業配

  • Grapycal: 以 node 將 code 執行過程可視化的軟體