AR技術可以通過HTML5實現嗎？不通過APP？

01-01

剛好我專欄中文章做了類似的探索。

首先可以確認的是，微信以及QQ的安卓版本，以及安卓手機的Chrome瀏覽器是支持WebRTC的，但是目前從支持的情況來說，Chrome最好。而整個iOS平台還不知道什麼時候會支持這一特性。注意這個回答是2017年了，大約16年下半年開始支持的。

我調研的方面包括在前端提取ORB特徵點，然後通過ajax或者websocket發送到服務端，使用docker負載均衡，並且在後端OpenCV識別。以及其中涉及到的效率優化問題等等。（知乎專欄）從結論來說，對於簡單的雲識別方面，是可以做到實時的。（這裡還沒有牽扯到在前端做整體圖片的pose計算，跟蹤等進一步的調研）

另一方面，對於純粹的前端，目前我也在嘗試二維碼的整體識別和跟蹤。（知乎專欄）

視頻可以參照這裡：二維碼識別效果 - 騰訊視頻

二維碼的檢測比起一般的圖片還是要容易很多，所以加上Pose計算和3D繪製也可以做到實時。目前正在嘗試增加跟蹤來避免過多的抖動。

可以，分兩塊

1. 攝像頭輸入以及視覺分析，通過 inspirit/jsfeat · GitHub

2. WebGL 三維渲染、模型動畫，通過 mrdoob/three.js · GitHub

局限性是手機上的瀏覽器不支持攝像頭，還得再等等。

微信 js-sdk 能拿到單張照片，但無法得到連續的攝像頭視頻，這意味著無法實現真正的實時 AR。

感興趣的可以關注黑客與畫家 - 知乎專欄

正巧看到這個問題，現在瀏覽器已經可以獲得攝像頭了（連微信和QQ的內置瀏覽器都可以），昨天剛做了一個 demo。

https://zhuanlan.zhihu.com/p/24800940

看看亮風台他們的AR平台，雖然技術都是十幾年前的拿過來做成了API，不過人家還是花了點功夫的。（我沒用過，不知道效果如何ㄟ( ▔, ▔ )ㄏ

有demo,但是還有局限，歡迎一起研究

今年（2016 上半年）做過這方面研究，想在 H5 做 AR，意味著兩個前提：

H5 意味著在手機而非 PC 上實現
AR 意味著需要獲取實時的視頻流

目前 Web 中實現 AR 都需要開啟攝像頭（手機具有先天優勢），而獲取實時視頻流的標準就只有 WebRTC。看看支持度：

簡單來說，只有 Android 5 以上才支持，同時還得是原生的 Chrome，而不是各種第三方瀏覽器。假如上面的條件已經滿足，接下來有幾個庫可以實現：

https://github.com/jeromeetienne/threex.webar
https://github.com/buildar/awe.js/

PS：曾經也嘗試通過 Hybric 的方式，把視頻流通過 base64 的方式傳輸到 Canvas 中，發現性能太差，閃退，不得而終。

--- 2016.9.20 update ---

好消息，若是在手機QQ、微信（已經支持）或接入 QQ 瀏覽器 X5 內核的 Webview，可以做到安卓全平台支持 WebRTC 了，因為 X5 團隊做了支持。

蘋果最新的safari 11已經可以支持WebRTC，所以起碼在蘋果的系統macOS 和iOS，以及本來在Windows和Android系統都支持AR的chrome瀏覽器，可以說在主流的硬體設備上都可以實現WebAR。

這是一個實現html5 AR的示例，使用自然特徵跟蹤一個圖像。可以在這個網頁上(聖微，把夢幻照進現實)試一下。macOS需要升級到High Sierra使用Safari 11，Windows系統需要使用最新的Chrome。

這是一個在iPhone5s上實現的WebAR，需要iOS 11。Android系統需要chrome瀏覽器。可以在這個網頁上(聖微，把夢幻照進現實)試一下。

如果需要獲得WebAR更多的資訊，請關注公眾號：聖微網路

http://weixin.qq.com/r/fyrRyY-E7NKTrcuq939t (二維碼自動識別)

aframevr/aframe

demo: Hello World – A-Frame

我記得有個東西叫做 wikitude

可以，視+AR已經實現。

WebAR體驗鏈接：

https://webar.easyar.cn/webar/share.php

註：蘋果手機用戶請將系統升級至iOS11

做過個垃圾的marker-base的做招聘網頁吸引一下應屆生……

大致是用artoolkits + threejs來做。

iOS不支持鏡頭許可權，安卓的微信掃描沒問題，性能勉勉強強

渲染部分：webgl在桌面和移動端瀏覽器普及率已經很高了，基本可以滿足渲染需求。

攝像頭：桌面chrome以及安有些安卓手機瀏覽器已經支持調取攝像頭及全屏功能，前提是需要頁面是HTTPS的。但是最主要的iphone端瀏覽器還不可以，這個很糟心。

網路方面：用websocket可以大大提升傳輸效率，使得和後端交互更流暢。

演算法方面：一些簡單的圖形矩陣元算都可以交給js去做，複雜的調用後端服務。

感測器方面：陀螺儀位置信息等都可以獲取，能夠做實時感知。

個人非常看好這一塊，並且會持續關注，瀏覽器廠商對ar/vr這塊還是很積極的，我們拭目以待。

A-Frame – Make WebVR

火狐已經有了

可以是可以，上面也說出方法了。

然而原生app性能都不夠，你還想h5？

現在最大的問題就是平台的壁壘了，目前商業用途的ar技術應用基本都只有在企業軟體內，要實現互動，只能下載app，或在某個固定的平台，如果不是用戶剛需的話，基本對app的下載沒有特別幫助，因為普通群眾對ar技術的不甚了解，所以也不能激發用戶產生強烈的參與慾望，這樣，ar技術也只是在互動上為產品體驗增加了生動性，對產品吸引新用戶沒有實質性作用。

關於這點也不是沒有突破，國美最近的活動就突破了平台壁壘，在微信端就能實現ar互動技術的應用，因為採用的是獨有的技術插件，所以應用在微信、微博……一系列互聯網平台均可實現，算是ar技術商業應用的一個突破，撒花！鼓掌！

H5的VR貌似還不錯

推薦three.js