尝试编译QCefView来将浏览器嵌入到应用程序中



  • 以前我曾经看到过一些软件可以将浏览器嵌入进来,那时我就感到很神奇。现在技术层出不穷,浏览器web技术的发展,让很多产品可以通过浏览器的形式来呈现,所以浏览器结合原生框架制作的软件变得流行起来。

    Qt 除了WebKit、WebEngine外,其实还可以直接整合第三方CEF来实现对于浏览器的整合。我这一天打算尝试一下,因为这不是Qt维护的解决方案,所以效果不能和WebEngine以及WebKit相比。但是也提供了一个解决方案吧。

    Qt直接和CEF结合参见一个第三方开发者的库:QtCefView,它的项目地址是:https://tishion.github.io/QCefView/
    作者提供了一个较为简单的英文介绍。我们这篇博客有一部分就是对原有介绍的翻译。

    要构建QCefView,有这几步:

    1、下载CEF项目

    CEF项目的地址是:http://opensource.spotify.com/cefbuilds/index.html
    选择适合自己的平台进行构建,我们呢,下载的是cef_binary_3.3359.1772.gd1df190_windows32_minimal这个安装包,也就是在Windows下进行构建的。
    0_1526555374575_a9ad5d3d-f6d0-448d-97e7-5ac56f25871f-image.png

    2、解压

    将CEF项目的压缩包解压出来,放在一个目录下,我放在的目录是D:\SDK\cef_binary_3.3359.1772.gd1df190_windows32_minimal。然后可能需要安装cmake。参见cmake的安装方法本站有很多篇文章,这里选取几篇比较重要的吧:
    https://qtdream.com/topic/436 CMake编译+Mingw32安装+QT使用
    或者可以从这个位置下载cmake:https://cmake.org/download/
    0_1526555428553_a9e79186-8049-4804-99aa-cc1c2bb1aa57-image.png

    选择最新的版本即可。同样等待系统安装cmake到合适的位置即可。

    3、cmake生成CEF的的sln文件

    因为CEF目前适合MSVC编译器,所以用cmake生成的时候,最好前提安装了较新版本的Visual Studio。推荐Visual Studio 2015。我这里呢,由于已经安装了Visual Studio 2013,没办法,只能这么用了。打开cmake-gui,在我的系统中的位置是C:\Program Files\CMake\bin\cmake-gui.exe。双击进入,然后configure、generate以及open project。很快就生成sln文件了。使用open project命令可以使用Visual Studio打开sln文件进行后续的编辑。
    0_1526555527262_8a4e205c-b4ef-483a-a1b0-391e634f0d7d-image.png

    4、构建CEF
    打开Visual Studio后,开始构建CEF。注意生成应用的方式是/MD还是/MT。因为这会和我们编译的库文件不匹配。配置的内容是:
    0_1526556742292_77d8cf0d-0133-410d-960f-b0eab2788feb-image.png
    0_1526556818459_c52dde05-6a2e-4f45-976f-59bd0144902f-image.png
    除了这些,还需要安装Qt for Visual Studio Add-in,下载地址是:http://download.qt.io/official_releases/vsaddin/

    最后编译,成功。
    0_1526558519856_770bd296-335d-4512-bf65-80e3ad4153c3-image.png

    不过想运行一个程序,遇到报错~
    0_1526558642524_1f55d10b-7298-423d-a7c7-5dd06cf4b2bb-image.png

    难道这篇文章又会变成“从新手到放弃”系列吗?


Log in to reply
 

最近的回复

  • 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
  • 看到Allegro也是由一个while ( 1 )死循环完成的啊。游戏似乎都是用死循环来进行逻辑和渲染。

    read more

关注我们

微博
QQ群











召唤伊斯特瓦尔