序言

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去開發網頁了。