Qt WebAssembly 内容介绍



  • 先聊Web Assembly(Wasm)

    Wasm是一个比较新的浏览器技术标准,下面是其主页链接。那么Wasm要解决一个什么问题呢?
    http://webassembly.org/
    最古老的时候,网页使用JavaScript实现所有的UI逻辑,而浏览器有一个JSEngine负责动态解释并执行。这种方式速度非常慢,一些复杂动画UI或者3D的UI,会出现明显卡顿。后来,为了解决这个问题,就产生了Abobe Flash技术(类似的还有微软的SilverLight等)。它的基本思路是:把复杂UI逻辑进行编译,再把编译后的二进制码流随着Http协议一起发送到浏览器,最后在浏览器的专属插件内执行。这种技术流行了很长时间,但是渐渐地产生了问题:
    1、技术是专有的,闭源。
    2、每个浏览器都要安装对应插件。刚开始,这并不是一个负担。因为只要安装一次,以后就可以一直用下去。但是随着移动平台的崛起,各种手机操作系统和移动版浏览器诞生。此时发现,Flash插件臃肿不堪,在移动端性能低下,而手机厂商还没有办法帮忙裁剪优化。于是各浏览器巨头就有弄一个开放标准的念头。

    Wasm是一个浏览器厂商的联合标准联盟。目前包含Apple、Google、Microsoft以及Mozilla(已经集齐可以召唤神龙了)。Wasm定义了一个类似汇编(ASM)的底层语言,各大厂商的浏览器可以直接执行这种语言,并在一个沙箱中直接运行,省去了优化、JIT、GC等开销,大大提高了其性能。Wasm试图统一各个浏览器的底层语言,并保持其开放性。使得未来的编译型Web UI有了统一的标准。目前,新版本的浏览器都已经支持Wasm技术了,大家可以打开这个网页测试效果:http://webassembly.org/demo/Tanks/

    ————————————————————————————————————————————
    接下来要介绍一个工具Emscripten

    以下简介摘自 http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
    “2012年,Mozilla 的工程师 Alon Zakai 在研究 LLVM 编译器时突发奇想:许多 3D 游戏都是用 C / C++ 语言写的,如果能将 C / C++ 语言编译成 JavaScript 代码,它们不就能在浏览器里运行了吗?众所周知,JavaScript 的基本语法与 C 语言高度相似。于是,他开始研究怎么才能实现这个目标,为此专门做了一个编译器项目 Emscripten。这个编译器可以将 C / C++ 代码编译成 JS 代码,但不是普通的 JS,而是一种叫做 asm.js 的 JavaScript 变体”

    Emscripten工具的主要功能简单概括就是可以把C/C++代码翻译到asm.js(一个JavaScript的子集)。而且目前,Emscripten还实现了asm.js编译成Wasm。于是,构成了一个完整C++到Wasm的链条,下图是Emscripten的编译过程。

    替代文字

    说了那么多,本文的主角Qt终于要登场了————————————————————————————————

    应该说,Wasm和Emscripten的组合,是给C/C++通向Web世界的一个跳板。目前还不支持C#/Java等其他语言,因为这次主要是给C/C++的机会,因为大多数游戏引擎都是C++的,包括最近大火的Unity3D(C#只是二次开发语言) ) 。

    而Qt作为一套C++上的老牌库,赶上Wasm这趟车,那是必需的。官方准备把Wasm列为一个重要的编译目标平台。到时候,在QtCreator中会有一套和mingw桌面,msvc2015桌面等目标并列的存在。于是可以有这种效果:一按运行三角键,一个网页跑起来了。。。

    目前状态,已经完成了QtCore、QtWidget以及QtDeclarative(QML)模块的移植。在Qt官方blog上有一个预览环境搭建方法,有兴趣的Q友可以去尝试一下:
    http://blog.qt.io/blog/2015/09/25/qt-for-native-client-and-emscripten/
    主要是1.搭建Emscripten 2.编译qmake 3.编译QtCore 4.编译example 我这边测试Ok

    还有可以直接去测试Demo的代码仓库
    https://github.com/msorvig/qt-webassembly-examples

    其中有一个Demo网页,可以直接打开。这不需要你编译任何东西,直接打开就可以看到效果。
    https://msorvig.github.io/qt-webassembly-examples/

    挖大坑待填



  • @linbin823 的确,可以通过WebAssembly将Qt原生的代码转成JS这样脚本语言的代码。而且相当方便。



  • 是的,预计5.11中要加入官方版本。不是同人版本而是官方版哦。当然是从技术预览版开始。。。。



  • @linbin823Qt WebAssembly 内容介绍 中说:

    http://blog.qt.io/blog/2015/09/25/qt-for-native-client-and-emscripten/

    目前包含Apple、Google、Microsoft以及Mozilla(已经集齐可以召唤神龙了)!好怀念呀±±±



  • @linbin823Qt WebAssembly 内容介绍 中说:

    https://msorvig.github.io/qt-webassembly-examples/

    我还有个问题,有了js,就一定能编译成WebASM吗?



  • @stlcours
    没有摸过其他工具,如果只说Emscripten,原理上是得从asm.js编译。
    它是Javascript的子集,也就是说有很多JS烂糟糟的特性,在asm.js中是不支持的。
    所以直接拿js是不行的需要做些修改,当然也有工具可以自动转。


 

