2. 程式人生 > >增強現實之開源AR庫——AR.js

增強現實之開源AR庫——AR.js

阿新 • • 發佈：2019-02-03

AR.js是一個web端的AR庫，它完全開源免費，獲得了很高的熱度。我們要實現的效果如下：

首先去github下載AR.js庫：

建議順帶看下作者給出的介紹。介紹裡給出一個示例，我們在此示例的原始碼進行分析並嘗試修改示例中的三維模型。

解壓縮後目錄如下：

示例存three.js目錄的example目錄下。只有在伺服器環境內才可以訪問。我們可以將AR.js拷貝至Apache伺服器中訪問，最簡單的方法是：將AR.js用整合開發工具（webstorm,hbuilder等）開啟，然後在開發環境中開啟three.js/example，找到dev.html將其開啟，點選執行即可。

我們會看到以下效果：

（由於是晚上拍的，可能效果不是很好）

我們將dev.html進行修改，改變顯示的三維模型。

首先我們在example資料夾中建立一個class資料夾,存放我們自己寫的例項。在class資料夾中新建一個Charactor.html檔案。

路徑如圖：

在Charactor.html檔案中編輯程式碼：

1.引入three.js庫 及幀數檢視元件

<script src='vendor/three.js/build/three.js'></script>
<script src='vendor/three.js/examples/js/libs/stats.min.js'></script>

three.js是前端實現三維顯示的庫，我們用它來建立的三維模型並新增頁面（場景）中顯示。

stats是幀數檢視元件，它用來檢測前端動畫的執行狀態。AR.js能夠達到60幀以上，它足夠優秀。

2.引入jsartoolkit

<script src='../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../vendor/jsartoolkit5/js/artoolkit.api.js'></script>

three.js的作用是實現三維顯示，jsartoolkit則是實現攝像頭的呼叫以及攝像頭所獲取影像的分析（AR的核心功能正是在此）。（此處注意一下，谷歌瀏覽器已經不允許http開頭網址訪問攝像頭（本地除錯除外），但火狐支援仍然支援，如果你是網站開發者，而又沒有https的網址，可以推薦你的使用者使用火狐瀏覽器。）

3.引入threex.artoolkit

<script src='../src/threex/threex-artoolkitsource.js'></script>
<script src='../src/threex/threex-artoolkitcontext.js'></script>
<script src='../src/threex/threex-artoolkitprofile.js'></script>
<script src='../src/threex/threex-arbasecontrols.js'></script>
<script src='../src/threex/threex-armarkercontrols.js'></script>
<script src='../src/threex/threex-arsmoothedcontrols.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>

three.js與jsartoolkit本來毫無關係，而threex.artoolkit將他們聯絡到一起，事實上，這才是AR.js庫的精髓所在。

4.three.js要素初始化

//////////////////////////////////////////////////////////////////////////////////
//    Init
//////////////////////////////////////////////////////////////////////////////////

// init renderer
var renderer   = new THREE.WebGLRenderer({
   // antialias   : true,
   alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
// renderer.setPixelRatio( 2 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );

// array of functions for the rendering loop
var onRenderFcts= [];

// init scene and camera
var scene  = new THREE.Scene();

var ambient = new THREE.AmbientLight( 0x666666 );
scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );

這是基本的three.js的知識，如果你接觸過three.js，那麼你會發現這與three.js建立要素別無二致。

5.開啟攝像頭

//////////////////////////////////////////////////////////////////////////////////
//    Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////

// Create a camera
var camera = new THREE.Camera();
scene.add(camera);

////////////////////////////////////////////////////////////////////////////////
//          handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////

var arToolkitSource = new THREEx.ArToolkitSource({
   // to read from the webcam 
   sourceType : 'webcam',

   // // to read from an image
   // sourceType : 'image',
   // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',    
   // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',       

   // to read from a video
   // sourceType : 'video',
   // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',       
})

arToolkitSource.init(function onReady(){
   onResize()
})

// handle resize
window.addEventListener('resize', function(){
   onResize()
})
function onResize(){
   arToolkitSource.onResizeElement()  
   arToolkitSource.copyElementSizeTo(renderer.domElement) 
   if( arToolkitContext.arController !== null ){
      arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas)    
   }  
}

分析原始碼發現，此處還有其他識別模式，可以選擇從照片或是從視訊中識別要素。

