講者： Roxas

狂暴煞氣屌炸天的新世代 web 應用 AR

擴充實境

About ME

系統暨網頁開發部工程師（聖誕老人國際股份有限公司）

產品暨研發技術處工程師（遠時數位科技股份有限公司）

經歷：

黃致維（Roxas）

個人部落格

可獲得收穫

可以弄清楚 AR 與 VR 的差異

代碼繪製 3D 圖形的能力

AR 的組成要素

製作 Browser 上的 AR 效果

初步認識 WebGl 、 Three.js 、A-frame

什麼是 AR ？

Augmented Reality （增強現實）

最常令人混淆的名詞

AR (Augmented Reality )：增強實境

VR (Virtual Reality)：虛擬實境

MR(Mixed Reality)：混合實境

透過相機取得現實中的畫面，使使用者感覺到與現實做連結

透過電腦來模擬具備整合視覺與聽覺訊息的3D虛擬世界

通通是假的！！！

AR＋ VR

可以辨識虛擬與現實

最常令人混淆的名詞

CR

（Cinematic Reality）

影像實境

讓人感覺彷彿可裸眼看到彷彿電影特效的虛擬場景

相機

圖像辨識

3D 模型

Step1: 透過相機取得現實中的畫面，作為背景

Step2: 藉由圖片辨識的技術，取得指定的座標位置

Step3: 針對取得到的座標，在特定的位置上

渲染出指定的圖形 ( 2D 或者是 3D 模型 )

實現 AR 的三步與三要素

廣受人知的 AR 應用

PokeMon Go

進入實作！

相機

如何開啟攝像鏡頭？

WebRTC

(Web Real-Time Communication)

中譯為：中文網頁即時通訊

是一個支援網頁瀏覽器進行實時語音對話或影片對話的 API

相機

他可以藉由 <video/> 的 HTML DOM

輸出藉由攝像機取得的畫面

WebRTC 提供的方法：

getUserMedia

相機

DEMO 連結

小心不要被自己嚇到了～

chrome 52+
firefox 36+
IOS 11 ＋
另外在 WebView 中無法使用，除非有開起對應的權限

getUserMedia 兼容性：

限制：

應安全性考量，需要在 Https 環境底下才能使用

相機

範例代碼


<video id="video" width="640" height="480" autoplay>

<script>
    const video = document.getElementById('video');
    
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}
</script>

圖片識別

圖片識別項目

臉部表情（眼睛、鼻子、嘴巴）

辨識標記（QRcode, 自然圖片）

識別物體（識別圖片上的物體）

顏色識別 (RGB 三原色)

。。。

圖片識別

相關套件與 lib

Tracking.js：提供顏色識別與臉部識別的 lib

AR.js：提供標記識別

Tensorflow Object Detectio：物件辨識

10 行 HTML ！！

就可以做出 AR 的效果

AR.js


<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
  	<a-marker preset="hiro">
            <a-box position='0 0.5 0' material='color: black;'></a-box>
  	</a-marker>
  	<a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

代碼範例：

哇！！真的只要 10 行 HTML 啊！！

AR.js

實際展示

感謝 Gary 大大的影片實例

AR.js

做了什麼？

Artoolkit

Artoolkit 是 AR.js 在處理圖片辨識的核心，是一個由 C/C++ 語言所撰寫的函示庫

主要是以標記 (Marker) 作為在相機中，取得相對位置的依據

Three.js

處理 3D 繪圖的 JavaScript FrameWork

AR.js

如何產生 AR.js 的 Marker？

AR.js


 <!-- <a-scene embedded arjs='patternRatio: 0.9; sourceType: image; sourceUrl: scene.png;'> -->
 <a-scene embedded arjs'>

	<!-- 放置 要渲染的 3D 模型 -->

	<a-marker-camera type='pattern' url='mark.patt'></a-marker-camera>
  </a-scene>

代碼說明：

3D 圖形

組成

camera (相機 or 視角)

Scene (舞臺)

3D 圖形

如何實作

A-frame

thress.js

webGL

WebGL

HTML5 原生的 API

不需要使用任何的套件就可以渲染二維或三維的圖形

超難！！！

簡介

做了什麼？

1、將資料透過 Shader 轉換之後送入 GPU

2、GPU 開始依照傳入的資料做繪圖

WebGL

GPU 是什麼？

電腦用來處理繪圖的計算單元

會根據我們傳遞的命令進行繪圖

你可以在你家電腦的顯示卡上，發現他

GPU (graphic processing unit)

WebGL

什麼是 Shader ?

又稱為 GLSL （ OpenGL Shading Language）

一種由 C/C++ 為基底的語言

在繪製 webGl 的時，需要不斷跟 Shader 打交道

WebGL

WebGl 上的 Shader

在 webGL API 當中，Shader 又分為兩種：

Vertex shader：

Fragement shader (Pixel)：

WebGL

跟 GPU 解釋圖形如何繪製，形狀，擺放位置頂點。

圖形是由許多座標點定義的，而這些點就稱為 Vertex

跟 GPU 解釋圖形如何上色。

將多個頂點組成的模型，透過演算法，填滿像素

實例展示

WebGL

教你如何使用將近 50 行程式碼，畫一個正方形

Three.js

簡介

基於 WebGL 所開發的 3D繪製的 library

API 介面人性比較人性化

有提供很多基本的幾何圖形（正方體圓柱體。。。）

Three.js

實作：引入 three.js


<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
        <script>
            // 接下來的代碼都與此位置做撰寫
        </script>
    </body>
</html>

Three.js

實作：建立相機、舞臺、渲染器

// 建立舞臺
const scene = new THREE.Scene()
// 建立相機
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
// 建立渲染器
const renderer = new THREE.WebGLRenderer()

// 相機角度
camera.position.z = 500

// 將渲染器加入畫面
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )

Three.js

實作：將 3D 模型加入舞臺（1）

第一步：建立 3D 圖形

Geometry （集何體、3D 建模）

Material （材質、膚色）

Geometry + Material = Mesh (網面)

Three.js

實作：將 3D 模型加入舞臺（2）

＋

＝

膚色

＋

＝

黑色

Three.js

實作：將 3D 模型加入舞臺（3）


// mesh 為我們後面要加入的 3D 模型
// 直接調用 scene 下的 add 方法，就可將 模型加入舞臺 
const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh( geometry, material );

// 將圖形加入舞臺
scene.add( mesh )


// https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry
// https://threejs.org/docs/#api/en/materials/MeshNormalMaterial

在範例中我們直接使用 Three.js 提供的幾何圖形、與材質

Three.js

實作：將舞臺與相機進行渲染



  // 將舞臺與相機加入渲染器
  renderer.render( scene, camera )

Finish

Three.js

完成結果

稍微休息一下，思考一個問題～

那 AR.js 是如何做到只使用 10 行 HTML 就做出 AR 效果的呢？

WebGL 寫了 50 多行做了一個正方形

Three.js 也要寫 10 多行 JavaScript (不含 HTML)

才做出一個很基本的正方體

A-frame.js

什麼是 A-frame.js ？

A-frame

webGL

thress.js

A-frame.js

官方實例


<a-scene background="color: #ECECEC">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
 </a-scene>

A-frame.js

官方實例

好的，大家深呼吸～

這次分享主題的主角要來了