Back to Blog home

Introducing Qt Canvas3D

Published on Wednesday May 27, 2015 by Pasi Keränen in qt quick 3D Canvas3D Qt 5.5 | Comments

Qt Canvas3D is a fully supported Qt module starting from Qt 5.5. Just like WebGL, Canvas3D offers a low level OpenGL-like API that enables you to execute 3D drawing commands from JavaScript. It allows easy porting of WebGL content from HTML to Qt Quick or even sharing the same WebGL code between Qt Quick and HTML applications.

WebGL is a 3D rendering API defined by Khronos Group and has been gaining momentum in the HTML world. It has also been fostering innovation and development of various libraries like three.js, Scene.js and applications like the 3D view of Google Maps. Qt Canvas3D brings a WebGL-like 3D rendering API to Qt Quick JavaScript, enabling the developers to port existing WebGL based assets to Qt Quick to applify their content or to create new 3D content using skills and libraries from the WebGL development world they may already know. It is also very easy to enhance the 3D content with the Qt Quick animations and transition enablers to create interactive 3D experiences that connect to application logic seamlessly and provide beautiful, smoothly animated 3D visualizations.

Since conformance tests for WebGL are pure HTML pages, Canvas3D is not yet WebGL conformant in that it doesn’t pass the official Khronos WebGL API conformance tests. However, we're in the process of porting those to run on top of Canvas3D and we are selectively fixing conformance issues as we find them. Since the WebGL specification, as it stands today, is tightly coupled with the HTML object system, which doesn’t exist within Qt Quick environment, we’re not sure if we will be able to claim full conformance. However, fortunately based on our experience, this specification language difference doesn’t prevent easy porting or sharing WebGL code between Qt Quick and HTML applications.

Canvas3D Planets example, implemented with three.js and Qt Canvas3D Screenshot of Canvas3D Planets example included in Qt 5.5

Simple Example

A very simple example of Canvas3D that just paints the screen with a random color could look something like this:

import QtCanvas3D 1.0

Canvas3D {
id: canvas3d
anchors.fill: parent
focus: true
property var gl

onInitializeGL: {
gl = canvas3d.getContext("experimental-webgl");

// Setup clear color to be a random color
gl.clearColor(Math.random(), Math.random(), Math.random(), 1.0);

// Setup viewport
gl.viewport(0, 0, canvas3d.width * canvas3d.devicePixelRatio, canvas3d.height * canvas3d.devicePixelRatio);
}

onPaintGL: {
// Clear background to current clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}

onResizeGL: {
var pixelRatio = canvas3d.devicePixelRatio;
canvas3d.pixelSize = Qt.size(canvas3d.width * pixelRatio, canvas3d.height * pixelRatio);
if (gl)
gl.viewport(0, 0, canvas3d.width * canvas3d.devicePixelRatio, canvas3d.height * canvas3d.devicePixelRatio);
}
}

For those of you who are familiar with QOpenGLWidget this should look pretty familiar, as we've tried to keep the names of the signals aligned with the name of the QOpenGLWidget method names.

If you have tried the technology preview versions of Canvas3D, the final version differs in that Qt 5.5 now includes built-in support for JavaScript typed arrays. This means that the Canvas3D API can now get the data needed for 3D rendering more efficiently and with reduced memory footprint. In addition Canvas3D has been better integrated with the Qt Quick JavaScript engine and this shows as better performance. Your mileage may of course vary as this all depends on the content, but we have seen applications that were running around 45-50 fps with TP 1 reaching 59-60 fps with Canvas3D in Qt 5.5.

three.js

As the Canvas3D API is very low level, you may find the three.js library useful in getting started. I maintain a port of three.js on top of Canvas3D at https://github.com/tronlec/three.js. The port includes a few of the three.js examples ported to run on top Canvas3D. These should give you an idea how to get three.js based content to run within Qt Quick on top of Canvas3D. We've tried to make the process as simple as possible by porting also some of the utilities included in the three.js examples to Canvas3D as many web content builders use these as well. If you visited our booth in Berlin Qt DevDays last year you may have spotted the award winning WebGL CarVisualizer application demo by Plus 360 Degrees running on top of Canvas3D prototype with just few days of effort. We even added some animations like the different fixed camera angle with transitions and animated color transitions when selecting the color of the car.

Car Visualizer application by Plus 360 Degrees, ported to run on top of Qt Canvas3D. WebGL Car Visualizer application by Plus 360 Degrees, ported to run on top of Qt Canvas3D.

More Info

Canvas3D has been included in the Qt 5.5 Beta, you can check out the documentation at http://doc-snapshots.qt.io/qt5-5.5/qtcanvas3d-index.html

Our next blog on Canvas3D will show you how you can get started with porting three.js content so that you can run your code on top of Canvas3D.

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.