---
# System prepended metadata

title: 專案分享：透過Three.js製作AI訓練ROS地圖編輯器 ft. 劉哲佑、李育衡
tags: [2nd (2023~2024)]

---

# 專案分享：透過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 共同筆記](https://hackmd.io/@gdscncku/240313)
- [活動報名頁面](https://gdsc.community.dev/events/details/developer-student-clubs-national-cheng-kung-university-presents-zhuan-an-fen-xiang-tou-guo-threejszhi-zuo-aixun-lian-rosdi-tu-bian-ji-qi/)
- [簡報連結](https://www.canva.com/design/DAFyiB9WgTU/-4uqvwRF-IfkoS-cmIDtOg/view?utm_content=DAFyiB9WgTU&utm_campaign=designshare&utm_medium=link&utm_source=editor)
- [Slido 提問表單](https://app.sli.do/event/3J2tT5kSBEWuRZwr4nmMxh)
- [回饋表單](https://forms.gle/WbsE1N47RLLmisPdA)
- [YouTube 講座錄影](https://youtu.be/2fCKvQug5N0)

![專案分享：透過Three.js製作AI訓練ROS地圖編輯器 ft. 劉哲佑、李育衡名簡報](https://hackmd.io/_uploads/Sy-Zey1R6.jpg)


## 共同筆記

### 演講目的
講述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 執行過程可視化的軟體
