Qt：终于来了！基于QML和WebGL开发网页端

序言

Qt早在今年2月，就发布了WebGL相关的blog
http://blog.qt.io/blog/2017/02/22/qt-quick-webgl-streaming/
并且预计5.10加入这个feature

10个月过去了，Qt在12月7号如约发布了5.10，其中包含了WebGL的插件

一开始没反应过来，过了好几天才想起来这件事，于是乎马上行动起来，来当下小白鼠。

---

关于WebGL和QML

基于Qt的QML，继承了Qt强大的跨平台能力。而OpenGL/ES，更是为QML提供了强大的底层，让QML开发的程序可以使用GPU加速。摆脱传统基于CPU去渲染的程序中各种弊端。
但是传统OpenGL/ES，意味着QML开发的程序要以“程序”的方式存在，而如今新的WebGL的扩展意味着QML开发的程序可以直接在到浏览器中使用。
ps：WebGL底层也是OpenGL/ES，请注意区分

但是，可以在浏览器中使用不意味着程序是跑在浏览器上的。
准确的说，程序逻辑任然运行在本地，在Windows上就是以exe形式存在。而渲染，则是在浏览器中的WebGL进行。

而二者的工作方式，官方是这样描述的：

The application running on a remote computer will serialize all GL calls to binary data and sends it using the web socket connection.
The local browser will send the event (mouse, touch or keyboard) to the remote application, so user interaction is allowed. Even multi-touch support! (up to 6 fingers):

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

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

---

环境配置

系统：Ubuntu 17.04 64bit
Qt：qt-everywhere-src-5.10.0.tar.xz

我的系统中没有单独安装的Qt，环境比较纯净，安装好系统后就update/upgrade，还有安装了一些编译要用的包，然后就去编译Qt了。

我的配置参数如下：

./configure -prefix "/usr/local/qt/qt5.10.0" -release -qt-sqlite -qt-zlib -qt-pcre -qt-libpng -qt-libjpeg -qt-freetype -opengl es2 -opensource -confirm-license -nomake tools -nomake examples -nomake tests -skip qt3d -skip qtcanvas3d -skip qtcanvas3d -skip qtdatavis3d -skip qtlocation -skip qtwayland -skip qtwebchannel -skip qtwebengine -skip qtwebview -skip qtwinextras

注意：-opengl es2是一个重要的配置参数，要使用WebGL的话必须是es2

另外我这里直接运行会少字体，所以我手动拷贝了一个字体到：/usr/local/qt/qt5.10.0/lib/fonts

---

运行

我运行了Qt的一个示例，名字是calqlatr，在Ubuntu下直接运行效果是这样的：

找到编译好的二进制文件，使用以下参数在终端运行

./calqlatr -platform webgl:port=12345

输入回车运行程序，然后在浏览器中直接访问就行了。

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

打开浏览器中，根据IP和监听的端口，输入 http://10.0.1.77:12345 进行访问，效果如下：

macOS中Safari：

iPhone中Safari：

iPad中Safari：

Windows中Chrome：

Ubuntu中Firefox：

怎么样，如果觉得用这些浏览器还是不给力，毕竟现在很多人都是微信和支付宝来浏览一些H5页面。那么：

iOS微信端：

iOS支付宝端：

微信和支付宝，也是没有问题的。

ps：以上所有网页和浏览器，我没有做过任何兼容性适配，比如说布局、大小、字体、动画等。我只是把一个普通的QML应用，直接以platform webgl方式启动。

---

总结

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

在我实验的几次中，就出现了崩溃的问题。有的浏览器也打不开，比如说Windows下的Edge，打开直接就是黑的，也没提示。

这些方面，只能说期待Qt在后面一步步完善，相信肯定可以越做越好的。

感叹，Qt这一次真的是走了一大步，填补了一片空白，可以说Qt做跨平台，终于跨到了浏览器这个平台上面。

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