Qt WebGL Streaming Plugin介绍



  • 从Qt5开始,引入QPA即“平台抽象层”的概念。“平台”是一个具体的显示输出和用户输入的集合。“平台抽象层”实际上是一种平台的插件机制。通过在启动命令后加入不同的启动参数,选择运行的“平台”,即选择如何显示程序和接受怎样的输入设备。

    Qt WebGL Streaming Plugin(QtWebGL)是Qt5.10中新加入的QPA插件。
    这个平台插件主要是干什么的呢?
    简单来说:运行在QtWebGL平台上的Qt程序,并不使用本地的显卡渲染(当然也不可能在本地显示器上显示)。而是把GL的指令的调用(可以理解是OpenGL指令流)发送给远程计算机的浏览器,使用远程浏览器的WebGL API进行渲染。而远程计算机的浏览器接受鼠标、键盘、触摸的输入,再返回到本地计算机的Qt程序中。
    再简单的说,用Qt写的程序,可以使用浏览器打开了。。

    几个技术细节:
    1、当某个Qt程序在QtWebGL平台上启动后,Qt程序并不运行,而是先在本地计算机启动一个WebServer,等待远程浏览器连接。一旦有一个连接进入,QtWebGL平台就会起动一个独立进程的Qt程序,供其访问。即一个访问连接对应一个独立的Qt程序。因此,QtWebGL可以支持多用户连接,每个用户独立进程,互不干扰。但是同时访问的数量多了,会造成本地计算机负荷大。(目前Qt5.10中,QtWebGL处于 Technical Preview状态,多用户现在没有完成,未来完善版本会加入)
    2、QtWebGL平台运行的程序,仍然在本地计算机上运行。远程浏览器只负责图形渲染工作。因此客户端和服务端分摊运行压力。渲染复杂的页面和3D场景,其速度会快于Html。
    3、网络传输的数据量,小于VNC那种视频流,但是大于Html。因为Html是一次读取,就地运行。因此如果网络带宽不够的情况下,VNC最卡、WebGL也会有丢帧。
    4、加载耗时远小于Html,但加载时还有一部分消耗在等待程序的启动过程中。
    5、QtWebGL是一个平台插件。运行在其上的程序不需要特殊编译或重新编译。程序要运行在WebGL上,只需要在启动时添加一个 -platform webgl 参数即可。
    6、只能支持使用显卡渲染的Qt程序。也就是说,如果用C++ QWidget写的代码,用CPU绘图,那就无法运行在QtWebGL插件上。
    7、相同网络带宽条件下,VNC是有损压缩,QtWebGL和Html是无损的渲染画质。

    refer to: https://zhuanlan.zhihu.com/p/31972532

    WebGL和Wasm比较:
    1、资源消耗:WebGL程序运行在Server端,多开后Server端资源消耗大。Wasm程序完全运行在Client端。Server端没有负荷。
    2、画面效果:Wasm更流畅。WebGL和Wasm底层都是基于WebGL的API,因此功能应该没有大的区别。都可以进行3D复杂场景绘制,都是无损画质。但是WebGl会受到网络延时以及本地GPU绘图能力的影响,会有丢帧和卡顿。Wasm本地运行,是否卡顿只取决于本地GPU绘图能力。
    3、打开时间:WebGL打开速度更快。Wasm要一次下载所有的代码才能运行。第一次等待时间非常长。对于大型3D程序,这可能是一个关键制约因素。
    4、人机交互:WebGL接受的鼠标、键盘、触摸等输入,都要发送回Server端才能处理,有卡顿和延时。Wasm本地处理,无卡顿。
    5、后台数据交互:这点可能是WebGL的核心优势。WebGL不需要再开发后台交互逻辑,因为程序实际运行在Server端。通过WebGL可以很方便地在Client端操作Server端的文件、数据以及IO硬件。而Wasm与H5一样,需要开发后端交互逻辑。

    WebGL最大的特点就是可以很方便地访问Server端的本地资源。特别是对于一些嵌入式设备,例如,路由器。WebGL可以替代路由器的配置H5页面,它可以方便地修改盒子内配置文件,硬件参数的修改。还能运行一些实时的状态监测软件。当然未来可以还有更多的丰富应用可以开发。



  • @linbin823 现在可能做的是1对1的视频直播。希望能够推出新的技术,支持1对多的视频直播,那样用途就更广泛了。



  • @jiangcaiyang123 是的,510版只有单开。但是我得到的消息是,511就会有多开功能。这还成为战胜Html的一个卖点。



  • 这个很神奇呀!!!



  • @linbin823 我也希望有新的技术,将Qt客户端的技术向Html5的技术衔接。



  • @linbin823 好奇一下,你从哪里得到的“消息”?



  • @linbin823Qt WebGL Streaming Plugin介绍 中说:

    Qt WebGL

    Qt WebGL 和WebASM的不同点在哪里??前者交互性更强一点、更偏重3D?



  • @stlcours 实现方式不同。WebGL Streaming Plugin将OpenGL绘图指令变成二进制流传输给远程的浏览器进行渲染。因为OpenGL被设定为C-S模式,也就是说客户端和服务器可以不是在一台机器上的。结合了Chromium这个广泛使用的浏览器,WebGL Streaming技术得以普及。



  • WebGL Streaming Plugin,在测试阶段有很多人问怎么操作。作者的用途是把它放到包含chrome的嵌入式板子上。所以并发性能并不是需要关心的。但是我们还是希望以后能够提升并发性,这样一种新的直播形式就可以诞生了。



  • 请问一下如果原Qt桌面软件支持拖拽外部文件进去(比如把在用资源管理器里的一张图片拖拽到软件界面上就会显示这张图片),转成Webassembly之后这种拖拽操作还是否有效?劳烦大佬帮我试试看,可以的话我就学QML了