最近的回复

  • 0_1539655233041_329385492.jpg
    各位大家好哦。
    经过一个晚上对论坛的维护更新,我们成功地将论坛更新到最新的版本。这次的版本更新主要是提升了稳定性,因此功能上和原来的一样,请大家放心,不会出现奇怪的东西什么的啦。然后呢,由于提升了稳定性,因此论坛不会莫名其妙地出现未响应的情况,总之比以前好就对啦。

    此外,论坛新增了自己研制的一个分享的插件:nodebb-plugin-share-sns-cn。这个插件呢,主要是做主流社交网站的分享的。目前暂时支持QQ、微博以及微信的分享。目前初版是1.0。

    希望大家常常来论坛玩~

    阅读更多
  • 发一些二次元妹子图吧。谁叫我有时候也挺无聊的呢~
    0_1539486167719_119.jpg

    阅读更多
  • 0_1539445819168_123.jpg
    各位大家好!
    又有一段时间啦。我们的萌梦动作编辑器又进行更新啦!☺ ☺
    这次的更新呢,主要是完善了一下自动构建系统。也就是说为了持续构建并且能够给到爱好者可用并且稳定的软件,我们做了很多的努力,其中一点就是制作了脚本进行持续构建,以前要花很多很多的时间对动作编辑器进行构建,现在呢,没有那么复杂了。简简单单地数个批处理操作,即可快速构建咱们的动作编辑器,使得从代码到产品只需要十几分钟即可完成,比以前的速度节省了90%的时间,可谓神速!这套系统已经成功地应用到Windows平台线上了,现在基本可以做到每日构建的水平。而且为每次构建专门准备了pdb文件,即一旦用户运行动作编辑器出现了问题,可以通过程序调试数据库定位到问题的位置,从而提升服务的水平,想想这对于我一直坚持的萌梦这款产品来说算是革命性的操作呢。

    当然现在这套系统只能应用在Windows线上,Mac OS X这条线是我接下来努力的方向,也希望能够实现Mac这条线的每日构建效果。然后Linux平台也比较重要,想起Linux开发应该比Windows等等要方便,所以我想难度比Windows的要小很多,甚至比Mac OS X的都要小。总之路途还很遥远,加油努力吧!

    这次的Windows版本已经成功地在Windows的安装包中进行测试,同时提供在线的和离线的安装包。下面就是这些安装包的github下载地址。

    Windows在线安装包
    Windows离线安装包

    阅读更多
  • 手动给一个赞!!☺ 🤗
    0_1539264026793_好美的图啊.jpg

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