整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在前面的文章中提到過目前基于WebGL的前端三維可視化存在的一些問題：
1、前端瀏覽體驗和數據量有很大關系，需要花費大量的數據進行數據的輕量化以及切片處理，但是同樣要忍受切片調度加載的問題；
2、前端性能的穩定性不高，高負載的情況下容易出現崩潰；
3、無法支持大分辨率的場景問題；
這些問題在目前情況下似乎都是無解的，要么就是退回到CS架構；要么就是限定使用場景，比如圈定一個比較小的數據使用范圍，以此來獲得比較好的使用體驗；
但是這個都只是權宜之計，在當下強調全場景內容分發的時代，限定內容的分發渠道肯定是不明智之舉，在數字互聯時代，所有的內容制作者都希望盡可能觸及到更多的消費者，將內容能在不同的平臺上分享，包括手機、平板電腦、個人電腦以及交互式屏幕。
顯然在當前的技術背景下繼續折騰WebGL 或者H5都是不明智，因為天花板已經很明顯了，既然“重前端”的模式有瓶頸，那是否可以考慮將高負載的“渲染”放置到能力強大的后端，解放前端？
那一個理想的后端渲染方案應該實現哪些特性？
1、各種終端和平臺都可以在無需安裝的前提下無縫訪問三維場景；
2、客戶端可以非常高效的訪問三維場景，無需等待數據的下載；
3、場景的交互與數據量無關，在前端都可以獲得一致的訪問體驗；
為此一些游戲引擎廠商提出了一種新的三維“云渲染”方案-基于WebRTC的視頻流推送技術：
UE稱之為PixelStreaming；
Unity稱之為RenderStreaming；
由于基本原理一致，就是將場景通過后端渲染，然后采用實時視頻流推送到網頁端，并且能夠實現前端到后端的交互同步。虛幻引擎相應的宣傳以及資料多一些，下面就以此為例介紹一下：
UE Pixel Streaming
像素流送以插件形式集成在游戲引擎中，插件會對主機服務器的圖形流信息進行編碼，然后通過 WebRTC 協 議將其發送給位于接收端的瀏覽器和設備。事實上，通過在高性能主機系統上運行渲染引擎，用戶能在所有終 端設備上享受到與主機相同的畫質，并且能體驗到所有的渲染引擎功能。
由于數據保存在主機上，并且只有像素被流送到查看設備上，所以諸如像素流送這類流送解決方案本質上要比 客戶端下載方案更快速、更安全。此外，用戶會話數據可以在引擎中捕獲以滿足任何指標需求。
什么是WebRTC？
WebRTC(網頁實時通信)是一種通過網頁瀏覽器和移動應用程序進行實時通信的協議。該協議允許以直接鏈接 的方式傳輸音頻和視頻，用戶無需下載任何插件或應用程序。通信命令通過 API 接口提交，前端只要聲明一個<video></video>標簽就可以實現視頻流的加載和交互。
如何搭建像素流架構？
借助 WebRTC 協議，像素流送插件可以在主機服務器上與網絡中的服務器或客戶端進行通信，像素流送可以通過單臺服務器運行，也可以通過允許動態擴展并提供足夠硬件的 GPU 云環境運行。在這些情況 中，關鍵之處是對所需規模進行分析，因為這直接關系到最終主機環境的成本以及用戶體驗的流暢程度。
如果某個應用程序需要支撐大量的最終用戶訪問，并且這些用戶所使用的硬件和軟件設置五花八門，那么就需要采用擁有可延展特性的云環境來實現像素流送。圖中展示了多終端場景下的推流布局，該布局同樣適用于對數據 訪問存在安全要求并且需要跟蹤記錄的共享體驗。
1:虛幻引擎開發內容 2:采用 Web RTC 協議并且位于云中的 UE4 服務器應用程序 3:STUN/TURN 服務器 4:用戶顯
在大多案例場景中，不同用戶需要不同的交互體驗和推流內容。該系統會為每個用戶運行一個單獨的像素流 送組件堆棧，并將每個用戶指向一臺單獨的網絡服務器和主機。匹配器會負責將每個請求者重定向至屬于它的信令和網絡服務器，從而為客戶端及其 WebRTC 代理服務器建立 連接。只要用戶在服務器上一直保持活躍狀態，匹配器就會不斷為用戶推流內容。匹配器組件可以在渲染引擎 以及其他服務器組件中找到。
需要怎樣的支持環境？
每個堆棧都需要一個唯一的標識符和端口來控制體驗。許多消費級顯卡最多只能同時運行兩個編碼器，從而限制了電腦上可以運行的實例數量。對于專業級顯卡來說，例如英偉達的 Quadro 或 Tesla 系列，或者基于云的 GPU 實例(AWS)則沒有這些限制。
英偉達的 GPU 自從 Kepler 架構開始都包含一個名為 NVENC 的硬件編碼器，它能為視頻編碼提供獨立于圖形 性能的全面硬件加速功能。通過將涉及編碼的復雜計算任務轉移到 NVENC 上，圖形引擎和 CPU 將能夠專注于 其他操作。NVENC 使得以下工作成為可能:
視頻編碼硬件 NVENC 可通過英偉達的視頻編碼解碼器 SDK 獲得。該專用加速器支持對 Windows 和 Linux 上 的許多常見視頻編碼解碼器進行硬件加速編碼。
1. 硬件編碼以及像素流送的生成過程。NVENC 編碼器通過緩沖區與 CPU 和 CUDA 核心協同工作并生成像素流，然后 通過 CPU 發送到分發網絡中。
最后總結一下，目前基于視頻流的“云渲染”方案其實已經有了很成熟的商業應用，在一些小場景的可視化中使用常規的WebGL可視化技術應該是沒有問題的，而且成本可控，但是對于一些效果要求高，數據量大，效果酷炫的場景，可能就需要考慮這種“云渲染”的方案了，還是那句話隨著未來5G的普及，這種模式應該是可以更好的適應未來場景下的可視化開發場景。
參考資料：
1、Unity RenderStreaming:
https://gitee.com/Unity-Technologies/UnityRenderStreaming/tree/chore/promotion
2、UE 流送參考：
https://docs.unrealengine.com/zh-CN/Platforms/PixelStreaming/PixelStreamingReference/index.html
測試視頻：
1、Unity官方實時云渲染RenderStreaming小測評：
https://www.bilibili.com/video/av68637388/
2、UE4像素流技術 | UE4 Pixel Streaming(官方漢化)：
https://www.bilibili.com/video/av83445467/
趣是最好的老師，HelloGitHub 就是幫你找到興趣！
分享 GitHub 上有趣、入門級的開源項目。
這是一個面向編程新手、熱愛編程、對開源社區感興趣 人群的月刊，月刊的內容包括：各種編程語言的項目、讓生活變得更美好的工具、書籍、學習筆記、教程等，這些開源項目大多都是非常容易上手，而且非常 Cool。主要是希望大家能動手用起來，加入到開源社區中。
在瀏覽、參與這些項目的過程中，你將學習到更多編程知識、提高編程技巧、找到編程的樂趣。
最后 HelloGitHub 這個項目就誕生了
以下為本期內容｜每個月 28 號發刊
1、ngx_waf：一個 Nginx 防火墻模塊。我差點就錯過了的寶藏項目，它使用簡單不需要復雜的配置，支持的功能直戳我的痛點。你看：
2、fast-cpp-csv-parser：讀取 CSV 文件的 C++ 庫（僅頭文件）。示例代碼：
# include "csv.h"
int main(){
io::CSVReader<3> in("ram.csv");
in.read_header(io::ignore_extra_column, "vendor", "size", "speed");
std::string vendor; int size; double speed;
while(in.read_row(vendor, size, speed)){
// 對 ram.csv 文件中的數據，做你想做的事情吧！
}
}
3、UNO：使用 C++ 編寫的命令行 UNO 紙牌游戲。操作方便支持人機或聯機對戰，游戲基于 Asio 網絡庫和現代 C++ 開發，也有對 C++17 的嘗試。分別實現了服務端、客戶端，代碼簡單對 C++ 新手友好，UNO 的愛好者快來玩一玩吧！
4、godot：一款功能豐富的開源游戲引擎。最初它只是一款 2D 引擎，近期拓展了 3D 部分的能力。相較于 UE4 或者 Unity 這樣的成熟商業引擎來說，Godot 還很年輕不夠成熟，尤其 3D 方面的能力。但它擁有簡易的開發方式，上手簡單。而且社區活躍、文檔覆蓋全面、有較為豐富的示例代碼，對于剛入門的游戲開發者友好。同時開源引擎底層代碼完全開源，開發者可以閱讀和貢獻代碼，而不是只停留在游戲邏輯開發層面。總而言之 Godot 是一個極有潛力的游戲引擎，推薦給想學習游戲開發的同學
5、water.css：一個專門為簡單頁面和示例網頁準備的 CSS 框架
6、fyne：一款 Go 語言跨平臺 UI 庫。想用 Go 寫圖形界面應用的小伙伴，快速上手：
安裝
$ go get fyne.io/fyne
運行一個 demo
$ go get fyne.io/fyne/cmd/fyne_demo/
$ fyne_demo
7、golearn：Go 寫的機器學習框架。來，跑個模型試試吧：
cd $GOPATH/src/github.com/sjwhitworth/golearn/examples/knnclassifier
go run knnclassifier_iris.go
8、keepass2android：一個開源的 Android 密碼管理器。下載地址，功能：
9、PrettyZoo：一款 Java 寫的高顏值 ZooKeeper 客戶端桌面應用。該項目使用了 JDK11 以及 JavaFX 編寫的 GUI 客戶端，代碼量適中適合想學習 JavaFX 編寫應用的朋友。需要連接 ZK 服務端查看數據的話，手邊有這么個工具還是挺方便的。實用和顏值集一身的項目
10、vueblog：一款輕量級 Java 博客項目。基于 SpringBoot+Vue 實現并附有詳細開發文檔和講解視頻，讓剛學會 Java 的同學也能搞定。每個體面的技術人員可能都有一個自己說了算的博客吧
11、x-spreadsheet：基于 JavaScript 實現的輕量級 Web 電子表格庫。它功能齊全，包含表格的基本操作和函數等，還有詳細的中文文檔，在線嘗試
12、h5-Dooring：一款功能齊全的 H5 頁面可視化配置平臺。讓你通過可視化的方式制作出 H5 頁面，技術棧以 React 為主，后臺采用 Node.js 實現。雖然網上有很多這種工具，但本項目免費開源、功能齊全值得一試
13、Ant-Forest：基于 Auto.js 的螞蟻森林能量自動收獲腳本。它是個“綠色環保”的項目，我能從中感受到滿滿的愛和想把它做好的決心！來看看作者開發 Ant-Forest 時解決了哪些難題：
14、tui.image-editor：功能齊全的圖片編輯器。支持圖片剪裁、旋轉、涂鴉等功能，實現了 Vue 和 React 封裝的組件，便于整合進你的項目
15、windows95：基于 Electron 實現的 Windows 95 操作系統。它實現了該操作系統下的所有東西，對！所有！想體驗下 Windows 95 版的掃雷嗎？下載安裝即可
16、LuLu：免費開源的 macOS 防火墻軟件
17、humhub：用 PHP 寫的開源社交平臺。看過《社交網絡》的小伙伴，都知道大名鼎鼎的 Facebook 最早就是扎克伯格用 PHP 語言寫出來的，humhub 能夠讓不會編程的小伙伴也可以用創建出一個社交平臺啦。跟著提示一步步操作，不到 1 分鐘我的社交平臺就建好了
18、phpbrew：一個編譯、安裝、管理多版本 PHP 的工具。有了它就可以方便地在不同 PHP 版本之間自由切換啦，特性：
19、python-patterns：Python 設計模式和使用場景的集合
20、pgcli：支持語法高亮和自動補全的 Postgres 數據庫客戶端命令行工具。它安裝簡單上手快速，如果你用過 Postgres 數據庫自帶的命令行工具，就一定能感受到 pgcli 的迷人之處
21、15-minute-apps：基于 PyQt 框架寫的小型桌面應用程序的集合。想用 Python 寫桌面應用的小伙伴，這個項目應該可以幫到你。比如寫個掃雷游戲：
22、Pine：一個免費、輕量、簡潔的 macOS Markdown 編輯器。功能：
23、Publish：專為 Swift 開發人員準備的靜態網站生成器。讓你實現整個網站都是用 Swift 構建的工具，支持多種主題、插件以及更多強大的自定義選項。示例網站，安裝和快速開始：
$ git clone https://github.com/JohnSundell/Publish.git
$ cd Publish
$ make
$ mkdir MyWebsite
$ cd MyWebsite
$ publish new
24、open-source-rover：NASA 面向科技愛好者開源的火星漫游車設計方案和代碼。通過該項目你可以使用便宜的樹莓派做出自己的火星漫游車，所需的零件很容易就可以買到，遙控部分是使用現成的 Xbox 手柄或者手機，減少花銷。喜歡動手和硬件的小伙伴們，這個東西夠酷嗎？
25、bat：替代 cat 的命令行工具。你還在命令行用 cat 查看文件嗎？那你就 out 啦！今天推薦的 bat 它不僅支持語法高亮，還能展示 Git 的改動。macOS 下安裝命令：brew install bat 相信你用過 bat 后就不會再想用回 cat 了
26、Web-Dev-For-Beginners：微軟開源的 Web 開發教程。該教程共有 24 節課，但目前只有英文版
27、neofetch：展示操作系統信息的命令行工具，支持將近 150 種操作系統
28、jpeg_tutorial：教你編寫 JPEG 解碼器的教程，示例為 Rust 代碼
29、sql-style-guide：一份 SQL 語句編寫風格建議。比如：
-- Good
select *
from users
where email = 'example@domain.com'
-- Bad
select *
from users
where email = "example@domain.com"
30、pure-bash-bible：該書有好多復制就能用的 bash 函數，我愿稱其為 bash 的“奇技淫巧”。比如把字母轉為大寫的函數：
upper() {
# Usage: upper "string"
printf '%s\n' "${1^^}"
}
$ upper "hello"
HELLO
31、pulse：根據包含馬賽克的人臉圖像，生成一張相似容貌的結果。注意不是復原哦，僅可用于人臉
32、Surface-Defect-Detection：該項目整理了目前大量靠譜的表面缺陷檢測數據集，還有最新的頂會論文以及作者的解讀筆記。從事視覺方向的小伙伴，心動了嗎？
迎留言告訴我本期你最喜歡那個項目，如果覺得本文還不錯的話，就點贊、轉發一波吧～
近，我們一直在研究使用虛幻引擎 (UE) 來渲染和探索通過我們的地圖解決方案生成的大型場景。雖然 UE 可以輕松處理這些場景，但我們知道可以通過可靠的基于 Web 的應用程序將它們呈現給用戶也很重要。
盡管有幾種現有的解決方案可用于查看世界的 3d 渲染并與之交互，但主要限制之一是能夠以合理的幀速率運行它們所需的硬件要求。這導致許多流行設備（例如智能手機）無法充分利用此類軟件。
如果你發現自己處于類似情況，那么本指南將成為你通過像素流在前端呈現 UE 場景的第一步。該解決方案的整體架構主要由三個部分組成，即 UE 引擎應用程序本身、預先存在的 UE 節點服務器和自定義前端應用程序。對于我們的網絡應用框架，我們將使用 Vue.js。
在本教程中，我們重點關注兩個要點：
在開始本基礎教程和設置 Unreal 應用程序之前，我們建議您你看使用 Unreal Engine 像素流送的官方文檔，并熟悉 iFrame 環境之外的基本設置。、
虛幻項目的設置與虛幻引擎中設置的任何其他像素流式處理應用程序相同，但是能夠更好地解釋必要的步驟（并能夠復制它們）；我們將通過一個示例進行討論。該示例本身定義了關卡藍圖中的所有藍圖邏輯，盡管可以根據需要將其移動到任何參與者藍圖中。
從 VueJS 應用程序接收到 JSON 有效負載后，我們希望能夠將有效負載中的消息打印到屏幕上。為了做到這一點，我們可以構建一個非常基本的藍圖來監聽來自信令服務器的事件。
監聽信號事件的基本藍圖
所有發送到像素流應用程序的消息，通過將事件綁定到PixelStreamingInputComponent類方法BindEventToOnInputEvent來接收。為此，我們可以將自定義事件綁定到BindEventToOnInputEvent節點。事件描述符將包含從 VueJS 應用程序接收到的 JSON 有效負載。通過將CustomEvent描述符連接到GetJsonStringValue節點，我們可以提取想要打印的字段，在本例中為“消息”字段。
通過添加分支節點并連接到GetJsonStringValue節點的成功輸出，我們可以確保在繼續之前成功檢索到值。最后一步是將GetJsonStringValue節點的輸出字符串連接到PrintString節點以及Branch節點的真正執行。
盡管在我們的示例中我們只想打印消息字段，但你可以通過從 JSON中檢索類型字段并相應地處理每個案例來處理自定義案例。
在這個發送示例中，我們希望能夠單擊虛幻場景中的Actor并將其名稱返回給 VueJS 應用程序。
基本的actor交互藍圖
雖然乍一看發送藍圖可能看起來更復雜，但它實際上非常簡單。大多數節點用于檢索必要的虛幻信息，并且僅在你希望實現相同目標時才需要。
感興趣的主節點是SendPixelStreamingResponse節點。該節點需要連接到PixelStreamingInputComponent類的實例，在本例中，將在單擊演員時執行。SendPixelStreamingResponse接收一個字符串值，其內容被發送回 VueJS 應用程序。盡管在本例中我們發送的是字符串名稱，但這可以是任何可以序列化為字符串的內容，例如 JSON 對象。
可以在下面看到我們在像素流應用程序中使用的完整藍圖邏輯，處理發送和接收數據。
像素流的完整藍圖
Node js 服務器使用服務器端渲染向提供的地址提供靜態 html 頁面，同時全屏顯示當前在 UE 中渲染的場景。它使用 webRTC 和 web 套接字來提供像素流，并將事件偵聽器添加到靜態 html 頁面以將交互數據提供回 UE。服務器默認在 localhost 端口 80 上運行。打開目錄并運行“ node server.js ”將啟動服務器并提供 vue 應用程序稍后在 iFrame 中呈現所需的頁面。
一些小改動是必要的，首先將inputOptions對象更改為使用controlSchemeType HoveringMouse ，這使得 iFrame 和服務器之間的行為更加流暢。接下來，要設置 Vue 應用程序和 UE 之間的交互，請添加示例 GitHub 存儲庫中的兩個函數window.onmessage以添加用于接收消息的偵聽器，然后使用已定義的 emitUIInteraction 函數將有效負載傳遞給用戶。添加 handleUnrealMessage 函數，其中使用window.top.postMessage來“轉發”從 UE 發送的消息，現在可以處理雙向傳遞消息。
我們的示例 Vue 應用程序可從 GitHub 獲得，但是如果你希望從頭開始設置自己的 Vue 應用程序，請按照以下步驟操作。
首先，你需要安裝 vue，使用終端命令“ npm install vue ”，并創建一個新項目“vue create pixel-streaming”，在將目錄更改為該項目之前選擇路由器和歷史模式選項，最后' npm run serve ' 將部署 vue 應用程序的本地版本進行開發。在 views 文件夾中，創建一個新的 View 來容納 iFrame 和像素流行為。要在應用程序中顯示此視圖，請在主App.vue文件中包含 router-link 組件，并使用 router 文件夾中的index.js文件確保 ' / ' 的路徑鏈接到你剛剛創建的新視圖.
視圖中只需要一個簡單的模板，包括一個 ID 為“ myIframe ”的 iframe。這里還必須包含 iFrame 內容的位置，我們將使用 ':' 簡寫綁定到狀態。我們使用“ http://localhost:80 ”的signallingServerAdress，因為這是node js服務器默認運行的地方，如果在不同的機器上運行可以更改，但對于測試來說效果很好。我們還包括了一些簡單的 CSS 樣式，但這對于工作項目來說不是必需的。
UE 提供的 Node.js 服務器將處理開箱即用的流式傳輸、用戶交互和場景導航，因此通過運行它并將 iFrame 從 vue 應用程序指向它所服務的 html 頁面，將提供相同的結果，但在更多有用的前端框架。唯一需要注意的是，你需要處理一些縱橫比維護，并將任何自定義事件從 vue 應用程序通過服務器傳播回 UE。利用Vue中的生命周期鉤子實現這一點相對簡單，定義三個方法并在mounted鉤子中調用它們；resizeIFrame、addResizeListener和addListener。這些方法將在 vue 組件創建和掛載后立即執行。
最后一個方法sendMessage是在組件上定義的。此方法用于將消息發送到節點服務器。我們提供的示例使用了 data.json 中定義的 JSON 消息。此內容使用.contentWindow.postMessage發布。這個方法目前是通過向我們原始模板中的按鈕添加一個點擊事件來觸發的，數據中的自定義 JSON 消息也綁定到我們原始模板的輸入，作為一個例子，vue 在與UE提供的流媒體。
原文鏈接：http://www.bimant.com/blog/vuejs-ue4-pixel-streaming/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
