整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在前面的文章中提到过目前基于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小时内与您取得联系。
