Porting QML to JS/HTML5

Philius

That JavaScript trap link you posted got me to thinking.

If I'm going to write a facility that can substitute native code for a JavaScript url (or several) then it could be put to use to allow arbitrary substitutions, as the link describes.

Maybe this could be a general purpose plugin that can have wider applications.

I'll start a thread called "JavaScript override" to discuss it.

Philius

While taking a break I read up on the SVG specification.

http://www.w3.org/AudioVideo/

I'm not QML savvy, but does it have anything in common with SMIL?

Would "porting" it there make sense?

I'm thinking of porting QtJs there too.

Philius

Have you looked at emscripten? http://emscripten.org/

It's a c++ to JavaScript converter!

I posted a message to the blog site about QtJs http://syntensity.blogspot.com/2011/07/emscripten-15.html

I hope this helps.

trusktr

Any progress on this???

Philius

Sorry for leaving this to stagnate.
I'm not in the loop regarding QML, but "Qt for Google native client":http://qt-project.org/wiki/Qt_for_Google_Native_Client is the way I'm going.

lpaimen

As for the qmlweb project (porting qml to standard web browser), the project has been semi-active for a while now. It recently got second contributor, so it's not just me anymore. More developers are of course welcome.

You can run very simple QML apps with the engine, but it is not yet production quality. It supports standard browsers (most post-IE8), and works for example on PS3 and iPad browsers.

Demo app -- slides written as QML application -- is available at
http://tinyurl.com/qmlslides
and code from
https://gitorious.org/qmlweb

trusktr

@lpaimen I'm writing a QML app and it will also have an HTML5 version. A tool like this would be so handy. I'll have to check it out and possibly contribute.

lpaimen

@trusktr Well but that would be excellent! I've been slow with this project but Anton (co-dev) has been steadily contributing improvements here and there. Since November he has been reworking bindings/property system, introduced DOM-based rendering frontend, support for Repeaters and so on, all kinds of exciting and neato stuff.

But still the code ain't ready. The best way to get going is probably scratch your own itch -- try your QML app with the qmlweb engine and see what is missing and start hacking. Then just drop us a mail and we add you to qmlweb gitorious.org team to get your code into mainline :P

trusktr

Sweet. Was it rendered in canvas previously? If so, 2D or 3D context?

Just an idea (not sure if you already considered it) but perhaps the qmlweb renderer can be written using mrdoob's three.js (http://threejs.org) .

Using three.js would mean that the qmlweb renderer could be written in a single code base using the three.js drawing API. Someone using qmlweb could specify for qmlweb to use the Canvas2D renderer, the WebGL renderer, or the CSS3D renderer. The internals of three.js would handle how stuff is rendered in each mode. All we'd need to worry about is writing the qmlweb renderer using the three.js drawing API.

Here's an amazing WebGL example:
http://threejs.org/examples/#webgl_animation_cloth

An amazing Canvas2D example:
http://threejs.org/examples/#canvas_geometry_birds

and an amazing CSS3D example:
http://threejs.org/examples/#css3d_periodictable

2D stuff (e.g. for user interfaces) would basically just be done by creating a camera that doesn't move. It can be aimed downward facing the X-Y plain at 90 degrees, then 2D objects can be drawon on the XY plain, while giving them Z values that have tiny differences from each other to create layers. E.g. Z=0 for the base layer, Z=0.00001 for the next layer, etc.

Using three.js would then mean that the 3D parts of Qt QML could also be rendered. 3D effects could also be added to "2D" user interfaces (e.g. new screen could zoom in or out, anything you can do with the QML 3D stuff).

There's also the pixi.js library, that specializes in 2D graphics and uses WebGL for hardware acceleration, with a Canvas2D fallback for deices without WebGL. This might be easier to use initially for QML 2D interfaces, but it might be a barrier for 3D QML.
There's plenty of other 2D libraries: http://stackoverflow.com/questions/11456758/is-there-at-two-js-counterpart-to-three-js

What is your thought on using a library like three.js for rendering?

trusktr

Update: I just discovered "asm.js":http://asmjs.org/.

So what does this mean for Qt on the web?

It means you'll be able to compile your Qt apps for any HTML5 browser, taking advantage of WebGL for hardware acceleration.

What is asm.js?

asm.js lets you compile C++ to JavaScript (using only a subset of the JavaScript language). Firefox's new OdinMonkey JavaScript engine is designed to read the subset of JavaScript that C/C++ apps are compiled to, and will compile the JavaScript to an assembly like machine code right in your browser, so JavaScript apps compiled from C/C++ can run a lot closer in performance to native apps, all in your browser.

Apps compiled with asm.js run up to 500% faster in OdinMonkey than in Google's V8 using Ahead of Time (AOT) compiling instead of Just in Time (JIT) compiling (but it's only a matter of time before Google comes out with their own competitor to OdinMonkey).

As a proof of concept, the Unreal engine has been ported over using asm.js. Try the amazing "demo":http://unrealengine.com/html5.

Here's "Qt AnimatedTiles":http://vps2.etotheipiplusone.com:30176/redmine/emscripten-qt-examples/animatedtiles.html running right in your browser (but not using WebGL).

@lpaimen, what are your thoughts on this? It might be easier to go this route.

lpaimen

On some recent changes, Qmlweb project is now a KDE playground project, the latest code being at https://projects.kde.org/projects/playground/www/qmlweb . Anton has taken over the project (I didn't find time).

Anton is also doing a presentation of this project in Qt Developer Days 2013 (in Berlin). If you are going, remember to check it out!

--

When apps need some rectangles, texts and images -- maybe with rotation at most -- DOM does OK. DOM additionally provides a input that supports copy&paste. DOM or 2D canvas does not drop my eyes with greatest 3D transitions ever invented. On other hand, I get a good feeling when I get HTML5-capable device into my hands and the stuff runs there (even remotely). Device like PS3, N9, iPad or IE.

WebGL/three.js have their strengths and weaknesses. If QML apps need the strengths and don't mind the weaknesses, using these serve the project well.

I think the strengths of WebGL/three.js are the graphical capabilities and the weaknesses browser support and input element.

--

Unreal engine demo is amazing yes. I got it running only on FF but it made me forget it is running in a browser. That is a good thing for a browser demo.

Qt AnimatedTiles worked in Opera as well, downloaded about 10 seconds and started up in like 5 on my laptop. The performance was OK (~15fps) on Chrome. I wonder what numbers would be with qmlweb or standard HTML5 approach.

Emscripten+asm.js (recompiling Qt to JS) is easy route, I think someone should take it and come up with results on running QML with it. Initially it might not perform very well but there will be plenty of low hanging fruits to optimize. Eventually it might perform OK. The codebase will be big due to compilation. Also, the more you depend on speedup provided by asm.js, the more you depend on it breaking into browser mainstream.

trusktr

Hey guys, Hey guys!! So Famo.us 0.3.0 is coming out this month (http://famo.us). The goals of the project are amazing. Basically they've created a scene graph for the web. The version after 0.3.0 will blow your mind, mixing regular DOM with WebGL shaders...

Anyway, I think that QMLWeb can take some inspiration from what Famo.us is doing, and if it did, and competed with Famo.us, QML for the web would drastically increase exposure to Qt and do huge things for the world.