Reduce unnecessary overdraw on examples

Using both full screen opaque canvas and background Rectangle item
causes one unnecessary fullscreen fill. Changed Rectangles to Items
and used window background color instead, which is the recommended way.

Change-Id: Ia2689fcafba7b66333f5e98574c28566faba4764
Reviewed-by: Tomi Korpipää <tomi.korpipaa@theqtcompany.com>
Reviewed-by: Pasi Keränen <pasi.keranen@digia.com>

16 files changed, 16 insertions, 16 deletions

diff --git a/examples/canvas3d/canvas3d/framebuffer/main.cpp b/examples/canvas3d/canvas3d/framebuffer/main.cpp
index dc9ef5c..b516e40 100644
--- a/examples/canvas3d/canvas3d/framebuffer/main.cpp
+++ b/examples/canvas3d/canvas3d/framebuffer/main.cpp
@@ -59,6 +59,7 @@ int main(int argc, char *argv[])
 
     viewer.setTitle(QStringLiteral("Render into FrameBuffer"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor("#f2f2f2");
     viewer.show();
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
index f268682..397cca2 100644
--- a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
+++ b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/framebuffer.js
@@ -75,7 +75,7 @@ function initializeGL(canvas, textureLoader) {
     canvas3d = canvas
     try {
         // Get the OpenGL context object that represents the API we call
-        gl = canvas.getContext("canvas3d", {depth:true, antialias:true});
+        gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
 
         // Setup the OpenGL state
         gl.enable(gl.DEPTH_TEST);
diff --git a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
index ba23f26..68798cd 100644
--- a/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
+++ b/examples/canvas3d/canvas3d/framebuffer/qml/framebuffer/main.qml
@@ -41,12 +41,11 @@ import QtQuick.Layouts 1.0
 
 import "framebuffer.js" as GLCode
 
-Rectangle {
+Item {
     id: mainview
     width: 1280
     height: 768
     visible: true
-    color: "#f2f2f2"
 
     Canvas3D {
         id: canvas3d
diff --git a/examples/canvas3d/canvas3d/interaction/main.cpp b/examples/canvas3d/canvas3d/interaction/main.cpp
index 05e00a0..91da80e 100644
--- a/examples/canvas3d/canvas3d/interaction/main.cpp
+++ b/examples/canvas3d/canvas3d/interaction/main.cpp
@@ -59,6 +59,7 @@ int main(int argc, char *argv[])
 
     viewer.setTitle(QStringLiteral("Interaction"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor("#fafafa");
     viewer.show();
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js b/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
index e8ca513..11ff079 100644
--- a/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
+++ b/examples/canvas3d/canvas3d/interaction/qml/interaction/interaction.js
@@ -86,7 +86,7 @@ function initializeGL(canvas) {
 
         // Get the OpenGL context jsonObj that represents the API we call
         log("Getting Context");
-        gl = canvas.getContext("canvas3d", {depth:true, antialias:true});
+        gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
         log("Context received "+gl);
 
         var contextConfig = gl.getContextAttributes();
diff --git a/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml b/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
index 1836c47..88e9b31 100644
--- a/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
+++ b/examples/canvas3d/canvas3d/interaction/qml/interaction/main.qml
@@ -43,12 +43,11 @@ import QtQuick.Layouts 1.0
 
 import "interaction.js" as GLCode
 
-Rectangle {
+Item {
     id: mainview
     width: 1280
     height: 768
     visible: true
-    color: "#fafafa"
 
     Canvas3D {
         id: canvas3d
diff --git a/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
index 8a6dafe..2727cb8 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
@@ -117,7 +117,7 @@ function initializeGL(canvas) {
     canvas3d = canvas
     log("initializeGL...")
     try {
-        gl = canvas.getContext("canvas3d", {depth:true, antialias:true});
+        gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
         log("   Received context: "+gl);
 
         stateDumpExt = gl.getExtension("QTCANVAS3D_gl_state_dump");
diff --git a/examples/canvas3d/canvas3d/textureandlight/main.cpp b/examples/canvas3d/canvas3d/textureandlight/main.cpp
index d2472a2..9dfb4bf 100644
--- a/examples/canvas3d/canvas3d/textureandlight/main.cpp
+++ b/examples/canvas3d/canvas3d/textureandlight/main.cpp
@@ -69,6 +69,7 @@ int main(int argc, char *argv[])
 
     viewer.setTitle(QStringLiteral("Textured and Lit Cube"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor("#fafafa");
     viewer.show();
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/main.qml b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/main.qml
index bb951b4..cd308bf 100644
--- a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/main.qml
+++ b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/main.qml
@@ -41,12 +41,11 @@ import QtCanvas3D 1.0
 import "textureandlight.js" as GLCode
 //! [4]
 
-Rectangle {
+Item {
     id: mainview
     width: 1280
     height: 768
     visible: true
-    color: "#fafafa"
 
     //! [0]
     Canvas3D {
diff --git a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
index d80cb8f..4c1a522 100644
--- a/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
+++ b/examples/canvas3d/canvas3d/textureandlight/qml/textureandlight/textureandlight.js
@@ -63,7 +63,7 @@ function initializeGL(canvas) {
     canvas3d = canvas;
     //! [1]
     // Get the OpenGL context object that represents the API we call
-    gl = canvas.getContext("canvas3d", {depth:true, antialias:true});
+    gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
     //! [1]
 
     //! [2]
diff --git a/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/cellphone.js b/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/cellphone.js
index 42c7e52..160ae4e 100644
--- a/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/cellphone.js
+++ b/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/cellphone.js
@@ -98,8 +98,7 @@ function initializeGL(canvas, textureSource) {
     }
 
     renderer = new THREE.Canvas3DRenderer(
-                { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio,
-                  alpha: true});
+                { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio });
     renderer.setSize( canvas.width, canvas.height );
 
     // The cellphone meshes were created using a third party tool (Blender).
diff --git a/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/main.qml b/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/main.qml
index 5598478..ad27b16 100644
--- a/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/main.qml
+++ b/examples/canvas3d/canvas3d/threejs/cellphone/qml/cellphone/main.qml
@@ -45,6 +45,7 @@ Window {
     height: initialHeight
     visible: true
     title: "Interactive Mobile Phone Demo"
+    color: "black"
 
     //! [0]
     Item {
diff --git a/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp b/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp
index 112cc20..b68136a 100644
--- a/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/main.cpp
@@ -59,6 +59,7 @@ int main(int argc, char *argv[])
 
     viewer.setTitle(QStringLiteral("One Qt"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor(QColor("#FCFCFC"));
     viewer.show();
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml
index cc1a16c..0bf6ace 100644
--- a/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml
+++ b/examples/canvas3d/canvas3d/threejs/oneqt/oneqt.qml
@@ -38,13 +38,12 @@ import QtQuick 2.0
 import QtCanvas3D 1.0
 import QtQuick.Layouts 1.1
 
-Rectangle {
+Item {
     id: mainview
     width: 1280
     height: 768
     visible: true
     focus: true
-    color: "#FCFCFC"
 
     Keys.onPressed: {
         if (event.key === Qt.Key_1) imageCube.state = 'image1';
diff --git a/examples/canvas3d/canvas3d/threejs/planets/main.cpp b/examples/canvas3d/canvas3d/threejs/planets/main.cpp
index 59b10c6..61ca3fc 100644
--- a/examples/canvas3d/canvas3d/threejs/planets/main.cpp
+++ b/examples/canvas3d/canvas3d/threejs/planets/main.cpp
@@ -59,6 +59,7 @@ int main(int argc, char *argv[])
 
     viewer.setTitle(QStringLiteral("Qt Canvas 3D Examples - Planets"));
     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.setColor(Qt::black);
     viewer.show();
 
     return app.exec();
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.qml b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
index e5c1578..9699590 100644
--- a/examples/canvas3d/canvas3d/threejs/planets/planets.qml
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
@@ -39,12 +39,11 @@ import QtCanvas3D 1.0
 
 import "planets.js" as GLCode
 
-Rectangle {
+Item {
     id: mainview
     width: 1280
     height: 768
     visible: true
-    color: "black"
     property int focusedPlanet: 100
     property int oldPlanet: 0
     property real xLookAtOffset: 0