6.初始化arToolKitContext

////////////////////////////////////////////////////////////////////////////////
//          initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////   

// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
   cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
   // debug: true,
   // detectionMode: 'mono_and_matrix',
   detectionMode: 'mono',
   // detectionMode: 'color_and_matrix',
   // matrixCodeType: '3x3',

   canvasWidth: 80*3,
   canvasHeight: 60*3,

   maxDetectionRate: 30,
})
// initialize it
arToolkitContext.init(function onCompleted(){
   // copy projection matrix to camera
   camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
})

// update artoolkit on every frame
onRenderFcts.push(function(){
   if( arToolkitSource.ready === false )  return

   arToolkitContext.update( arToolkitSource.domElement )
})

這一步的作用是通過Canvas來聯絡攝像頭與three.js，即在攝像介面上新增畫板，以實現在攝像介面中作圖的目的。

6.建立識別標記（ArMarker）

////////////////////////////////////////////////////////////////////////////////
//          Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////

var markerRoot = new THREE.Group
scene.add(markerRoot)
var markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
   // type: 'barcode',
   // barcodeValue: 5,
   
   type : 'pattern',
   patternUrl : THREEx.ArToolkitContext.baseURL + 'examples/marker-training/examples/pattern-files/pattern-marker.patt',
})


// build a smoothedControls
var smoothedRoot = new THREE.Group()
scene.add(smoothedRoot)
var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
   lerpPosition: 0.4,
   lerpQuaternion: 0.3,
   lerpScale: 1,
   // minVisibleDelay: 1,
   // minUnvisibleDelay: 1,
})
onRenderFcts.push(function(delta){
   smoothedControls.update(markerRoot)
}) 

// smoothedControls.addEventListener('becameVisible', function(){
//     console.log('becameVisible event notified')
// })
// smoothedControls.addEventListener('becameUnVisible', function(){
//     console.log('becameUnVisible event notified')
// })

此處我們用到的帶黑框的圖片標記是ArToolKit的第一代標記，之後發展到可以直接識別圖片，如果有興趣，可以到github上專門下載ArtoolKit。

7.將物體新增到場景

var arWorldRoot=smoothedRoot

var mesh=new THREE.AxisHelper();
//markerRoot.add(mesh)
arWorldRoot.add(mesh);

var loadingManager = new THREE.LoadingManager( function() {
    arWorldRoot.add( elf );
} );

var loader = new THREE.ColladaLoader( loadingManager );
loader.load( '../examples/models/collada/elf/elf.dae', function ( collada ) {
    elf = collada.scene;
} );

我們在此修改了新增到場景當中的模型，並新增到場中當中。

8.渲染整個three.js畫面

//////////////////////////////////////////////////////////////////////////////////
//    render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
var stats = new Stats();
document.body.appendChild( stats.dom );
// render the scene
onRenderFcts.push(function(){
   renderer.render( scene, camera );
   stats.update();
})

// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
   // keep looping
   requestAnimationFrame( animate );
   // measure time
   lastTimeMsec   = lastTimeMsec || nowMsec-1000/60
   var deltaMsec  = Math.min(200, nowMsec - lastTimeMsec)
   lastTimeMsec   = nowMsec
   // call each update function
   onRenderFcts.forEach(function(onRenderFct){
      onRenderFct(deltaMsec/1000, nowMsec/1000)
   })
})

場景的動態效果都通過onRenderFct函式陣列來實現。若要實現動畫效果，我們要把實現動態的方法新增到陣列中。

完整程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Charactor</title>
    <!-- three.js library -->
    <script src='../examples/vendor/three.js/build/three.js'></script>
    <script src='../examples/vendor/three.js/examples/js/libs/stats.min.js'></script>
    <!-- jsartookit -->
    <script src='../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
    <script src='../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
    <!-- include threex.artoolkit -->
    <script src='../src/threex/threex-artoolkitsource.js'></script>
    <script src='../src/threex/threex-artoolkitcontext.js'></script>
    <script src='../src/threex/threex-artoolkitprofile.js'></script>
    <script src='../src/threex/threex-arbasecontrols.js'></script>
    <script src='../src/threex/threex-armarkercontrols.js'></script>
    <script src='../src/threex/threex-arsmoothedcontrols.js'></script>
    <script>THREEx.ArToolkitContext.baseURL = '../'</script>
