Unity3d遊戲畫面實時同步html5或WebGL中(基於FMETP STREAM)

一、準備畫面發送端

1.新建unity3d工程(這裏的版本爲Unity3d2018.4.14),導入FMETP STREAM插件(沒有這個插件的找我,我已經買了)。

2.在場景創建空實體FMSocketIOManager,添加FMSocketIOManager組件,將Networktype設爲Server

3.在場景創建空實體GameViewEncoder,添加GameViewEncoder組件

4.選中Main Camera右鍵選擇【Duplicate】,將Main Camera複製一個,將新的實體命名爲RenderCam,將Depth改爲-2。

5.再次選中GameViewEncoder實體,將RenderCam拖到GameViewEncoder組件的RenderCam屬性中。

6.在GameViewEncoder組件的OnDataByteReadyEvent(Byte[])事件中,點擊加號添加事件,將FMSocketIOManager拖入None(Object)中,函數選擇FMSocketIOManager.SendToOthers。

7.在場景隨意創建一個Cube,任意旋轉縮放,確何在RenderCam中可以看得見即可。

 

二、準備畫面接收端

1.官網下載node.js,下載後雙擊安裝文件,選擇自動安裝工具,其餘都點下一步即可。

2.在開始菜單中選擇【Node.js command prompt】,可以看到命令行指向了某個路徑(這裏爲C:\Users\wslng,後面將需要執行的js文件放這個路徑下或子目錄下)

3.將FMETP STREAM插件包中的壓縮文件TestServer_v1.2.zip(位於Unity工程的Assets\FM_ExhibitionToolPack\FMWebSocket目錄下)解壓到C:\Users\wslng(注意!一定要同上面命令行中的路徑一樣),不要在Unity工程的Assets目錄下解壓,執行以下命令

cd TestServer_v1.2
npm init -f
npm install socket.io express --save
node index.js

三、畫面同步到html5網頁中

1.運行Unity工程

2.在瀏覽器輸入http://localhost:3000,在網頁中點擊【Connect】,即可看在同一網頁的下方到Unity工程中的實時畫面。

四、畫面同步到客戶端

1.新建unity3d工程,導入FMETP STREAM插件。
2.在場景創建空實體FMSocketIOManager,添加FMSocketIOManager組件,將Networktype設爲Client。


3.在場景創建空實體GameViewDecoder,添加GameViewDecoder組件。


4.打開Windows附件中的畫圖程序,調整大小爲256*256,保存白色圖像爲texture.png,將圖片放入Assets中。


5.選中GameViewDecoder,將texture.png拖入GameViewDecoder組件中的ReceivedTexture。


6.在Cavas下創建RawImage,將texture.png拖入RawImage組件中的Texture。


7.選中FMSocketIOManager,在FMSocketIOManager組件的OnReceivedByteDataEvent(Byte[])中添加事件,拖入GameViewDecoder,選事GameViewDecoder.Action_ProcessImageData事件。

8.運行本程序(運行程序前,請確保index.js和服務器已啓動),可以看到FMSocketIOManager實體上還附加了一個SocketIOComponent組件,裏邊有IP地址和端口。

五、總體執行順序

1.node index.js

2.啓動服務端.

3.打開客戶端、瀏覽器網頁、WebGL端

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章