适用于Unity和Unreal Engine的Asm.js和WebGL

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

Unity和Epic的虚幻引擎（Unreal Engine）是游戏开发人员经常使用的流行中间件工具，不仅限于创建以可执行文件形式运行的已编译应用程序。 Unity以前有一个网络播放器，它是使用ActiveX的可下载插件。 Chrome取消了对NPAP（Netscape插件API）的支持，但一年多前才宣布支持。

4月份，随着Chrome 42稳定版的发布， 他们终于把斧头放了上去。 原因有很多，但最值得注意的是，它们表示“挂起，崩溃，安全事件和代码复杂性。 Google建议改用Web标准，例如WebGL，我将在下面进行解释。

微软正在效仿并弃用ActiveX，VBScript，attachEvent和其他旧有技术，以支持Web标准。 HTML5时代的功能大大减少了对ActiveX控件的需求，该功能还可以跨浏览器生成可互操作的代码。

随着WebGL和asm.js的出现，开发人员现在可以从浏览器内部利用其计算设备的许多功能，并访问以前不可用的市场。 在本教程中，我将向您展示“方法”的一部分：

为什么要编译为JavaScript？

JavaScript是唯一可在所有网络浏览器中使用的语言。 尽管只有JavaScript将在浏览器中运行，但是您仍然可以用其他语言编写并且仍可以编译为JavaScript，从而使其也可以在浏览器中运行。 这可以通过称为emscripten的技术来实现 。

Emscripten是一个基于LLVM的项目，它将C和C ++编译为asm.js格式的高性能JavaScript。 简而言之：在浏览器内部使用C和C ++以接近本机的速度。 更好的是，emscripten将桌面图形API OpenGL转换为WebGL，这是该API的Web变体。

此代码如何转换为WebGL？

Unity最近也对其在WebGL上运行的软件进行了一些性能基准测试 。

但是，对代码进行交叉编译（通常也称为转堆 ）并非没有陷阱。 静态类型语言中常见的提高性能的技术（例如多线程（JS是单线程）和SIMD（单指令多数据））尚不可用。

Mozilla与其他几家领先的技术公司一起一直在研究SIMD.js，因此在不久的将来可以提高性能并降低功耗。 在此处了解更多信息。 除了依靠上面的性能调整之外，Unity依赖于它们新的脚本运行时IL2CPP（第2行C ++）。 那是另一篇文章的故事，但是Unity每隔几周就进行一次出色的网络系列文章，以说明IL2CPP的工作原理。

IL2CPP具有两个不同的部分：

• 提前（AOT）编译器
• 支持虚拟机（VM）的运行时库

.NET编译器的中间语言（IL）通过AOT编译器编译为C ++源代码。 服务和抽象（例如独立于平台的对线程和文件的访问以及垃圾收集器）是运行时库提供的一些好处。

这样看：

图片由Unity提供

当您在Windows计算机上运行.exe时，它实际上不是字节码（0和1）。 VM在运行时仍读取二进制文件，然后将其转换为字节码。 Windows计算机上的DotNet CLI是虚拟机的示例，可以读取此二进制文件。 CPU无法理解二进制以外的任何内容，因此需要执行此附加步骤。

还是很困惑？ 这篇文章详细解释了机器代码，字节代码和VM之间的区别。

asm.js如何适合图片？

Asm.js是Assembly JavaScript的缩写，是JavaScript的子集。 无论是在现有的JavaScript引擎中运行还是可以识别并优化asm.js的提前（AOT）编译引擎中运行，asm.js程序的行为都相同-当然，速度除外！

在速度方面，很难准确衡量它与本机代码的比较方式，但是，编译为asm.js的C程序的初步基准通常比使用clang的本机编译（c语言的本地编译）的速度慢2倍之内。 ，C ++和Obj-C编程语言。 重要的是要注意，这是单线程程序的“最佳”情况。 有关JavaScript语言的这种限制，请参见下文。

在后端，Clang使用LLVM，这是一个用于构造，优化和产生中间和/或二进制机器代码（再次为0和1）的库。 LLVM可用作编译器框架，您可以在其中提供“前端”（解析器和词法分析器，例如Clang）和“后端”（将LLVM表示形式转换为实际机器代码的代码）

