終于來了！基于QML和WebGL開發(fā)網(wǎng)頁端
時間：2022-08-30 16:15:01 | 來源：網(wǎng)站運營
時間：2022-08-30 16:15:01 來源：網(wǎng)站運營
Qt早在今年2月，就發(fā)布了WebGL相關(guān)的blog
http://blog.qt.io/blog/2017/02/22/qt-quick-webgl-streaming/并且預(yù)計5.10加入這個feature
10個月過去了，Qt在12月7號如約發(fā)布了5.10，其中包含了WebGL的插件
一開始沒反應(yīng)過來，過了好幾天才想起來這件事，于是乎馬上行動起來，來當(dāng)下小白鼠。
基于Qt的QML，繼承了Qt強(qiáng)大的跨平臺能力。而OpenGL/ES，更是為QML提供了強(qiáng)大的底層，讓QML開發(fā)的程序可以使用GPU加速。擺脫傳統(tǒng)基于CPU去渲染的程序中各種弊端。
但是傳統(tǒng)OpenGL/ES，意味著QML開發(fā)的程序要以“程序”的方式存在，而如今新的WebGL的擴(kuò)展意味著QML開發(fā)的程序可以直接在到瀏覽器中使用。
ps：WebGL底層也是OpenGL/ES，請注意區(qū)分
但是，可以在瀏覽器中使用不意味著程序是跑在瀏覽器上的。
準(zhǔn)確的說，程序邏輯任然運行在本地，在Windows上就是以exe形式存在。而渲染，則是在瀏覽器中的WebGL進(jìn)行。
而二者的工作方式，官方是這樣描述的：
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的調(diào)用會由程序端發(fā)起，通過web socket發(fā)送給瀏覽器，讓瀏覽器調(diào)用WebGL進(jìn)行渲染。
而鼠標(biāo)、觸摸和鍵盤這類事件，則是通過瀏覽器接收，再發(fā)送給程序端處理。
另外這也意味著，用這個的方式在瀏覽器中訪問QML程序，一次也只有一個實例化的對象。換句話說一個程序只能服務(wù)于一個瀏覽器的瀏覽，不支持多個瀏覽器同時訪問。
系統(tǒng)：Ubuntu 17.04 64bit
Qt：qt-everywhere-src-5.10.0.tar.xz
我的系統(tǒng)中沒有單獨安裝的Qt，環(huán)境比較純凈，安裝好系統(tǒng)后就update/upgrade，還有安裝了一些編譯要用的包，然后就去編譯Qt了。
我的配置參數(shù)如下：
./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是一個重要的配置參數(shù)，要使用WebGL的話必須是es2
另外我這里直接運行會少字體，所以我手動拷貝了一個字體到：/usr/local/qt/qt5.10.0/lib/fonts
我運行了Qt的一個示例，名字是calqlatr，在Ubuntu下直接運行效果是這樣的：
找到編譯好的二進(jìn)制文件，使用以下參數(shù)在終端運行
./calqlatr -platform webgl:port=12345輸入回車運行程序，然后在瀏覽器中直接訪問就行了。
也就是說對于這個程序，無需對源碼做任何修改，只需要在運行時指定platform為webgl即可支持在瀏覽器中使用。
打開瀏覽器中，根據(jù)IP和監(jiān)聽的端口，輸入
http://10.0.1.77:12345 進(jìn)行訪問，效果如下：
macOS中Safari：
iPhone中Safari：
iPad中Safari：
Windows中Chrome：
Ubuntu中Firefox：
怎么樣，如果覺得用這些瀏覽器還是不給力，畢竟現(xiàn)在很多人都是微信和支付寶來瀏覽一些H5頁面。那么：
iOS微信端：
iOS支付寶端：
微信和支付寶，也是沒有問題的。
ps：以上所有網(wǎng)頁和瀏覽器，我沒有做過任何兼容性適配，比如說布局、大小、字體、動畫等。我只是把一個普通的QML應(yīng)用，直接以platform webgl方式啟動。
WebGL目前仍然是一個技術(shù)預(yù)覽狀態(tài)（目前是Qt5.10.0），肯定達(dá)不到產(chǎn)品級效果，穩(wěn)定性、性能和各種細(xì)節(jié)也欠佳。
在我實驗的幾次中，就出現(xiàn)了崩潰的問題。有的瀏覽器也打不開，比如說Windows下的Edge，打開直接就是黑的，也沒提示。
這些方面，只能說期待Qt在后面一步步完善，相信肯定可以越做越好的。
感嘆，Qt這一次真的是走了一大步，填補(bǔ)了一片空白，可以說Qt做跨平臺，終于跨到了瀏覽器這個平臺上面。
沒想到我這個學(xué)C++的人，竟然可以依靠QML去開發(fā)網(wǎng)頁了。
在線咨詢
