---
# System prepended metadata

title: 人豪工作區
tags: [畢業專題]

---

# 人豪工作區
###### tags: `畢業專題`

### 任務列表
1. [任務範本](#任務範本)
2. [AR.js實驗環境](#AR.js實驗環境)
3. [測試CIALAB色彩比對](#測試CIALAB色彩比對)
4. [openTKAR實作](#openTKAR實作)


## 任務範本
**任務目標：** 
**描述：** 
**參與人員：** 
**預估完成時間：**
- [ ] 已審核
- [ ] 已完成

**目標：**
- [ ] 分段目標1
- [ ] 分段目標2
- [ ] 分段目標3

**資料蒐集：**
1. [資料標題1](網址)
1. [資料標題2](網址)

**結果展示**

**結語：** 

![](https://i.imgur.com/ena7M5A.png =x300)

---



## AR.js實驗環境
**任務目標：** 用AR.js建立實驗環境
**描述：** 建立網頁AR實驗環境，方便測試核心演算法
**參與人員：** 人豪
**預估完成時間：** 3/22
- [x] 已審核
- [x] 已完成 - 3/18

**目標：**
- [x] 建立基礎AR環境
- [x] 學習操控各項參數
- [x] 取得Marker像素位置
- [x] 用RGB初步測試光源模擬

**資料蒐集：**
1. [初步理解AR.js](https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf)
2. [學習three.js](https://ithelp.ithome.com.tw/articles/10199690)
3. [操控Marker相關變數](https://jeromeetienne.github.io/AR.js/three.js/)
4. [取得3D物件在螢幕上的像素](https://stackoverflow.com/questions/27409074/converting-3d-position-to-2d-screen-position-r69)
5. [AR.js原始碼](https://github.com/jeromeetienne/AR.js)

**結果展示**
![](https://i.imgur.com/xAuPxkj.jpg =300x)
[原始碼](https://github.com/54bp6cl6/ARstudy/blob/color_change/ar.html)

**結語：** 操作方便，但運算速度慢且畫面不穩，適合實驗用。

---

## 測試CIALAB色彩比對
**任務目標：** 測試使用LAB比對Marker的效果
**描述：** 將影像像素轉為LAB，再與預設Marker顏色做比對，得知燈光對Marker造成的影響，並將其套用在虛擬物件上。
**參與人員：** 人豪
**預估完成時間：** 3/29
- [x] 已審核
- [x] 已完成

**目標：**
- [x] 以python程式碼手動測試
- [x] 將運算函式移植至測試環境
- [x] 測試real-time效果
- [x] 測試當Marker帶有其他色彩時的效果

**資料蒐集：**
1. [RGB與LAB互轉程式出處](https://blog.csdn.net/qq_36810544/article/details/83855962)
2. [num.js](https://www.npmjs.com/package/numjs)

**結果展示**


![](https://i.imgur.com/K9D85xi.jpg =200x)![](https://i.imgur.com/IgnMBVm.jpg =200x)![](https://i.imgur.com/urEZCtP.jpg =200x)
--------無擬真效果-------------------昏暗環境---------------------明亮環境-----------

![](https://i.imgur.com/nOFLuZ7.jpg =200x)![](https://i.imgur.com/PSSY3cj.jpg =200x)
--------極端環境(藍)-----------------極端環境(紅)-------

**結語：** 極端環境的效果還需要研究，參數的換算公式還可以優化。在實驗環境中難以精準捕捉Marker的位置，導致難以實現多像素的色彩比對，等主要系統寫出來可以再嘗試。

---

## openTKAR實作
**任務目標：** 學習OpenTK並實作AR渲染
**描述：** 由於OpenGL在各平台的實作差異相當大，因此採用OpenTK來實作跨電腦與手機的函式庫
**參與人員：** 人豪
**預估完成時間：** 5/3
- [x] 已審核
- [x] 已完成

**目標：**
- [x] 學習OpenTK基礎
- [x] 用winform實現3D模型檢視
- [ ] 用Xamarin實做3D模型檢視(目前不確定是否繼續採用App)

**資料蒐集：**
1. [OpenTK](https://opentk.net/learn/index.html)
2. [winform範例](https://github.com/mono/opentk/blob/master/Source/Examples/OpenTK/GLControl/GLControlGameLoop.cs)
3. [openGL4學習筆記](http://dreamstatecoding.blogspot.com/2017/01/opengl-4-with-opentk-in-c-part-1.html)
4. [3程式碼](https://github.com/eowind/dreamstatecoding)
5. [Learn Opengl CN](https://learnopengl-cn.github.io/)


**結果展示**
![](https://i.imgur.com/8iodysr.jpg)



**結語：** 
基礎都已經學會，但封裝上有點困難，且以這麼菜的基礎下去封裝反而讓靈活性降低，因此應該考慮定義介面並提供標準類別，讓使用者依需求更改。

---