前言
這個消息挺爆炸性的,而且是幾家歡喜幾家愁的感覺。之前,微信小程序做AR是這樣的:一種是讓用戶點擊拍照按鈕,小程序從攝像頭獲取一幀圖像,沒有實時性。還有一種是用定時器不停地獲取每幀圖像,但每次拍照會發(fā)出拍照聲音。
一、從技術(shù)角度看
1、增加的新內(nèi)容
微信小程序增加了一個新API,CameraFrameListener CameraContext.onCameraFrame(function callback)。
這個API能實時地從攝像頭獲取圖像數(shù)據(jù)。解決了前面中說的無法實時獲取攝像頭圖像的問題。
示例代碼:
const context = wx.createCameraContext()
const listener = context.onCameraFrame((frame) => {
console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
})
listener.start()
2、帶來的福利
因為iOS應(yīng)用程序WebView組件的網(wǎng)頁無法使用攝像頭,所以iOS應(yīng)用程序中的網(wǎng)頁無法實時地獲取攝像頭畫面,也就無法實現(xiàn)Web AR功能。
有個方法是:微信做Web AR的JavaScript接口,提供給網(wǎng)頁使用,網(wǎng)頁就能實時獲取攝像頭畫面了?,F(xiàn)在,微信提供了一個接口,讓小程序可以實時獲取攝像頭畫面。理論上說,網(wǎng)頁也可以通過微信JSSDK實時獲取攝像頭畫面,但目前沒看到提供。
3、需要完善的
微信小程序此次提供的實時獲取攝像頭圖像API是AR中非?;A(chǔ)的功能,離實現(xiàn)Web AR還有一段距離,這個距離涉及的技術(shù)既復(fù)雜又有門檻。微信官方也提到了歡迎自主AR引擎服務(wù)商合作,來解決這段距離的問題。
二、從行業(yè)角度看
1、部分廠商已支持Web AR
X5 WebAR目前已經(jīng)集成在安卓版本的微信,手機QQ,手機QQ瀏覽器上,擁有海量的用戶群體,同時兼具Web端跨平臺,可移植性強的優(yōu)勢,開發(fā)者只需要開發(fā)一套頁面,便可運行在以上的平臺。——摘自《X5 WebAR 平臺接入指南》
Android版本微信很早就支持Web AR了,但不對外開放,要申請開通權(quán)限。手機QQ、手機QQ瀏覽器、UC瀏覽器、百度瀏覽器、支付寶掃一掃、Safari、Chrome等也支持Web AR。
每家的Web AR都依賴自家的應(yīng)用程序,如果沒有應(yīng)用程序,小程序和網(wǎng)頁的Web AR都無法工作。
注:此次開放的微信小程序AR和X5 WebAR平臺不是一個事情。
2、微信AR的優(yōu)勢
因為微信AR比其他家的AR都開放,不需要商務(wù)合作,不限制免費調(diào)用次數(shù),就能用AR。
微信的用戶數(shù)量多,不需要用戶額外安裝一個AR應(yīng)用程序就能在微信中用AR,但需要用戶升級微信版本。
微信生態(tài)圈中的從業(yè)者又發(fā)現(xiàn)了一個商業(yè)趨勢——增強現(xiàn)實,增加了AR行業(yè)的從業(yè)者。
云平臺的云服務(wù)也有圖像識別、人臉識別等API,但沒有實時性,每次調(diào)用API都需要請求網(wǎng)絡(luò)。有個需求是在終端實現(xiàn)圖像識別,這塊領(lǐng)域叫邊緣計算,微信AR可能填補這塊領(lǐng)域。
三、從AR生態(tài)角度看
1、微信AR和Web AR
Web AR有3種形態(tài):
第一種是掃一掃圖案,顯示識別結(jié)果,例如3D動畫或小游戲,和掃描二維碼的功能一樣,但識別的穩(wěn)定性沒有二維碼好。對圖案的要求:圖案平整、光線不能太強也不能太弱、有豐富的圖案特征等。對操作的要求:掃描圖案的全部、盡量在圖案的正面掃描等。
第二種是掃一掃圖案,識別結(jié)果的內(nèi)容能“固定”在圖案上,內(nèi)容和圖案疊加在一起。從這個角度看,掃描二維碼是無法替代的。
第三種是掃一掃地面,識別結(jié)果的內(nèi)容能“固定”在地面上。與第二種相比,不需要圖案做參照物。
Web AR目前能實現(xiàn)第一種,第二種有實現(xiàn)但速度不快,第三種有非常少的實現(xiàn)但穩(wěn)定性差。
目前看,微信AR能實現(xiàn)第一種和第二種。
2、微信AR和原生程序AR
原生程序AR無論從渲染、穩(wěn)定性等來說,都比Web AR和微信AR強很多。原生程序的3D渲染非常精美,3D模型固定在圖案和地面上極其穩(wěn)定。而Web AR的3D模型不是沒有真實感,就是容易飄走。
連續(xù)使用的時間短,用戶可以等待的時間短,建議使用輕量型AR,比如微信AR和WebAR。
連續(xù)使用的時間長,用戶可以忍受需要安裝,建議使用原生程序AR。
3、一個AR程序的組成部分
一個AR程序需要4個組成部分:APP做載體,AR做運動跟蹤和環(huán)境理解,3D做顯示,AI做智能識別。
微信小程序把載體環(huán)節(jié)做了,在AR環(huán)節(jié)做了基礎(chǔ)的獲取攝像頭圖像工作,在3D和AI環(huán)節(jié)沒有新內(nèi)容。
文章開頭說到幾家歡喜幾家愁,歡喜的是3D內(nèi)容制造的廠商,愁的是AR技術(shù)制作和云服務(wù)的廠商。
四、后記
微信AI團隊在一兩年前就在研發(fā)AR引擎,在其公眾號里還能搜索到演示視頻,后來沒有了公開消息。接著出了X5瀏覽器內(nèi)核的Web AR引擎,現(xiàn)在又出了微信小程序AR。增強現(xiàn)實帶來的生產(chǎn)力提高,吸引了越來越多的人
微信小程序AR除了新增實時獲取攝像頭圖像API,還增加了Canvas的WebGL 1.0支持。canvas組件增加了type屬性,該屬性設(shè)置為webgl。
先獲取Canvas對象,接著從Canvas對象獲取webgl對象。Page({
onReady() {
const query = wx.createSelectorQuery()
query.select('#myCanvas').node().exec((res) => {
const canvas = res[0].node
const gl = canvas.getContext('webgl')
console.log(gl)
})
}
})
還新增了requestAnimationFrame方法,但只能在Canvas組件的WebGL模式中使用。function draw(){
// todo
canvas.requestAnimationFrame(draw);
}
canvas.requestAnimationFrame(draw);
原文鏈接:https://www.zhihu.com/question/333546611
投稿/爆料:tougao@youxituoluo.com
稿件/商務(wù)合作: 六六(微信 13138755620)
加入行業(yè)交流群:六六(微信 13138755620)
元宇宙數(shù)字產(chǎn)業(yè)服務(wù)平臺
下載「陀螺科技」APP,獲取前沿深度元宇宙訊息