进一步阅读：Mozilla的Alon Zakai拥有一个很棒的幻灯片平台 ，其中进一步详细介绍了这一切的工作原理。

那么asm.js有多酷？ 好吧，它有自己的Twitter帐户@asmjs 。 尽管asm站点很少 ，但除了提供详尽的FAQ外，它还涵盖了W3C规范。 更妙的是，Mozilla的协调谦卑的Mozilla套件 我 ñ2014年，它允许你买一堆GAMEST是把asm.js.优势

为什么不将您的JavaScript代码转换为asm.js？

由于JavaScript具有动态特性，因此实际上无法将其编译为asm.js并不能提供很多好处。 这与尝试将其编译为C甚至本机代码时存在相同的问题–带有VM的VM必须照顾那些非静态方面。 但是，您可以手工编写asm.js。

如果已经可以用完全静态的方式翻译标准JavaScript，那么就需要asm.js了 。 Asm.js的存在是为了保证JavaScript会更快地得到开发人员的支持。 JIT很难理解动态语言以及静态编译器。

为了更好地理解这一点，重要的是要理解为什么 asm.js完全可以提供性能优势。 或为什么静态类型的语言比动态类型的语言性能更好。 原因之一是“运行时类型检查需要时间”，而更深思熟虑的答案将包括增强优化静态类型代码的可行性。 使用诸如C之类的静态类型语言的最后一个好处是，编译器在编译每个对象时都知道其类型。

Asm.js是JS的受限子集，可以轻松转换为字节码。 要获得此优势，第一步需要将JS的所有高级功能分解为该子集，这有点复杂。 但是JavaScript引擎经过优化和设计，可以将所有这些高级功能直接转换为字节码-因此，像asm.js这样的中间步骤并没有提供太多优势。

WebGL在做什么？

WebGL（Web图形库）是一个JavaScript API，用于在任何兼容的Web浏览器中渲染交互式3D计算机图形和2D图形，而无需使用插件。 WebGL具有三个明显的优势：

• 任务 ：绘制反射性材料或复杂的照明会产生大量的开销，并且看到JavaScript是单线程的并且受CPU约束，为什么不将其中的一些卸载到设备中的GPU上并让它们繁重呢？

• 性能 ：WebGL利用硬件加速（设备内置的GPU），非常适合游戏或复杂的可视化。

• 着色器 ： * *可以使用称为“着色器”的小程序来产生复杂的视觉效果。 这可能像产生棕褐色的着色效果一样简单，也可以像水或火焰那样更复杂的模拟。 访问Shadertoy ，以展示一些真正突出这一点的示例。

在构建 WebGL项目时，Unity将创建一个包含以下文件的文件夹：

• 一个将您的内容嵌入网页的index.html文件。
• 一个包含播放器代码的JavaScript文件。
• 一个.mem文件，其中包含一个二进制图像，用于初始化播放器的堆内存。
• 包含资产数据和场景的.data文件。
• 一些支持JavaScript的文件来初始化和加载播放器。

您也可以自定义页面样式以更好地适应您的游戏，尽管建议您使用Fullscreen API以获得更身临其境的体验。

有兴趣学习WebGL吗？ 查看WebGL学院以获取完整的课程。

WebGL缺少什么？

WebGL是OpenGL ES规范的子集。 这是您经常在移动设备（例如Android和iOS设备）上看到的图形API。 ES（嵌入式系统）规范实际上是OpenGL的子集，OpenGL是台式机和控制台（如PlayStation和Wii）可用的图形API。 由于WebGL不是与OpenGL直接一对一匹配，因此某些功能将丢失。

以下是缺少的功能的简短列表，这些功能当前不适用于Unity游戏的WebGL版本。 期望随着时间的推移会改变。

• 物质纹理的运行时生成
• 电影纹理
• WWW类以外的网络（可使用WebSockets插件）
• 支持WebCam和麦克风访问
• 硬件光标支持
• 大多数非基本音频功能
• 脚本调试
• 线程数
• 任何需要动态代码生成的.NET功能

浏览器支持如何？

这是事情变得疯狂的地方。 您可以在这里试用他们的两个WebGL演示。 您需要使用支持asm.js的浏览器。 在撰写本文时（2015年7月），对asm.js的支持如下：