</head>
<body>
<script src="../examples/js/loaders/ColladaLoader.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="../examples/js/Detector.js"></script>
<script src="../examples/js/libs/stats.min.js"></script>
<script>
    //init renderer（初始化渲染器）
    var renderer=new THREE.WebGLRenderer({
        alpha:true
    });
    renderer.setClearColor(new THREE.Color('lightgrey'),0);
    //renderer setPiexRatio(2);
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.domElement.style.position='absolute';
    renderer.domElement.style.top='0px';
    renderer.domElement.style.left='0px';
    document.body.appendChild(renderer.domElement);

    //array of  functions for the rendering loop（渲染處理函式組初始化）
    var onRenderFcts=[];

    //init scene and camera
    var scene=new THREE.Scene();//初始化場景和環境

    var ambient=new THREE.AmbientLight(0x666666);
    scene.add(ambient);

    var directctionalLight=new THREE.DirectionalLight(0x887766);
    directctionalLight.position.set(-1,1,1).normalize();
    scene.add(directctionalLight);

    //Initialize a basic camera

    //Create a camera（初始化相機新增到場景）
    var camera=new THREE.Camera();
    scene.add(camera);

    //handle arToolkitSource（呼叫開啟相機事件，由THREEx提供）
    var arToolkitSource=new THREEx.ArToolkitSource({
        //to read from the webcam
        sourceType:'webcam'

        // // to read from an image
        // sourceType : 'image',
        // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
        // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/armchair.jpg',

        // to read from a video
        // sourceType : 'video',
        // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
    })

    arToolkitSource.init(function onReady() {
        onResize();
    })

    //handle resize(處理重新調整大小後正常顯示)
    window.addEventListener('resize',function () {
        onResize();
    })
    function onResize() {
        arToolkitSource.onResizeElement()
        arToolkitSource.copyElementSizeTo(renderer.domElement)
        if(arToolkitContext.arController!==null){
            arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas);
        }
    }

    //初始化 ArcToolkit環境, 相機內部場景
    //initialize arToolkitContext

    //create acToolkitContext
    var arToolkitContext=new THREEx.ArToolkitContext({
        //相機引數設定
        cameraParametersUrl:THREEx.ArToolkitContext.baseURL+'../data/data/camera_para.dat',
        //debug:true,
        //detectionMode:'mono_and_matrix',
        detectionMode:'mono',
//        detectionMode:'color_and_matrix',
//        matrixCodeType:'3x3',
        canvasWidth:80*3,
        canvasHeight:60*3,
        maxDetectionRate:30, //最大旋轉角度還是什麼滴
    })
    //initialize it
    arToolkitContext.init(function onCompleted() {
        //copy projection matrix to camera
        camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
    });
    //update artoolkit on every frame
    onRenderFcts.push(function () {
        if(arToolkitSource.ready==false) return;

        arToolkitContext.update(arToolkitSource.domElement)
    })

    //Create a ArMakerControls
    //建立一個Ar標記
    var markerRoot=new THREE.Group(); //用threejs的點集合初始化。
    scene.add(markerRoot);

    var markerControls=new THREEx.ArMarkerControls(arToolkitContext,markerRoot,{
        //type:'barcode',
        //barcodeValue:5,
        type:'pattern',
        patternUrl:THREEx.ArToolkitContext.baseURL+'./examples/marker-training/examples/pattern-files/pattern-marker.patt',
    })
    //build a smoothedControls
    var smoothedRoot=new  THREE.Group();
    scene.add(smoothedRoot);
    var smoothedControls=new THREEx.ArSmoothedControls(smoothedRoot,{
        lerpPosition:0.4,
        lerpQuaternion:0.3,
        lerpScale:1,
        //minVisibleDaly:1,
        //minUnvisibleDely:1,
    })
    onRenderFcts.push(function (delta) {
        smoothedControls.update(markerRoot)
    })
    smoothedControls.addEventListener('becameVisible',function () {
        console.log('becameVisible event notified')
    })

    //add Object in the scene
    //新增物體
    var arWorldRoot=smoothedRoot

    var mesh=new THREE.AxisHelper();
    //markerRoot.add(mesh)
    arWorldRoot.add(mesh);

    //add a torus knot建立物體
    // collada

    var loader = new THREE.ColladaLoader();
    loader.load( '../examples/models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
        var animations = collada.animations;

        //調整物件狀態
        var avatar = collada.scene;
        avatar.rotation.x=Math.PI;
        avatar.rotation.z=Math.PI;
        avatar.scale.set(0.5,0.5,0.5);
        mixer = new THREE.AnimationMixer( avatar );

        arWorldRoot.add( avatar );
        var action = mixer.clipAction( animations[ 0 ] ).play();
        onRenderFcts.push(function () {
            avatar.rotation.z+=0.02*Math.PI;
        })
    } );

    //renderer the Whole thing on the page
    //渲染場景到頁面中
    //渲染率檢視器
    var stats=new Stats();
    document.body.appendChild(stats.dom);

    //renderer the scene
    onRenderFcts.push(function () {
        renderer.render(scene,camera);
        stats.update();
    })

    //行程渲染事件環路
    //run the rendering loop
    var lastTimeMsec=null;
    requestAnimationFrame(function animate(nowMsec){
        //keep looping
        requestAnimationFrame(animate);
        //measure time
        lastTimeMsec=lastTimeMsec||nowMsec-1000/60;
        var deltaMsec=Math.min(200,nowMsec-lastTimeMsec)
        //call all each update function
        onRenderFcts.forEach(function (onRenderFct) {
            onRenderFct(deltaMsec/1000,nowMsec/1000)
        })
    })
