Jesús Fernández

Qt WebGL: Cinematic Experience

Published Tuesday November 14th, 2017
15 Comments on Qt WebGL: Cinematic Experience
Posted in Dev Loop, Qt Quick | Tags: , , ,

Following the previous blog posts related to the Qt WebGL plug-in development updates, we have some features to show.

As a quick recap: Qt WebGL QPA plug-in is a new platform plug-in which will allow your Qt Quick applications to be streamed and ran directly into the browser using streaming of OpenGL calls and rendered in the client using WebGL. For more info, check the related posts below.

After some months of bug-fixing and other improvements, we managed to accomplish some cool stuff. Take a look at one of our good old demos – Qt Cinematic Experience, running remotely on a TV Web Browser:

In the video, you can see the demo running remotely on the built-in web browser of a usual TV. For the interaction with the application, I’m using the ‘extremely fast’ TV remote which is interpreted as a mouse device. This shows that you can use the WebGL streaming plug-in if your application is targeting a smart-device with a browser to try your applications without creating and deploying the application, this can save a lot of development time.

Remember, you’ll be able to test the plug-in in the upcoming Qt 5.10 release. If you find any bug don’t hesitate to report it.

NOTE: If your application is using Text.NativeRendering and your text is not displayed properly, try removing this option.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Dev Loop, Qt Quick | Tags: , , ,


Mehmet says:

How we can use this features on our qt application?

Jesús Fernández Jesús Fernández says:

You need a Qt 5.10 version or you need to build it from sources.

Martin Kutny says:

Awesome. This opens up a whole new possibility of using the UI of a Qt application remotely, without the need of running VNC, RDP or even a desktop session / Xserver. Many use cases come to mind…

I am wondering, how is the performance (FPS, response delay) when running the application and browser on an average laptop (not necessarily the same machine)?

Jesús Fernández Jesús Fernández says:

The FPS depends on the network: Faster network -> Better framerate.

Enver Yılmaz says:

Is this feature can be used for remote support/screen sharing purposes? What I need is to remotely connect to screen of web kiosk which running qt5webengine based application with eglfs QPA and view and/or interact with it for support remotely.

Jesús Fernández Jesús Fernández says:

At this point, screen sharing is not supported. The application is only shown in a browser at the same time.
You can use a Qt WebEngine application to show the application.

It’s possible to “steal” the control and image from a connected client to interact with the app, you will inherit the state from the other user and when you “release” the control the user will be able to continue working.

VRonin says:

Framerate shown in the demo video is pretty underwhelming: 16 FPS. Could you share what system is that running on? is that debug version of the software? what are the possible hardware bottlenecks?

Jesús Fernández Jesús Fernández says:

Network is the bottleneck.

VRonin says:

What network was the video shot on? LAN?

Jesús Fernández Jesús Fernández says:

Over Wi-Fi.

VRonin says:

Sorry if I’m being pedantic. Is it WiFi on a local network or over the internet?

Jesús Fernández Jesús Fernández says:

Local Wi-Fi 🙂

The best way to check the performance is to try it.

@VRonin: Goes without saying, but I’ll say it anyways 🙂 The application itself of course has high impact to the FPS achievable in addition to the network. Cinematic is an application that includes a lot of dynamic behaviour, so most likely the application one would actually create for the remote control use case is more static and thus achieves higher FPS. The example in this blog shows that even highly dynamic applications can run over WebGL.

Dmitry says:

Hello. I was not able to build the WebGL plugin. Where can I find a step-by-step guide to starting using WebGL from the source files? With gratitude, Dmitry.

Jesús Fernández Jesús Fernández says:

Just create a Qt Quick Application and run your application in this way:
./myawesome_app -platform webgl

And type in your browser http://localhost:8080

Leave a Reply

Your email address will not be published.

Get started today with Qt Download now