• 火狐浏览器
• 铬
• 边缘
• 苹果浏览器

重要的是要注意，尽管在所有浏览器中均未100％实现asm.js规范，所以结果会有所不同。 不幸的是，受欢迎的功能检查网站CanIUse.com上未列出asm.js，因此很难清楚地了解每种浏览器对它的支持程度。 这在移动浏览器上不起作用，因为它们目前不支持asm.js，尽管有些浏览器支持WebGL。 2014年11月，我写了一篇有关移动设备上WebGL的当前状态的文章 。

表现如何？

您可以在浏览器中尝试Unity的基准套件 ，以查看其C＃到JavaScript转换的性能如何。 这涵盖了从Mandelbrot GPU测试到2D物理和粒子的所有内容。 2014年10月Unity的这篇文章 ，在宣布Microsoft的Edge浏览器之前，还重点介绍了一些有趣的发现：

• 在几乎所有基准测试中，带有asm.js的Firefox都比Chrome和Safari都快，并且是目前运行Unity WebGL内容的最佳浏览器。

• 当您主要受GPU限制时，可以期望WebGL的执行与本地代码非常相似。

• 在某些方面，WebGL实际上将大大优于本机代码 。 这种情况在很大程度上取决于脚本性能的测试（Mandelbrot和CryptoHash都在C＃中实现其算法），因为IL2Cpp可以生成更多优化的代码（本文中的更多信息 ）。

• 对于3D物理测试（Unity 5.0中的PhysX 3.3现在是完全多线程的）进行了高度优化以使用多线程和/或SIMD的领域，本机代码仍可以比WebGL快几倍。 与此相比，在将Firefox与本机进行比较时（Box2D不是多线程的），2D物理非常接近于奇偶校验。 我们希望将来会为JavaScript带来SIMD和多线程扩展，这可能会有所改变。

那么，对于开发人员来说，这对您意味着什么？ 自然，在某些地方WebGL比本地代码要慢得多，例如使用多线程的区域，但是WebGL的性能不错，并且每天都在提高。 实际上，致力于开发Web标准的国际社会W3C刚刚宣布了WebAssembly ，这是Web安全代码的新的中间表示形式。 简而言之，“ Wasm”是用于低级安全代码的新二进制语法，该语法目前将与asm.js一起运行。 这将进一步提高浏览器中运行的JavaScript应用程序的性能。

Alon Zakai 在三月份写了一篇文章，概述了去年主要浏览器中asm和JavaScript的整体速度是如何提高的。

为什么有人要这样做？

这是一个很常见的问题。 我最常听到的声音是：“谁想下载60mb网站？_你是对的-60mb的网站规模巨大！ 但我想每天要从YouTube和Netflix下载千兆字节的视频内容的人都是同一个人。 如果您将其视为网站，那肯定会很大。 如果将其视为游戏，则60mb很小！ 下面的案例研究很好地说明了这一点。

此外，作为开发人员，您现在可以规避应用商店的限制。 要更新您的应用程序吗？ 没问题，将新的版本推送到您的网站。 不想等待iOS App Store的为期一周的批准过程（即，如果它获得批准）？ 完美，推送到您自己的网站。

当然，您也可以始终将其出售给付费专区。 或需要某种授权才能播放标题。 此外，您无需为应用程序商店支付年度许可费，也不需要为商店的图像准备图像，为计算机的桌面准备图标等。现在一切都开始吸引人了，我们只涉及了表面。

看看Illyriad游戏的团队在太空战斗头衔《 Age of Ascent》中的表现。 最初，它们只发送一小部分数据，足以将您发送出去，然后再将其他数据发送给您。 我相信在我们上一次对话中，它开始于50mb。 在我与他们进行的播客中，您可以了解更多有关它的信息。 用户可以跳入并立即播放。 无需大量客户端下载，立即降低了进入门槛。 在我的《无尽的任务》时代，Teenage-me会喜欢上这个。

相反，传统标题会在您开始播放之前立即将所有内容发送给您。 当然，游戏机刚刚开始使用“块”，它将标题分解成小块，并开始下载您几乎立即需要播放的部分。

