# 專案分享：透過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)


## 共同筆記

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