Log in to reply
 

走马观花

最近的回复

  • 诶 没有Linux吗??

    read more
  • 萌梦 男孩,女孩,和蛋

    menghome.png

    read more
  • 设计模式-工厂模式

    使用qt/qml来演示设计模式效果,便于学习理解

    1)定义创建对象的接口,封装对象的创建
    2)使具体化类的工作延迟到工厂子类中

    bg.png
    image.png

    1. 工厂类

    createProduct使用了参数来选择要创建哪个产品

    #ifndef FACTORY_H #define FACTORY_H #include <QObject> class Product; class QString; class Factory: public QObject { Q_OBJECT public: virtual ~Factory() = 0; virtual Product* createProduct(QString type) = 0; protected: Factory(); }; class ConcreteFactory: public Factory { Q_OBJECT public: ~ConcreteFactory(); ConcreteFactory(); public slots: Product* createProduct(QString type); }; #endif // FACTORY_H #include "factory.h" #include "product.h" #include <QtQml/qqml.h> Factory::~Factory() { } Factory::Factory() { qmlRegisterType<Product>("Product", 1, 0, "Product"); } ConcreteFactory::~ConcreteFactory() { } ConcreteFactory::ConcreteFactory() { } Product *ConcreteFactory::createProduct(QString type) { if(type == "boy") return static_cast<Product *>(new ConcreteProduct1()); else if(type == "girl") return static_cast<Product *>(new ConcreteProduct2()); return static_cast<Product *>(new ConcreteProduct1()); } 2 产品类

    一个产品是萌梦男,一个产品是萌梦女

    #ifndef PRODUCT_H #define PRODUCT_H #include <QObject> class Product: public QObject { Q_OBJECT public: virtual ~Product() = 0; Q_PROPERTY(QString icon READ icon NOTIFY iconChanged) QString m_icon; QString icon() const { return m_icon; } signals: void iconChanged(QString icon); protected: Product(); signals: public slots: }; class ConcreteProduct1: public Product { Q_OBJECT public: ~ConcreteProduct1(); ConcreteProduct1(); }; class ConcreteProduct2: public Product { Q_OBJECT public: ~ConcreteProduct2(); ConcreteProduct2(); }; #endif // PRODUCT_H #include "product.h" Product::~Product() { } Product::Product() { } ConcreteProduct1::~ConcreteProduct1() { } ConcreteProduct1::ConcreteProduct1() { m_icon = "qrc:/images/boy.png"; } ConcreteProduct2::~ConcreteProduct2() { } ConcreteProduct2::ConcreteProduct2() { m_icon = "qrc:/images/girl.png"; } 3. main.qml

    使用timer,canvas,listview等实现一个自动化生产的动画效果

    源代码

    Fork me on Gitee

    read more
  • blender建模 章鱼
    捕获2.PNG 😵

    read more

关注我们

微博
QQ群