乔纳斯·埃希特霍夫（Jonas Echterhoff）指出，在Unity中，可以通过使用AssetBundles来流式传输资产。 或者，您可以尝试使用此Asset Store程序包，该程序包将WebGL构建数据重新打包，以便将构建中的场景拆分为多个文件，并且在第一个场景加载后即可开始内容：

https://www.assetstore.unity3d.com/zh-CN/#!/content/38368

为了与模拟太空主题保持一致，我查看了《星际公民》， 它的价格大约为100gb。 您是否诚实地相信您将体验到全部100gb的内容？

离线体验

仅仅因为您指向HTML5站点并不意味着您无法获得脱机体验。 不相信我吗？ 请观看Snowbuddy的创作者之一Syd Lawrence的这段视频。 Syd主持了《 We Make Awesome Sh》 ，在他的演讲中，他展示了一些用PhoneGap制作的令人难以置信的应用程序，以及在2015年PhoneGap Day上展示了制作高性能PhoneGap应用程序的7大技巧，但特别强调了如何创建离线体验。

将您的应用程序的本地和远程内容混合在一起是明智的。 Microsoft Edge支持的诸如IndexedDB，localStorage和AppCache之类的技术都可以做到这一点。 本地页面可以保留在您的应用程序包中，仍然可以提供基本的脱机体验。

案例研究：Owlchemy Labs的Aaaaa！ 从Unity转换为asm.js

Owlchemy实验室的团队对其游戏Aaaaa进行了转换！ 在2014年， 我们对该流程进行了一次总结。 去年6月，使用WebGL导出器的预Alpha版本，他们能够获取所有C＃代码并将其转换为一个JavaScript文件，该文件的代码行长超过一百万行！

aa！ 除了38首全长歌曲外，它还具有200多个关卡，可以在运行时产生300多种资产。 在PC / mac上，他们正在查看388mb的未压缩文件，因此，正如您可以想象的那样，每次有人要玩游戏时都必须下载所有这些文件会有些麻烦。

他们最大的节省者之一是Unity的AudioClip流解决方案 ，该解决方案可以在运行时按需流音乐。 完成后，其最终压缩的WebGL构建大小（包括所有已加载的资源以及Unity引擎本身）最终达到68.8 MB。 压缩后的独立PC版本几乎是其两倍大小，为192 MB。

当然，需要进行一些UX更改，包括重新绑定转义键，在许多游戏中，该键会显示一个暂停菜单，但是在浏览器内部将退出全屏模式并释放鼠标锁。 此外，由于浏览器的安全模型强制将这些游戏放到沙盒中，因此将大量数据保存到磁盘或从用户的硬盘驱动器加载自定义音频可能会带来问题。

最后，考虑某种云同步功能非常重要，因为游戏玩家通常不会仅在一台机器上玩基于Web的游戏。 对于消费者而言，从任何计算机上加载其配置文件并仅显示其设置/保存将更加方便。

是否还有其他中间件工具可以利用此优势？

Epic的虚幻引擎4可以导出到WebGL，并且也可以利用asm.js。 您可以在此处找到分步说明。 他们的过程几乎与Unity减去第一步的C＃相同，因为您在Unreal Engine中编写的代码已经在C ++中。

Epic当前的展示作品是Tappy Chicken ，这是Tappy Bird类型的游戏，也可以在iOS和Android上使用。 他们首先在GDC 2014上演示了UE 4在Firefox中的工作方式：

在前一年的GDC上，Mozilla和Epic在他们的一次演讲中令所有人感到惊讶，因为他们发现在使用Epic Citadel演示仅进行了一周的工作后，UDK（虚幻引擎3）正在浏览器中运行。

NomNom Games的Monster Madness是第一个使用asm.js在网络上发布的虚幻引擎3商业游戏 。

未来该何去何从？

WebGL不仅限于游戏。 应用程序也可以轻松利用该技术。

浏览一下Unreal Paris 1.2演示，用户可以在其中浏览精心设计的公寓。 （下载链接）

想象一下，以建筑师或设计师的身份工作，并试图将其推销给客户。 您可以在浏览器内部即时运行它。 更好的是，用户不需要下载整个应用程序。