</script>
</body>
</html>

原始碼檔案：

密碼：t6vp

Marker圖片：

相關推薦

增強現實之開源AR庫——AR.js

AR.js是一個web端的AR庫，它完全開源免費，獲得了很高的熱度。我們要實現的效果如下： 首先去github下載AR.js庫： 建議順帶看下作者給出的介紹。介紹裡給出一個示例，我們在此示例的原始碼進行分析並嘗試修改示例中的三維模型。 解壓縮後目錄如下：

Unity+AR增強現實SDK介紹之MAXST AR SDK

讓你的想象力成為現實MAXST AR SDK一切皆有可能以合理的價格提供強大的效能和輕量級處理能力。 MAXST AR SDK將成為您AR專案的最佳選擇。現在介紹主要功能。Image Tracker 影象識別追蹤MAXST的平面圖像識別跟蹤引擎使您的應用程式可以在惡劣條件下（

AR增強現實

目錄 1.在untiy安裝路徑下安裝Vuforia Augmented Reality Support(注意此版本要和unity版本相對應，下載連結https://unity3d.com/cn/get-unity/download/archive?_ga=2.257321475.94688859

AR增強現實與AI人工智慧融合的未來

據相關訊息，麻省理工學院的幾個在校生，基於ARKit開發了寵物狗遊戲，關鍵的是，他們還利用了深度學習演算法，這隻寵物狗能夠像真的狗一樣被你馴養出不同的脾性，也就是說可以想真實的狗一樣，能夠聽懂你的說的話，看懂你發的指令，有感知能力，完全讓你感覺不出這是由AR+AI孵化出的虛擬的寵物狗。

虛擬現實與增強現實VR&AR工具書籍彙總下載(持續更新)

簡介 本文是https://github.com/china-testing/python-api-tesing/blob/master/books.md的節選。 歡迎轉載，轉載請附帶此簡介，謝謝！ GFK：虛擬現實零售市場簡述 - 2017.pdf VR虛擬現實與AR增強現實的技術

AR增強現實開發

開發一個AR Hello World 需要經歷以下步驟： 1：登陸高通增強現實網站,註冊賬號且獲取授權資訊。 2：製作目標圖   A) 二維識別圖製作   B) 三維識別物體制作 3：SDK下載 4: Unity整合高通SDK,進行開發

[轉]Web 前端中的增強現實（AR）開發技術

本文轉自https://geekplux.com/2018/01/18/augmented-reality-development-tech-in-web-frontend.html-----------------------------------------------

VS2015+OpenCV-2.4.10配置AR(增強現實)開發環境

1. 編譯OpenCV-2.4.10 1.1 安裝Dependency 1.2 CMAKE編譯OpenCV 第一步，用cmkae的gui工具configure要編譯的OpenCV工程： (1)開始->Visula Studio 2015

跨平臺AR增強現實開發（一）（AR開發環境的搭建）

