你要「老婆」不要？谷歌程序員20行代碼把二次元「老婆」帶到現(xiàn)實(shí)世界

編者按：本文來(lái)自微信公眾號(hào)“機(jī)器之心”（ID:almosthuman2014），編輯：張倩，36氪經(jīng)授權(quán)發(fā)布。

?

還記得前不久的「?東升發(fā)型生成器」嗎？在那個(gè)視頻中，B 站 up 主 Mars 隆重推出了自制的禿頭生成器。不管你現(xiàn)在有多年輕，頭發(fā)有多么濃密，那個(gè)生成器都能讓你一眼望穿二十年后的自己。

這一充滿「惡意」的項(xiàng)目引發(fā)了讀者的集體不適，大家紛紛請(qǐng)求 up 主「整點(diǎn)兒陽(yáng)間的東西」（聽(tīng)說(shuō)粉絲毫不見(jiàn)漲，這鍋機(jī)器之心不背）。

本著對(duì)讀者的尊重和愛(ài)護(hù)，up 主這次換了個(gè)方向，開(kāi)始研究起了「一鍵『老婆』生成器」。

先來(lái)看一下效果：

當(dāng)然，除了「老婆」，其他手辦也是可以的：

效果看上去不錯(cuò)，還省了買手辦的錢，這是怎么做到的呢？

Mars 在視頻中提到，因?yàn)樯啥卧咐掀拧惯@個(gè)主題有很多人都做過(guò)了，而且效果不錯(cuò)，所以他就想到一個(gè)主題類似但表達(dá)方式不同的點(diǎn)子——用 AR 來(lái)做。

在 Waifu Labs 網(wǎng)站上生成的 2D「老婆」。

他介紹說(shuō)，現(xiàn)在市面上大部分的 AR（比如寶可夢(mèng) Go）都是通過(guò)指定 App 中的相機(jī)才可以看到增強(qiáng)現(xiàn)實(shí)的內(nèi)容，但他想做的卻是一個(gè)網(wǎng)頁(yè)版 AR，也就是說(shuō)，你只需要打開(kāi)一個(gè)網(wǎng)頁(yè)，從網(wǎng)頁(yè)中再打開(kāi)相機(jī)就能看到增強(qiáng)現(xiàn)實(shí)的內(nèi)容。

那么具體要怎么實(shí)現(xiàn)呢？

他的思路可以概括為：先做一個(gè)網(wǎng)站，你可以在上面上傳一個(gè) 3D 模型，網(wǎng)站就會(huì)自動(dòng)生成一個(gè)二維碼。然后你用手機(jī)（相機(jī)）去掃這個(gè)二維碼，你剛剛上傳的模型就會(huì)出現(xiàn)在現(xiàn)實(shí)世界里了。

思路有了，接下來(lái)就是尋找解決方案了。

備選的解決方案有這么幾個(gè)：谷歌的 WebXR、AR.js 和 Argon.js。其中，WebXR 可能是所有解決方案中效果最好的，也是文檔最為完善的，但問(wèn)題在于它只支持極少部分安卓設(shè)備；后兩個(gè)方案各方面表現(xiàn)都差不多，區(qū)別在于前者是完全開(kāi)源的，因此 Mars 毫不猶豫地選擇了前者。

選定了解決方案之后，先來(lái)嘗試一個(gè)官方的例子。在寫了一個(gè)靜態(tài)文件服務(wù)器、創(chuàng)建 index.html、將例子中的代碼復(fù)制進(jìn)去運(yùn)行服務(wù)器等一系列操作之后，預(yù)想中的增強(qiáng)現(xiàn)實(shí)畫面并沒(méi)有出現(xiàn)，只有一個(gè)報(bào)錯(cuò)頁(yè)面彈了出來(lái)：

報(bào)錯(cuò)的原因在于，從 ios11 開(kāi)始，只有通過(guò) https 訪問(wèn)的網(wǎng)站才有打開(kāi)相機(jī)的權(quán)限，Mars 通過(guò)安裝一個(gè)名為 ngrok 的程序解決了這個(gè)問(wèn)題。

問(wèn)題解決了，再來(lái)試一下，果然，這次真的出現(xiàn)了增強(qiáng)現(xiàn)實(shí)的畫面。

?

測(cè)試成功，接下來(lái)就是使用自己的模型了。

AR.js 提供了一個(gè)接口，可以將自己的模型對(duì)應(yīng)到二維碼或者圖案上。但這里有一個(gè)問(wèn)題：精美的 3D 模型要從哪里找呢？在視頻中，Mars 推薦的是一個(gè)叫 Sketchfab 的網(wǎng)站。Sketchfab 和普通的圖片網(wǎng)站類似，但不同之處在于，上面的模型都是 3D 的，而且大多渲染精良，既有付費(fèi)模型，也有免費(fèi)模型。

Sketchfab 網(wǎng)站首頁(yè)。

下載到模型之后，將鏈接復(fù)制到之前創(chuàng)建的 index.html 文件里，就大功告成了！

為了方便大家自己動(dòng)手，此次 Mars 還開(kāi)源了整個(gè)項(xiàng)目的代碼并在第二個(gè)視頻（代碼詳解）中對(duì)代碼和各個(gè)步驟進(jìn)行了詳細(xì)講解，感興趣的同學(xué)可以自己動(dòng)手試一下。

代碼地址：https://github.com/MarsWang42/AR-Laopo

最后再介紹一下寶藏 up 主 Mars。他本科畢業(yè)于同濟(jì)大學(xué)土木工程系，2015 年進(jìn)入 UC Irvine 開(kāi)始學(xué)習(xí)計(jì)算機(jī)知識(shí)，后來(lái)成為一名程序員，并進(jìn)入谷歌工作。在以往的視頻中，他也分享過(guò)自己轉(zhuǎn)專業(yè)和求職的諸多經(jīng)驗(yàn)。

在視頻的最后，Mars 表示，他將盡快將這個(gè)項(xiàng)目做成網(wǎng)頁(yè)版跟大家分享。