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是不行的需要做些修改,当然也有工具可以自动转。


Log in to reply
 

走马观花

最近的回复

  • Z

    我按照楼主说的,除了windeployqt以外,还需要Qt\labs\folderlistmodel,QtQuick\Layouts,QtQuick\VirtualKeyboard,QtQuick.2,platforminputcontexts这么几个目录,另外Qt5Qml.dll, Qt5Quick.dll也要加进来,还是不行,楼主可以发个完整的文件夹给我吗,release模式的,debug模式没问题

    read more
  • 1.jpg

    简介

    USD全称是“Universal Scene Description”,它主要着力的是电影、游戏复杂制作的流程的规范化。这回我们主要来研究USD在Maya中有关渲染部分究竟是如何实现的。

    USD通过附属的子项目Hydra来实现在其工具“UsdView”以及Maya中渲染方面的实现。Hydra是一款经过多年锤炼的渲染引擎(据说自从2012年就开始研发),Hydra与Maya中有关渲染的结合得益于Maya支持第三方渲染框架通过它提出的“Viewport (1.0、2.0)”方式支持。

    初探

    我们打开USD项目,会发现它有很多子项目。其中包含了imaging和usd子项目。这里我们主要关注的是imaging项目。由单词意思可知,其主要关注的是产出图片的,也就是有关渲染的。
    ca7ce8ff-7e7d-4ec3-9246-fbee48109c7b-image.png

    有关Hydra是三个子项目。包含了hdSt、hdStream以及hdx。我们主要关注的是hdSt。因为这个项目是和OpenGL渲染密切相关的。由于OpenGL是做渲染的大家通用知识,因而它是我们关注的主要子项目。

    调试

    调试.jpg
    我们调试这部分代码,截了此图。我们在图中至少发现几个问题:

    Maya底层是用OpenSceneGraph(OSG)管理场景的。我们可以看到Maya 2018的文件夹里有很多OSG开头的动态链接库,这么说具体视口渲染的部分都是建立在OSG上的。Maya的Viewport 2.0也是建立在OSG上的。在可见的将来它们不会替换掉OSG。

    USD的Hydra和Maya结合的类叫做UsdMayaGLBatchRenderer。由名字可知,它仅工作在OpenGL下,换句话说,如果Maya使用的是DirectX11进行渲染的,那么它将会失效。
    d7063ec4-242e-40bd-bf05-5103c38fedf1-image.png

    libhd项目只是一个前端库,后端通过libhdx以及libhdSt来实现。尤其是libhdSt,它主要是和OpenGL打交道的。它十分复杂。主要基于的是OpenGL 3.3+,也就是包含了各种着色器以及高级栅格化技术,并且整合了网格细分库:OpenSubdiv。

    后续

    由于我们的研究方向是思考一个方式来让让Hydra支持过程化纹理,因此我们还需要继续对此进行研究。

    read more
  • 最近我开始在Maya工作啦。Maya是一款优秀的三维软件,可以处理布景、建模、纹理、装备、渲染等操作。而且它可以支持C++和Python的开发。文档也是非常多的(参考这里)。

    我们最近的工作呢,是想要利用Maya的资源,尤其是图片资源,来制作新的界面。由于Maya是基于Qt开发的,因此要获取图片资源,除了Maya文件夹里D:\Develop\Autodesk\Maya2018\icons文件之外,还需要从资源文件中获取到。而资源文件一般是编译成C++代码放在程序的某个位置了,所以我们一般是看不到的。我们就开始想,既然Maya能够成功地读取并且显示,我们通过Maya的插件开发,不也能够获取并且显示到需要的图标吗?由于Qt的经验,我开始研究通过写Maya插件来获取到Maya资源文件的方法。

    新打开Maya软件,点击右下角的脚本图标,我们开始输入脚本:
    ad141613-63a5-4a93-9b79-3d6ca44da782-image.png

    2、我们通过Qt for Python来从Maya中获取到图标信息。由于Maya是构建在Qt 5.6.1上的,当时还不叫Qt for Python,而是PySide2。当然用法也是差不多的。更重要的是Qt 5.6.1已经支持QML了,可以支持QML的基本绘图方法。所以我们打算结合Qt for Python和QML来实现相关的功能。其实这样一组合就和Maya没有什么关系了。剩下的都是Qt的技术。
    我们的脚本是这样的:

    from PySide2.QtQuick import QQuickView from PySide2.QtCore import QDir, QFileInfo, QUrl def getMayaResourceFileList( nameFilter ): dir = QDir( ":/" ) return dir.entryList( nameFilter ) view = QQuickView( ) view.setResizeMode( QQuickView.SizeViewToRootObject ) mainUrl = QUrl.fromLocalFile( "C:/Users/huawei/Documents/ImageGridView.qml" ) view.setSource( mainUrl ) view.show( ) rootItem = view.rootObject( ) if rootItem != None: rootItem.setProperty( "prefix", "qrc:/" ) rootItem.setProperty( "model", getMayaResourceFileList( '*.png' ) )

    其中C:/Users/huawei/Documents/ImageGridView.qml是我本地的路径,可以改为任意的路径甚至是http路径呢。

    我们还得完成ImageGridView.qml文件内容,其实也非常简单,大概是这样的: import QtQuick 2.6 GridView { id: root width: 320 height: 480 cellWidth: 80 cellHeight: 80 delegate: Image { width: 80 height: 80 source: root.prefix + modelData Text { anchors { left: parent.left right: parent.right bottom: parent.bottom } text: modelData wrapMode: Text.Wrap } } model: 40 property string prefix }

    22ae8472-0bb3-4342-ae72-e1cb54bd87a7-image.png

    4、这些文件准备就位了!我们打开一下Maya软件,看看结果~
    f430332d-c824-47d3-8d1c-b17b3c53bc97-image.png
    它是一个可滑动的界面,每行显示4列,然后下面是文字的内容,展示了图标的名称。我们可以借此工具拿到我们感兴趣的图标的路径,然后应用到我们制作的界面上。其实,如果你觉得图片好,也可以通过QImage以及QPixmap给转存出去自己用。

    如果你觉得文章很棒,记得点赞哦。

    read more

关注我们

微博
QQ群











召唤伊斯特瓦尔