国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

HTML5開發Kinect體感游戲的實例應用

來源:懂視網 責編:小采 時間:2020-11-27 22:29:44
文檔

HTML5開發Kinect體感游戲的實例應用

HTML5開發Kinect體感游戲的實例應用:HTML5開發Kinect體感游戲的實例應用 一、簡介 我們要做的是怎樣一款游戲? 在前不久成都TGC2016展會上,我們開發了一款《火影忍者手游》的體感游戲,主要模擬手游章節《九尾襲來 》,用戶化身四代,與九尾進行對決,吸引了大量玩家參與。 表面上看,這款游
推薦度:
導讀HTML5開發Kinect體感游戲的實例應用:HTML5開發Kinect體感游戲的實例應用 一、簡介 我們要做的是怎樣一款游戲? 在前不久成都TGC2016展會上,我們開發了一款《火影忍者手游》的體感游戲,主要模擬手游章節《九尾襲來 》,用戶化身四代,與九尾進行對決,吸引了大量玩家參與。 表面上看,這款游

HTML5開發Kinect體感游戲的實例應用

一、簡介

我們要做的是怎樣一款游戲?

  在前不久成都TGC2016展會上,我們開發了一款《火影忍者手游》的體感游戲,主要模擬手游章節《九尾襲來 》,用戶化身四代,與九尾進行對決,吸引了大量玩家參與。 表面上看,這款游戲與其它體感體驗無異,實際上,它一直運行于瀏覽器Chrome下,也就是說,我們只需要掌握前端相應技術,就可以開發基于Kinect的網頁體感游戲。

二、實現原理

實現思路是什么?

  使用H5開發基于Kinect的體感游戲,其實工作原理很簡單,由Kinect采集到玩家及環境數據,比如人體骨骼,使用某種方式,使瀏覽器可以訪問這些數據。