看一下“上升时代”之类的东西。 下载54 Mb，您就可以开始播放该应用程序，因为它只会流式传输所需的内容， 然后可以使用IndexedDB之类的技术将其缓存在本地，因此您无需再次下载它。 用户可以在几秒钟内启动并运行。 我在12月的Ilyriad游戏中采访了该团队，以更好地了解他们如何组合技术。

在频谱的另一端，我们有起价为70Gb的Star Citizen ，这对许多人来说是一个巨大的障碍，尤其是在他们可能没有快速宽带的地方。

对于可能不想使用C或C ++编写应用程序的开发人员，您仍然可以使用WebGL框架并将其全部用JavaScript编写。 BabylonJS就是一个例子，它包括一个用于2D和3D应用程序的物理引擎，以及handJS，它将所有输入类型（单击，触摸，笔）集中到指针事件中。

还有其他选择吗？

但是当然！ PlayCanvas是一个出色的基于WebGL的框架，该框架使用asm.js进行物理处理。 甚至更好的是，它在基于浏览器的编辑器之上还拥有出色的文档和教程。

对于此类工具，您需要使用某种包装（例如Cordova或PhoneGap）将其移植到应用商店（例如Google Play，App Store或Windows Marketplace）。 流形JS

ManifoldJS旨在通过利用Web App Manifests来使移动开发人员的生活比以往更加轻松，该Web App Manifests允许网站声明类似app的属性。 ManifoldJS在支持该平台的平台上使用该标准，但对于那些不支持的平台则使用Cordova。 Cordova很棒，但是W3C还考虑了在Mozilla（Firefox Open Web Apps），Google（Chrome Hosted Apps）和Microsoft已经完成的工作（Windows 8具有本地Web应用程序，Windows 10扩展到了托管Web应用程序）。 这样，我们现在可以包装网站并创建可在各种应用商店中部署的混合应用程序，同时仍然利用每种设备的许多本机方面（联系人，日历，文件存储，陀螺仪，GPS等）。

Jeff Burtoft在http://www.thishereweb.com/hosted-web-apps-explained/上很好地解释了托管Web应用程序

当我们将两者结合时，我们可以以本机速度创建应用程序，这些应用程序可以部署在许多应用程序商店中，并且主要利用一个代码库。 移动开发没有灵丹妙药，但这一定会使过程更容易。

结论

Unity 概述了在文档中将标题导出到其WebGL播放器的过程 。 浏览器对WebGL和asm.js的支持都在不断提高，Firefox甚至在今年早些时候在旧金山举行的游戏开发者大会上展示了WebGL 2.0的功能。 WebGL 2.0进行了许多改进，包括一次可以渲染多达32个纹理的功能，而当前的标准是8，此外，开发人员还可以使用抗锯齿和多个渲染目标。

将Unity游戏移植到WebGL的好处很多：

• 通过精选应用商店以外的来源进行分发
• 封装尺寸通常较小
• 轻松演示或共享项目

开发人员已经证明了该模型是可行的，如the_ Aaaaa！_案例研究和Mozilla Humble Bundle所示，因此现在正是利用浏览器最终提供的功能并为您的工作增加更多机会的合适时机。

JavaScript的更多动手实践

本文是Microsoft技术传播者开发的Web开发系列文章的一部分，内容涉及实用的JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。

我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：

• 扫描您的站点以查找过期的库，布局问题和可访问性
• 在Mac，Linux和Windows上使用虚拟机
• 在您自己的设备上远程测试Microsoft Edge
• GitHub上的编码实验室：跨浏览器测试和最佳实践

我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：

• Microsoft Edge Web Summit 2015 （新浏览器，受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
• 哇，我可以在Mac和Linux上测试Edge和IE！ （来自Rey Bango）
• 在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
• 使Web正常工作的Edge渲染引擎 （来自Jacob Rossi）
• 使用WebGL释放3D渲染 （来自David Catuhe，包括vorlon.JS和babylonJS项目）
• 托管的Web应用程序和Web平台创新 （来自Kevin Hill和Kiril Seksenov，包括歧管 .JS项目）

Web平台的更多免费跨平台工具和资源：

• 适用于Linux，MacOS和Windows的Visual Studio代码
• 使用node.JS进行代码和Azure上的免费试用

From: https://www.sitepoint.com/asm-js-and-webgl-for-unity-and-unreal-engine/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！