Running Qt Applications in a Browser Using the WebGL Plugin

An interesting feature that came in Qt 5.10 is a new Qt back-end that uses WebGL for rendering. This allows Qt applications (with some restrictions) to run in a web browser that supports WebGL.

What it is?

The new back-end uses WebGL, which stands for Web Graphic Library . WebGL is a JavaScript API for rendering 2D and 3D graphics in any compatible web browser without the use of plugins. The API is similar to OpenGL ES 2.0 and can be used on HTML5 canvas elements.

The new back-end will be introduced as a technical preview feature in Qt 5.10.0 and included in Alpha and Beta versions (Currently, Qt 5.10.0 is a beta version in Phase 1).

Latest source code is also available in Qt git at http://code.qt.io/cgit/qt/qtwebglplugin.git/ .

The plugin is distributed either under the GPLv3 license or under commercial licenses. Please note that it is not available in the LGPL. One of the consequences of the GPL license is that if you link to it (even dynamically), your application code is covered by the GPL.


How to use it

Let's assume that you have built Qt 5.10 with the WebGL plugin, the plugin will be available as a back-end. To use it, pass the -platform webgl option to your application and then open a web browser at http://localhost:8080/ .

The plugin supports the configuration of the network port used by the built-in HTTP server. If you want to use the default HTTP port, you can, for example, use the -platform webgl:port=80 option.

The plugin is installed in QTDIR /plugins/platforms/libqwebgl.so (the path is similar on Windows).

Limits

With the Alpha and Beta 1 releases of Qt 5.10.0, the WebGL plugin worked successfully on an Ubuntu Linux 17.04 system using the Chromium browser.

It should work with other browsers that support WebGL, including mobile and embedded browsers. It is suggested that you can also run it in a QtWebEngine view instead of a regular browser. There is no documentation yet (because it's only Beta 1), except for a few blog posts.

The plugin only supports QML applications. It is unknown if it will support widgets. According to the developers, widget support will be difficult to achieve with good performance because they rely on rasterization.

You might think that running in a browser means that the application will run in a sandbox and not be able to access any resources outside the browser, such as files. However, the browser only renders, and the application itself runs like a normal application (however, it may not run on the same computer as the display).

An experience

As of Qt 5.10.0 Beta 1, the few QML examples that have been tried have worked reasonably well. Some of them ran into some issues and some didn't start at all. Here are screenshots of several examples.

Qt Quick Controls Text Editor:

Qt Quick Controls Gallery:

QML Photoviewer:

SameGame:

Conclusion

In the past, the decision to develop an application that can run natively or in a web browser usually involved using vastly different strategies (eg using Qt/QML versus using HTML5). Assuming the WebGL plugin becomes stable and complete, it will offer an attractive approach for developing web applications using Qt and for turning a QML-based native Qt application into a web application with minimal effort. However, be aware of the licensing implications when deciding whether to use the commercial or open source version of Qt.

I'm looking forward to the WebGL plugin being documented and more complete in Qt 5.10.0 release later this year

Links

  1. http://blog.qt.io/blog/2017/10/09/qt-5-10-beta-released/
  2. http://blog.qt.io/blog/2017/09/13/qt-5-10-alpha-released/
  3. http://blog.qt.io/blog/2017/02/22/qt-quick-webgl-streaming/
  4. http://blog.qt.io/blog/2017/07/07/qt-webgl-streaming-merged

Article written by: Jeff Tranter Wednesday, October 25, 2017

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

Comments

Only authorized users can post comments.
Please, Log in or Sign up
OI

C++ - Test 001. The first program and data types

  • Result:40points,
  • Rating points-8
AD

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
m

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:80points,
  • Rating points4
Last comments
ИМ
Игорь МаксимовNov. 22, 2024, 7:51 p.m.
Django - Tutorial 017. Customize the login page to Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii LegotckoiOct. 31, 2024, 9:37 p.m.
Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZEOct. 19, 2024, 3:19 p.m.
Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь МаксимовOct. 5, 2024, 2:51 p.m.
Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas5July 5, 2024, 6:02 p.m.
QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Now discuss on the forum
n
nklyDec. 27, 2024, 7:41 p.m.
Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. У меня есть Представление QTreeView и древовидная модель QStandardItemModel подключенная к представлению. Итемы в модели QStandardItem. В разных ветках дерева могут быть элементы с одинаковым им…
Evgenii Legotckoi
Evgenii LegotckoiJune 24, 2024, 10:11 p.m.
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
t
tonypeachey1Nov. 15, 2024, 2:04 p.m.
google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
NSProject
NSProjectJune 4, 2022, 10:49 a.m.
Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

Follow us in social networks