基于QML和WebGL开发网页端

最新推荐文章于 2025-05-27 00:25:09 发布

转载最新推荐文章于 2025-05-27 00:25:09 发布 · 4k 阅读

文章标签：

#Qt #WebGL #QML

Qt 5.10 版本引入了 WebGL 插件，使得 QML 应用程序能够实现在浏览器中渲染。该插件允许服务端运行程序逻辑，客户端则通过 WebGL 进行画面渲染。这种方式下，应用程序的逻辑仍然在本地运行，而渲染工作则交由浏览器完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Qt发布的5.10版本，其中包含了WebGL的插件，属于无屏设备的显示方案。

QtWebGL：服务端运行应用程序，客户端（即浏览器）负责画面的渲染。使用WebGL的形式传输画面渲染命令。

如今新的WebGL的扩展意味着QML开发的程序可以直接在到浏览器中使用（WebGL底层也是OpenGL/ES，请注意区分）。但是，可以在浏览器中使用不意味着程序是跑在浏览器上的。准确的说，程序逻辑任然运行在本地，在Windows上就是以exe形式存在。而渲染，则是在浏览器中的WebGL进行。

GL的调用会由程序端发起，通过web socket发送给浏览器，让浏览器调用WebGL进行渲染。
而鼠标、触摸和键盘这类事件，则是通过浏览器接收，再发送给程序端处理。

另外这也意味着，用这个的方式在浏览器中访问QML程序，一次也只有一个实例化的对象。换句话说一个程序只能服务于一个浏览器的浏览，不支持多个浏览器同时访问。把一个普通的QML应用，直接以platform webgl方式启动。

具体步骤为：

首先用Qt编译（realse）Qt自带示例程序，进入编译输出的目录，以命令行方式运行； ./calqlatr

以platform webgl方式启动，此时背后已经启动了一个Web服务器，默认监听8080端口，随时准备为客户端提供服务 ./calqlatr platform webgl
找到编译好的二进制文件，使用以下参数在终端运行可修改其监听串口 ./calqlatr -platform webgl:port=12345
输入回车运行程序，然后在浏览器中直接访问就行了。

也就是说对于这个程序，无需对源码做任何修改，只需要在运行时指定platform为webgl即可支持在浏览器中使用。

跨操作系统的情况：
打开浏览器，根据IP和监听的端口，输入 http://192.168.43.158:8080 进行访问。

WebGL目前仍然是一个技术预览状态（目前是Qt5.10.0），肯定达不到产品级效果，稳定性、性能和各种细节也欠佳。

在我实验的几次中，就出现了崩溃的问题。有的浏览器也打不开，比如说Windows下的Edge，打开直接就是黑的，也没提示。
这些方面，只能说期待Qt在后面一步步完善，相信肯定可以越做越好的。
感叹，Qt这一次真的是走了一大步，填补了一片空白，可以说Qt做跨平台，终于跨到了浏览器这个平台上面。

没想到我这个学C++的人，竟然可以依靠QML去开发网页了。