新增LicenseKey：我們點選AddLicenseKey，Application Name為開發證書的名字，隨便填寫入一個就可以；Device是我們開發部署的硬體裝置，現在高通支援有兩種，Mobile以及Digital Eyewear，如果你是開發移動裝置，選擇Mobile如果你是開發AR眼睛，選擇D

AR（增強現實）開發者資源彙總

Github地址－－請大家轉到Github上查閱，歡迎大家Star和Fork。 AR 開發資料彙總(總結了AR開發的平臺彙總，AR視訊經典教程，AR主流資訊網站，Vuforia，EasyAR一些例項教程以及AR精選應用) EasyAR 開發群：6

【Android】增強現實應用——AR畫報

Ø  【作品名稱】：《AR畫報》 Ø  【實驗目的】 在Android系統上，開發基於增強現實技術的應用。可以通過手機攝像頭掃描的方式，獲取與紙質媒體（如雜誌）內容相關的視訊資訊，並能夠讓使用者方

AR——增強現實技術

  前言：在VR技術引發大眾熱議的當下，有一種產生已久的技術已然悄悄進入我們的生活。很多人或許聽說過這個名字，也親身體驗過這項技術的神奇，卻對其原理知之甚少！   下面先讓我們看幾組圖片：       看到這裡想必大家已

跨平臺AR增強現實開發（二）（Vuforia目錄結構）

我使用的開發環境是高通vuforia 5.5.9 + unity 5.3.4f + win7 64，高通的AR可以免費使用，但非開源，免費的為最普通的版本，沒雲識別功能；且在App的左下角會有Vuf

unity+高通vuforia開發增強現實（AR）教程（一）

增強現實（Augmented Reality，簡稱AR），是在虛擬現實的基礎上發展起來的新技術，也被稱之為混合現實。是通過計算機系統提供的資訊增加使用者對現實世界感知的技術，將虛擬的資訊應用到真實世界，並將計算機生成的虛擬物體、場景或系統提示資訊疊加到真實場景中，從而實現

Android增強現實（一）-AR的三種方式(展示篇)

這段時間研究了一段時間Android端增強現實的方式，總體分為兩個大類：全景圖和3D模型。 於是基於這兩種形式，以三種方式來展示增強現實： 1.全景360°GIF，支援拖動，縮放。 2.展示3D模型 3.Google官方展示全景圖探究 這篇部落格就

跨平臺AR增強現實開發（四）（高通識別圖5星處理方式）

高通的識別圖上傳到後臺以後我們可以看有星級評定，星值最大為5星，星值越大有以下好處： 1、識別圖越容易識別 2、識別出來的物體不會出現抖動 3、識別速度更快 而有時候我們上傳的識別圖只有2星，或

百度AR增強現實整合

百度AR增強現實的能力就不評價了。主要有的功能SLAM、空間定位、識別、追蹤。SLAM：簡單來解釋就是，找平面，可以識別平面和空間。功能：可以確定平面，在上面擺放一些東西空間定位：把一個虛擬的模型放在一個空間座標位置當中，他會有一個位置資訊，當你再次回到這個位置時，目標模型還

android studio | openGL es 3.0增強現實（AR）開發 (1) 建立一個openGL es 3.0開發環境

1.什麼是NDK，什麼是JNI？ NDK：Native Development Kit（原生開發工具包）, NDK允許使用者使用類似C / C++之類的原生程式碼語言執行部分程式。它包括下面的部分（1）從C / C++生成原生程式碼庫所需要的工具和buil

增強現實(AR)筆記3：使用Vuforia Object Scaner來掃描物體

1 前言 上一篇筆記中提到Object Recognition例程中沒有任何預設好的物件，需要開發者自己利用Object Scanner這個工具來掃描建立。本文就詳細記錄下掃描物體的操作，並且在文末給了一個大寶SOD蜜的例項。 2 Object Sc

unity+高通vuforia開發增強現實（AR）教程（三）

前段時間忙公司的事，好久沒到CSDN來了，看到教程有這麼多人蔘考，決心再接再厲，這篇教程就講講怎麼做video形式的增強現實。（自己做了個案例，少女時代著名的甩大腿舞戳我O(∩_∩)O） 高通的SDK好像沒有video的預製件，所以我一般都下載最新的samples，裡面