1、采集數據

  Kinect有三個鏡頭,中間鏡頭類似普通攝像頭,獲取彩色圖像。左右兩邊鏡頭則是通過紅外線獲取深度數據。我們使用微軟提供的SDK去讀取以下類型數據:

  • 色彩數據:彩色圖像;
  • 深度數據:顏色嘗試信息;
  • 人體骨骼數據:基于以上數據經計算,獲取到人體骨骼數據。
  • 2、使瀏覽器可訪問到Kinect數據

    我嘗試和了解過的框架,基本上是以socket讓瀏覽器進程與服務器進行通信 ,進行數據傳輸:

  • Kinect-HTML5 用C#搭建服務端,色彩數據、嘗試數據、骨骼數據均有提供;
  • ZigFu 支持H5、U3D、Flash進行開發,API較為完整,貌似收費;
  • DepthJS  以瀏覽器插件形式提供數據訪問;
  • Node-Kinect2 以Nodejs搭建服務器端,提供數據比較完整,實例較多。
  • 我最終選用Node-Kinect2,雖然沒有文檔,但是實例較多,使用前端工程師熟悉的Nodejs,另外作者反饋比較快。

  • Kinect: 捕獲玩家數據,比如深度圖像、彩色圖像等;
  • Node-Kinect2: 從Kinect獲取相應數據,并進行二次加工;
  • 瀏覽器: 監聽node應用指定接口,獲取玩家數據并完成游戲開發。
  •  三、準備工作

    先得買個Kinect啊

    1、系統要求:
    這是硬性要求,我曾在不符合要求的環境下浪費太多時間。

  • USB3.0
  • 支持DX11的顯卡
  • win8及以上系統
  • 支持Web Sockets的瀏覽器
  • 當然Kinect v2傳感器是少不了的
  • 2、環境搭建流程:

  • 連接上Kinect v2
  • 安裝 KinectSDK-v2.0
  • 安裝 Nodejs
  • 安裝 Node-Kinect2 
  • npm install kinect2

    四、實例演示

    說什么都不如給我一個例子!

    如下圖所示,我們演示如何獲取人體骨骼,并標識脊椎中段及手勢:

    1、服務器端

    創建web服務器,并將骨骼數據發送到瀏覽器端,代碼如下:

    var Kinect2 = require('../../lib/kinect2'),
     express = require('express'),
     app = express(),
     server = require('http').createServer(app),
     io = require('socket.io').listen(server);
     
    var kinect = new Kinect2();
    // 打開kinect
    if(kinect.open()) {
     // 監聽8000端口
     server.listen(8000);
     // 指定請求指向根目錄
     app.get('/', function(req, res) {
     res.sendFile(__dirname + '/public/index.html');
     });
     // 將骨骼數據發送給瀏覽器端
     kinect.on('bodyFrame', function(bodyFrame){
     io.sockets.emit('bodyFrame', bodyFrame);
     });
     // 開始讀取骨骼數據
     kinect.openBodyReader();
    }

    2、瀏覽器端

    瀏覽器端獲取骨骼數據,并用canvas描繪出來,關鍵代碼如下:

    var socket = io.connect('/');
    var ctx = canvas.getContext('2d');
    socket.on('bodyFrame', function(bodyFrame){
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     var index = 0;
     // 遍歷所有骨骼數據
     bodyFrame.bodies.forEach(function(body){
     if(body.tracked) {
     for(var jointType in body.joints) {
     var joint = body.joints[jointType];
     ctx.fillStyle = colors[index];
     // 如果骨骼節點為脊椎中點
     if(jointType == 1) {
     ctx.fillStyle = colors[2];
     }
     ctx.fillRect(joint.depthX * 512, joint.depthY * 424, 10, 10);
     }
     // 識別左右手手勢
     updateHandState(body.leftHandState, body.joints[7]);
     updateHandState(body.rightHandState, body.joints[11]);
     index++;
     }
     });
    });

    很簡單的幾行代碼,我們便完成了玩家骨骼捕獲,有一定 javascript基礎的同學應該很容易能看明白,但不明白的是我們能獲取哪些數據?如何獲取?骨骼節點名稱分別是什么?而node-kienct2并沒有文檔告訴我們這些。

     五、開發文檔

    Node-Kinect2并沒有提供文檔,我將我測試總結的文檔整理如下:

    1、服務器端能提供的數據類型;

    kinect.on('bodyFrame', function(bodyFrame){}); //還有哪些數據類型呢?

    bodyFrame 骨骼數據
    infraredFrame 紅外數據
    longExposureInfraredFrame 類似infraredFrame,貌似精度更高,優化后的數據
    rawDepthFrame 未經處理的景深數據
    depthFrame 景深數據
    colorFrame 彩色圖像
    multiSourceFrame 所有數據
    audio 音頻數據,未測試

     2、骨骼節點類型

    body.joints[11] // joints包括哪些呢?

    節點類型 JointType 節點名稱
    0 spineBase 脊椎基部
    1 spineMid  脊椎中部
    2 neck 頸部
    3 head 頭部
    4 shoulderLeft 左肩
    5 elbowLeft 左肘
    6 wristLeft 左腕
    7 handLeft 左手掌
    8 shoulderRight 右肩
    9 elbowRight 右肘
    10 wristRight 右腕
    11 handRight 右手掌
    12 hipLeft 左屁
    13 kneeLeft 左膝
    14 ankleLeft 左踝
    15 footLeft 左腳
    16 hipRight 右屁
    17 kneeRight 右膝
    18 ankleRight 右踝
    19 footRight 右腳
    20 spineShoulder 頸下脊椎
    21 handTipLeft 左手指(食中無小)
    22 thumbLeft 左拇指
    23 handTipRight 右手指
    24 thumbRight 右拇指

    3、手勢,據測識別并不是太準確,在精度要求不高的情況下使用

    0 unknown 不能識別
    1 notTracked 未能檢測到
    2 open 手掌
    3 closed 握拳
    4 lasso 剪刀手,并合并中食指

     4、骨骼數據

    body [object] {
     bodyIndex [number]:索引,允許6人
     joints [array]:骨骼節點,包含坐標信息,顏色信息
     leftHandState [number]:左手手勢
     rightHandState [number]:右手手勢
     tracked [boolean]:是否捕獲到
     trackingId
    } 
    

    5、kinect對象

    on 監聽數據
    open 打開Kinect
    close 關閉
    openBodyReader 讀取骨骼數據
    open**Reader 類似如上方法,讀取其它類型數據

     六、實戰總結

    火影體感游戲經驗總結

    接下來,我總結一下TGC2016《火影忍者手游》的體感游戲開發中碰到的一些問題。

    1、講解之前,我們首先需要了解下游戲流程。

    1.1、通過手勢觸發開始游戲

    1.2、玩家化身四代,左右跑動躲避九尾攻擊

    1.3、擺出手勢“奧義”,觸發四代大招

    1.4、用戶掃描二維碼獲取自己現場照片

    2、服務器端

    游戲需要玩家骨骼數據(移動、手勢),彩色圖像數據(某一手勢下觸發拍照),所以我們需要向客戶端發送這兩部分數據。值得注意的是,彩色圖像數據體積過大,需要進行壓縮。

    var emitColorFrame = false;
    io.sockets.on('connection', function (socket){
     socket.on('startColorFrame', function(data){
     emitColorFrame = true;
     });
    });
    kinect.on('multiSourceFrame', function(frame){
     
     // 發送玩家骨骼數據
     io.sockets.emit('bodyFrame', frame.body);
     
     // 玩家拍照
     if(emitColorFrame) {
     var compression = 1;
     var origWidth = 1920;
     var origHeight = 1080;
     var origLength = 4 * origWidth * origHeight;
     var compressedWidth = origWidth / compression;
     var compressedHeight = origHeight / compression;
     var resizedLength = 4 * compressedWidth * compressedHeight;
     var resizedBuffer = new Buffer(resizedLength);
     // ...
     // 照片數據過大,需要壓縮提高傳輸性能
     zlib.deflate(resizedBuffer, function(err, result){
     if(!err) {
     var buffer = result.toString('base64');
     io.sockets.emit('colorFrame', buffer);
     }
     }); 
     emitColorFrame = false;
     }
    });
    kinect.openMultiSourceReader({
     frameTypes: Kinect2.FrameType.body | Kinect2.FrameType.color
    });

    3、客戶端

    客戶端業務邏輯較復雜,我們提取關鍵步驟進行講解。

    3.1、用戶拍照時,由于處理的數據比較大,為防止頁面出現卡頓,我們需要使用web worker

    (function(){
     importScripts('pako.inflate.min.js');
     
     var imageData;
     function init() {
     addEventListener('message', function (event) {
     switch (event.data.message) {
     case "setImageData":
     imageData = event.data.imageData;
     break;
     case "processImageData":
     processImageData(event.data.imageBuffer);
     break;
     }
     });
     }
     function processImageData(compressedData) {
     var imageBuffer = pako.inflate(atob(compressedData));
     var pixelArray = imageData.data;
     var newPixelData = new Uint8Array(imageBuffer);
     var imageDataSize = imageData.data.length;
     for (var i = 0; i < imageDataSize; i++) {
     imageData.data[i] = newPixelData[i];
     }
     for(var x = 0; x < 1920; x++) {
     for(var y = 0; y < 1080; y++) {
     var idx = (x + y * 1920) * 4;
     var r = imageData.data[idx + 0];
     var g = imageData.data[idx + 1];
     var b = imageData.data[idx + 2];
     }
     }
     self.postMessage({ "message": "imageReady", "imageData": imageData });
     }
     init();
    })(); 

    3.2、接投影儀后,如果渲染面積比較大,會出現白屏,需要關閉瀏覽器硬件加速。

    3.3、現場光線較暗,其它玩家干擾,在追蹤玩家運動軌跡的過程中,可能會出現抖動的情況,我們需要去除干擾數據。(當突然出現很大位移時,需要將數據移除)

    var tracks = this.tracks;
    var len = tracks.length;
     
    // 數據過濾
    if(tracks[len-1] !== window.undefined) {
     if(Math.abs(n - tracks[len-1]) > 0.2) {
     return;
     }
    }
    this.tracks.push(n);

    3.4、當玩家站立,只是左右少量晃動時,我們認為玩家是站立狀態。

    // 保留5個數據
    if(this.tracks.length > 5) {
     this.tracks.shift();
    } else {
     return;
    }
     
    // 位移總量
    var dis = 0;
    for(var i = 1; i < this.tracks.length; i++) {
     dis += this.tracks[i] - this.tracks[i-1];
    }
    if(Math.abs(dis) < 0.01) {
     this.stand();
    } else {
     if(this.tracks[4] > this.tracks[3]) {
     this.turnRight();
     } else {
     this.turnLeft();
     }
     this.run();
    }

    七、展望

    1、使用HTML5開發Kinect體感游戲,降低了技術門檻,前端工程師可以輕松的開發體感游戲;
    2、大量的框架可以應用,比如用JQuery、CreateJS、Three.js(三種不同渲染方式);
    3、無限想象空間,試想下體感游戲結合webAR,結合webAudio、結合移動設備,太可以挖掘的東西了……想想都激動不是么!

    如有疑問請留言或者到本站社區交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    HTML5開發Kinect體感游戲的實例應用

    HTML5開發Kinect體感游戲的實例應用:HTML5開發Kinect體感游戲的實例應用 一、簡介 我們要做的是怎樣一款游戲? 在前不久成都TGC2016展會上,我們開發了一款《火影忍者手游》的體感游戲,主要模擬手游章節《九尾襲來 》,用戶化身四代,與九尾進行對決,吸引了大量玩家參與。 表面上看,這款游
    推薦度:
    標簽: 游戲 例子 html5
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 精品一区二区在线 | 欧美日韩亚洲高清不卡一区二区三区 | 亚洲欧美日韩高清一区二区三区 | 亚洲 国产 日韩 欧美 | 亚洲婷婷在线视频 | 天天操夜夜草 | 国产一区二区三区久久精品 | 伊人久久综合成人网小说 | 精品成人一区二区三区免费视频 | 全免费午夜一级毛片一级毛 | 欧美日韩精品在线 | 日本另类αv欧美另类aⅴ | 亚洲欧洲日本在线观看 | 国产成人精品影视 | 欧美激情综合 | 亚洲欧美视频在线观看 | 看全色黄大色大片免费久久久 | 国产精品手机视频一区二区 | 91系列在线观看免费 | 欧美夜夜爽 | 国产在线精品观看 | 91久久精品国产亚洲 | 一区二区三区91 | 国产成人久久精品亚洲小说 | 亚洲欧美日韩国产综合高清 | 国产日韩欧美高清 | 亚洲一二三区在线观看 | 国产成人无精品久久久久国语 | 国产第十页 | 亚洲欧美日韩在线播放 | 亚洲专区欧美专区 | 欧美视频区 | 毛片一级免费 | 一区二区影视 | 中文字幕美日韩在线高清 | 亚洲欧美日韩成人 | 国产精品高清在线观看 | 成人欧美日韩 | 天天爽夜夜爽一区二区三区 | 国产日韩一区 | 亚洲精品午夜国产va久久成人 |