玩這個(gè)Demo的時(shí)候需要一個(gè)有攝像頭的電腦和手機(jī)，將鼠標(biāo)移動(dòng)到天氣圖標(biāo)上會(huì)有二維碼，用手機(jī)掃描二維碼進(jìn)入天氣圖標(biāo)網(wǎng)頁(yè)，將圖標(biāo)對(duì)準(zhǔn)屏幕的黑色區(qū)域進(jìn)行掃描就可以出現(xiàn)對(duì)應(yīng)的動(dòng)畫(huà)。

   這是一個(gè)MarkerBase的AR程序，MarkerBase就是識(shí)別一個(gè)特定的圖像（的二維碼...），而的AR可能是MarkerLess的，比如識(shí)別環(huán)境中的車(chē)，房子，行人。目前由于技術(shù)限制，大部分AR都是Markerbase的。

   其實(shí)我覺(jué)得AR比VR更困難，VR只需要給用戶(hù)“輸出”一個(gè)虛擬世界，而AR還需要根據(jù)用戶(hù)“輸入”的現(xiàn)實(shí)世界，“輸出”虛擬的效果?！拜敵觥眲?dòng)畫(huà)對(duì)于前端來(lái)說(shuō)已經(jīng)是輕車(chē)熟路，但是如何處理用戶(hù)“輸入”的現(xiàn)實(shí)世界是很大的技術(shù)挑戰(zhàn)。雖然現(xiàn)代JS引擎已經(jīng)很快了，但是在處理攝像頭傳入的圖像數(shù)據(jù)任務(wù)時(shí)，單線程的JS的馬車(chē)遠(yuǎn)遠(yuǎn)落后于同時(shí)代的Native火箭。

   在WebRTC技術(shù)的支持下，我們可以拿到攝像頭的數(shù)據(jù)并且把它繪制成圖片，一旦用JS處理像素，噩夢(mèng)就開(kāi)始了。AR應(yīng)用對(duì)計(jì)算速度要求極高，動(dòng)畫(huà)至少要30幀才能被用戶(hù)勉強(qiáng)接受，也就是說(shuō)，要在34ms的時(shí)間內(nèi)，完成圖像處理-->圖像識(shí)別-->動(dòng)畫(huà)渲染。這三個(gè)操作都是CPU密集運(yùn)算，如果全部用JS來(lái)做，肯定無(wú)法在一般配置的電腦上保證幀數(shù)。這時(shí)就要拿出WebGL和WebWorker一起來(lái)加速了。

   圖像識(shí)別的步都是圖像處理，彩色圖片中包含太多無(wú)用的信息，同時(shí)攝像頭在連續(xù)拍攝的時(shí)候有噪點(diǎn)，需要把主要信息提取出來(lái)，并且盡可能降噪。

   轉(zhuǎn)換成黑白的算法有很多，但是基于GPU計(jì)算的話，大多還是邊緣檢測(cè)，邊緣特征的點(diǎn)會(huì)被標(biāo)記成白色，另外再對(duì)圖中的白點(diǎn)大小進(jìn)行篩選，太小的白點(diǎn)可能是攝像頭的噪點(diǎn)。這樣兩步操作用WebGL來(lái)做60幀毫無(wú)壓力。

   接下來(lái)把黑白的圖片像素讀取出來(lái)進(jìn)行圖像識(shí)別，用GPU實(shí)現(xiàn)的圖像識(shí)別還真的很少見(jiàn)，這里我選用了第三方的神經(jīng)網(wǎng)絡(luò)(ConvNetJS)進(jìn)行圖像識(shí)別。對(duì)于前端來(lái)說(shuō)，神經(jīng)網(wǎng)絡(luò)還是一個(gè)比較陌生的詞語(yǔ)。大概就是機(jī)器學(xué)習(xí)的一種算法，如果探索精神不是特別強(qiáng)，可以把它當(dāng)成一個(gè)工具而不用了解具體實(shí)現(xiàn)，就像你用React不需要知道具體怎么將jsx轉(zhuǎn)化成DOM。接下來(lái)主要講一下怎么用神經(jīng)網(wǎng)絡(luò)進(jìn)行識(shí)別。