21.WebAR那些事:ARDemo之《天馬行空》

淘朗英發表於2016-12-09
Web

緊接上文

使用WebAR技術，開發者只需40行程式碼，即可搭建一個ARDemo。同時我們也丟擲了一個問題，如果把地球模型，換成一個可以動的小貓小狗，是不是就更加接近虛擬現實了？

本次Demo所需二維碼

本次demo已經整合到APK中，使用者可以點選《天馬星空》來體驗。
1480694061.png

天馬星空

環境準備

  1. Demo使用r82版本，向下相容
  2. Three.js 到http://www.threejs.org下載最新原始碼，這裡使用three.min.js作為渲染引擎。
  3. WebVR.js WebVR的工具庫，用於切換VR狀態（three.js的原始碼包中，自己拷貝）
  4. VREffect.js WebVR的展示庫，用於分屏展示（three.js的原始碼包中，自己拷貝）
  5. VRControls.js WebVR的控制庫，用於監控陀螺儀、Camera、重力等（three.js的原始碼包中，自己拷貝）

3D模型

之前我們總是使用地球的3D模型，估計各位看官也看膩了，這次終於更新了！

  1. 支援動畫的3D模型
    通過閱讀THREE.JS的示例，找到了喜歡的模型，一批奔跑的馬兒。

在webgl分類下的shadowmap入口，可以看到官方的demo。

  1. 3D模型的格式
    本次演示的3D模型，是JSON格式，可以有多種工具生成，比如3DMax、瑪雅等。

這種格式雖然方便閱讀，缺點也比較明顯，將整個檔案解析成json後，再轉換成記憶體資料，最後上傳到GPU，由於JS語言在運算處理方面的不足，載入過程會稍慢一些。

  1. WebVRSDK支援的3D格式
    開啟THREE.JS的官方example，可以看到loder分類的3D模型格式，初步可以理解為，只要three.js支援的格式，WebVRSDK也是可以支援的。如果有不支援，請反饋給我，我會及時更新WebVRSDK

相容性準備

獲取攝像頭API，目前只支援Navigator.getUserMedia

index.js核心程式碼

核心程式碼量約50行，核心程式碼和《上一篇》基本一致，只是將3D地球的模型，替換成了一批馬。

程式碼參考Three.js，如下

var w = window.innerWidth;
var h = window.innerHeight;
var renderer = new THREE.WebGLRenderer();        // 建立渲染器
renderer.setSize(w, h);                            // 設定渲染器為全屏
document.body.appendChild(renderer.domElement);    // 將渲染器新增到body上

var horse, delta;
var clock    = new THREE.Clock();                // 建立時鐘
var scene    = new THREE.Scene();                // 建立場景
var mixer    = new THREE.AnimationMixer(scene);    // 建立混合器
var camera    = new THREE.PerspectiveCamera(45, w / h, 100, 3000);

var control    = new THREE.VRControls(camera);        // 控制器，用來控制攝像機
var effect    = new THREE.VREffect(renderer);        // 控制器，用來控制VR渲染
var loader    = new THREE.JSONLoader();            // 載入器，用於載入3D模型
loader.load("horse.json", function(geometry) {
    var material = new THREE.MeshLambertMaterial({ color: 0xFFAA55, morphTargets: true, vertexColors: THREE.FaceColors });
    horse = new THREE.Mesh(geometry, material);
    horse.speed         = 200;
    horse.position.x = -500;
    
    scene.add(horse);
    scene.add(new THREE.AmbientLight(0x444444));// 建立環境光
    scene.add(new THREE.DirectionalLight(0xFFFFFF, 1, 0));
    mixer.clipAction(geometry.animations[0], horse).setDuration(1).startAt(-Math.random()).play();
});
window.navigator.getUserMedia({ audio : true, video: { width: w, height: h }}, function(stream) {
    var video = document.createElement(`video`);
    video.src = stream;
    video.play();

    var image = new THREE.VideoTexture(video);
    image.generateMipmaps = false;
    image.format     = THREE.RGBAFormat;
    image.maxFilter  = THREE.NearestFilter;
    image.minFilter  = THREE.NearestFilter;
    scene.background = image;                    // 背景視訊紋理
}, null);

animate();
function animate() {
    effect.requestAnimationFrame(animate);
    if (horse) {
        delta = clock.getDelta();
        mixer.update(delta);
        horse.position.z += horse.speed * delta;
        if (horse.position.z > 1000) {
            horse.position.z = -1000 - Math.random() * 500;
        }
    }
    control.update();
    effect.render(scene, camera);
}

效果展示

很想把螢幕錄製下來，再製成GIF格式的圖片，方便演示，大家有沒有推薦的工具軟體，最好能直接截圖的那種。
演示的效果，大概是這樣子的，一匹馬從遠處跑來，然後再跑到遠處，直至消失。用兩張圖片大概來演示吧。。

2dda345bc789c962393263d259f7f817.png

cc475b0b0d229fdaaf99967db21200bf.png

暢想

WebAR入門簡單

寫這篇文章的時候，我也想不到，只需要50行程式碼，就可以做一個帶有動畫的ARDemo，不得不說Three.js太強大了。
那問題來了，既然程式碼都是用標準的JS寫的，而且框架用的是開源的Three.js，那WebVRSDK做了什麼？
WebVRSDK是使用C/C++編寫的<跨平臺><極簡><高效能>的<瀏覽器>核心，大小在400K以下，以WebGL為核心，支援WebGL、Canvas、Video、Audio、XMLHttpRequest、VRDisplay、Camera、ImageDecode等等，但不支援Dom，並且為Three.js/Pixi.js/Tiny.js等做了深度相容。
所以，前端開發者，只需要在PC瀏覽器開發、除錯通過，就可以快速的移植到WebVRSDK平臺。

千錘百煉才是精品

我對JS的理解還屬於入門級別，目前寫的Demo，基本都是臨時學的，不要太當真。
想做好WebAR/VR，還需要前端大牛的支援。
如果有好的產品，歡迎移植&對接WebVRSDK。

下一回

新增個按鈕，讓AR可以和使用者互動，但
加個什麼按鈕呢？
點選按鈕之後，顯示什麼效果呢？
敬請期待


相關文章