Using Qt Quick item as Canvas3D texture

Implemented QTCANVAS3D_texture_provider extension for creating
a texture object for QQuickItems that implement texture providers.

[ChangeLog][Renderer] Enabled using Qt Quick items as textures.

Change-Id: I947304155734af50c8a21f34292b244bb099702f
Reviewed-by: Tomi Korpipää <tomi.korpipaa@theqtcompany.com>
Reviewed-by: Laszlo Agocs <laszlo.agocs@theqtcompany.com>
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
Reviewed-by: Pasi Keränen <pasi.keranen@digia.com>

7 files changed, 705 insertions, 1 deletions

diff --git a/examples/canvas3d/canvas3d/canvas3d.pro b/examples/canvas3d/canvas3d/canvas3d.pro
index 978d455..0f603bc 100644
--- a/examples/canvas3d/canvas3d/canvas3d.pro
+++ b/examples/canvas3d/canvas3d/canvas3d.pro
@@ -3,7 +3,7 @@ SUBDIRS += textureandlight \
            framebuffer \
            interaction \
            jsonmodels \
+           quickitemtexture \
            threejs
 
 OTHER_FILES += 3rdparty/*
-
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/doc/src/quickitemtexture.qdoc b/examples/canvas3d/canvas3d/quickitemtexture/doc/src/quickitemtexture.qdoc
new file mode 100644
index 0000000..9db0227
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/doc/src/quickitemtexture.qdoc
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example canvas3d/quickitemtexture
+    \since QtCanvas3D 1.0
+    \title Qt Quick Item as Texture Example
+    \ingroup qtcanvas3d-examples
+    \brief A simple cube with a Qt Quick item as a texture
+
+    The Qt Quick Item as Texture example shows how to use other Qt Quick items as
+    a texture source for Qt Canvas3D textures.
+
+    \image quickitemtexture-example.png
+
+    \section1 Using Qt Quick Item as a Texture
+
+    First we create a \l Rectangle with a label that displays the current frame rate and rotation
+    values of the cube:
+
+    \snippet canvas3d/quickitemtexture/qml/quickitemtexture/main.qml 0
+
+    We want to use the above \l Rectangle as the texture on our 3D cube. As a \l Rectangle item
+    doesn't implement QQuickItem::textureProvider() by itself, we make it layered by setting the
+    \c{layer.enabled} property to \c{true}.
+
+    To create a Canvas3DTexture out of our layered \l{Rectangle}, we create a
+    \l{Canvas3DTextureProvider}{QTCANVAS3D_texture_provider} extension and the texture
+    in the \c initializeGL() function in our JavaScript implementation:
+
+    \snippet canvas3d/quickitemtexture/qml/quickitemtexture/quickitemtexture.js 0
+
+    Once the \c cubeTexture item is created, it can be used like any other texture item in
+    the JavaScript.
+
+    \note The method of creating the texture from a Qt Quick item differs from how one would create
+    texture from an HTML item in WebGL API. Textures created with
+    \l{Canvas3DTextureProvider}{QTCANVAS3D_texture_provider} extension
+    support automatic live updates, without having to call textureImage2D each frame
+    to re-upload fresh texture data from the item.
+*/
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/main.cpp b/examples/canvas3d/canvas3d/quickitemtexture/main.cpp
new file mode 100644
index 0000000..a5264fb
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/main.cpp
@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtGui/QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+
+    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
+
+    return app.exec();
+}
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/main.qml b/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/main.qml
new file mode 100644
index 0000000..27def02
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/main.qml
@@ -0,0 +1,197 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtCanvas3D 1.1
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+import QtQuick.Window 2.2
+
+import "quickitemtexture.js" as GLCode
+
+Window {
+    id: mainview
+    width: 800
+    height: 600
+    visible: true
+    title: "Qt Quick Item as Texture"
+
+    Canvas3D {
+        id: canvas3d
+        anchors.fill:parent
+        focus: true
+        property double xRotAnim: 0
+        property double yRotAnim: 0
+        property double zRotAnim: 0
+        property bool isRunning: true
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            x: 4
+            y: 4
+            //! [0]
+            Rectangle {
+                id: textureSource
+                color: "lightgreen"
+                width: 256
+                height: 256
+                border.color: "blue"
+                border.width: 4
+                layer.enabled: true
+                layer.smooth: true
+                opacity: 0.8
+                Label {
+                    anchors.fill: parent
+                    anchors.margins: 16
+                    text: "X Rot:" + (canvas3d.xRotAnim | 0) + "\n"
+                        + "Y Rot:" + (canvas3d.yRotAnim | 0) + "\n"
+                        + "Z Rot:" + (canvas3d.zRotAnim | 0) + "\n"
+                        + "FPS:" + canvas3d.fps
+                    color: "red"
+                    font.pointSize: 30
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                }
+            }
+            //! [0]
+            Button {
+                Layout.fillWidth: true
+                Layout.minimumWidth: 256
+                text: textureSource.visible ? "Hide texture source" : "Show texture source"
+                onClicked: textureSource.visible = !textureSource.visible
+            }
+            Button {
+                Layout.fillWidth: true
+                Layout.minimumWidth: 256
+                text: "Quit"
+                onClicked: Qt.quit()
+            }
+        }
+
+        // Emitted when one time initializations should happen
+        onInitializeGL: {
+            GLCode.initializeGL(canvas3d, textureSource);
+        }
+
+        // Emitted each time Canvas3D is ready for a new frame
+        onPaintGL: {
+            GLCode.paintGL(canvas3d);
+        }
+
+        onResizeGL: {
+            GLCode.resizeGL(canvas3d);
+        }
+
+        Keys.onSpacePressed: {
+            canvas3d.isRunning = !canvas3d.isRunning
+            if (canvas3d.isRunning) {
+                objAnimationX.pause();
+                objAnimationY.pause();
+                objAnimationZ.pause();
+            } else {
+                objAnimationX.resume();
+                objAnimationY.resume();
+                objAnimationZ.resume();
+            }
+        }
+
+        SequentialAnimation {
+            id: objAnimationX
+            loops: Animation.Infinite
+            running: true
+            NumberAnimation {
+                target: canvas3d
+                property: "xRotAnim"
+                from: 0.0
+                to: 120.0
+                duration: 7000
+                easing.type: Easing.InOutQuad
+            }
+            NumberAnimation {
+                target: canvas3d
+                property: "xRotAnim"
+                from: 120.0
+                to: 0.0
+                duration: 7000
+                easing.type: Easing.InOutQuad
+            }
+        }
+
+        SequentialAnimation {
+            id: objAnimationY
+            loops: Animation.Infinite
+            running: true
+            NumberAnimation {
+                target: canvas3d
+                property: "yRotAnim"
+                from: 0.0
+                to: 240.0
+                duration: 5000
+                easing.type: Easing.InOutCubic
+            }
+            NumberAnimation {
+                target: canvas3d
+                property: "yRotAnim"
+                from: 240.0
+                to: 0.0
+                duration: 5000
+                easing.type: Easing.InOutCubic
+            }
+        }
+
+        SequentialAnimation {
+            id: objAnimationZ
+            loops: Animation.Infinite
+            running: true
+            NumberAnimation {
+                target: canvas3d
+                property: "zRotAnim"
+                from: -100.0
+                to: 100.0
+                duration: 3000
+                easing.type: Easing.InOutSine
+            }
+            NumberAnimation {
+                target: canvas3d
+                property: "zRotAnim"
+                from: 100.0
+                to: -100.0
+                duration: 3000
+                easing.type: Easing.InOutSine
+            }
+        }
+    }
+}
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/quickitemtexture.js b/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/quickitemtexture.js
new file mode 100644
index 0000000..3ac898d
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/quickitemtexture.js
@@ -0,0 +1,365 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+Qt.include("/gl-matrix.js")
+
+//
+// Draws a cube that has a Qt Quick item as decal texture on each face.
+// A simple per vertex lighting equation is used to emulate light landing on the rotating cube.
+//
+
+var gl;
+var cubeTexture = 0;
+var vertexPositionAttribute;
+var textureCoordAttribute;
+var vertexNormalAttribute;
+var mvMatrix = mat4.create();
+var pMatrix  = mat4.create();
+var nMatrix  = mat4.create();
+var pMatrixUniform;
+var mvMatrixUniform;
+var nUniform;
+var width = 0;
+var height = 0;
+var canvas3d;
+var pixelSize;
+var canvasTextureProvider = null;
+var textureSourceItem = null;
+
+function initializeGL(canvas, textureSource) {
+    canvas3d = canvas;
+    textureSourceItem = textureSource;
+
+    // Get the OpenGL context object that represents the API we call
+    gl = canvas.getContext("canvas3d", {depth:true, antialias:true});
+
+    // Setup the OpenGL state
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LESS);
+    gl.enable(gl.CULL_FACE);
+    gl.cullFace(gl.BACK);
+    gl.clearColor(0.98, 0.98, 0.98, 1.0);
+    gl.clearDepth(1.0);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+    // Set viewport
+    gl.viewport(0, 0, canvas.width, canvas.height);
+
+    // Initialize the shader program
+    initShaders();
+
+    // Initialize vertex and color buffers
+    initBuffers();
+
+    // Create a texture from the Qt Quick item
+    //! [0]
+    canvasTextureProvider = gl.getExtension("QTCANVAS3D_texture_provider");
+    cubeTexture = canvasTextureProvider.createTextureFromSource(textureSourceItem);
+    //! [0]
+
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+}
+
+function resizeGL(canvas)
+{
+    var pixelRatio = canvas.devicePixelRatio;
+    canvas.pixelSize = Qt.size(canvas.width * pixelRatio,
+                               canvas.height * pixelRatio);
+}
+
+function degToRad(degrees) {
+    return degrees * Math.PI / 180;
+}
+
+function paintGL(canvas) {
+    var pixelRatio = canvas.devicePixelRatio;
+    var currentWidth = canvas.width * pixelRatio;
+    var currentHeight = canvas.height * pixelRatio;
+    if (currentWidth !== width || currentHeight !== height ) {
+        width = currentWidth;
+        height = currentHeight;
+        gl.viewport(0, 0, width, height);
+        mat4.perspective(pMatrix, degToRad(45), width / height, 0.1, 500.0);
+        gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
+    }
+
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    mat4.identity(mvMatrix);
+    mat4.translate(mvMatrix, mvMatrix, [(canvas.yRotAnim - 120.0) / 120.0,
+                                        (canvas.xRotAnim -  60.0) / 50.0,
+                                        -7.0]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.xRotAnim), [0, 1, 0]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.yRotAnim), [1, 0, 0]);
+    mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.zRotAnim), [0, 0, 1]);
+    gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
+
+    mat4.invert(nMatrix, mvMatrix);
+    mat4.transpose(nMatrix, nMatrix);
+    gl.uniformMatrix4fv(nUniform, false, nMatrix);
+
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+}
+
+function initBuffers()
+{
+    var cubeVertexPositionBuffer = gl.createBuffer();
+    cubeVertexPositionBuffer.name = "cubeVertexPositionBuffer";
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+    gl.bufferData(
+                gl.ARRAY_BUFFER,
+                new Float32Array([// Front face
+                                        -1.0, -1.0,  1.0,
+                                        1.0, -1.0,  1.0,
+                                        1.0,  1.0,  1.0,
+                                        -1.0,  1.0,  1.0,
+
+                                        // Back face
+                                        -1.0, -1.0, -1.0,
+                                        -1.0,  1.0, -1.0,
+                                        1.0,  1.0, -1.0,
+                                        1.0, -1.0, -1.0,
+
+                                        // Top face
+                                        -1.0,  1.0, -1.0,
+                                        -1.0,  1.0,  1.0,
+                                        1.0,  1.0,  1.0,
+                                        1.0,  1.0, -1.0,
+
+                                        // Bottom face
+                                        -1.0, -1.0, -1.0,
+                                        1.0, -1.0, -1.0,
+                                        1.0, -1.0,  1.0,
+                                        -1.0, -1.0,  1.0,
+
+                                        // Right face
+                                        1.0, -1.0, -1.0,
+                                        1.0,  1.0, -1.0,
+                                        1.0,  1.0,  1.0,
+                                        1.0, -1.0,  1.0,
+
+                                        // Left face
+                                        -1.0, -1.0, -1.0,
+                                        -1.0, -1.0,  1.0,
+                                        -1.0,  1.0,  1.0,
+                                        -1.0,  1.0, -1.0
+                                       ]),
+                gl.STATIC_DRAW);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    var cubeVertexIndexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+                  new Uint16Array([
+                                            0,  1,  2,      0,  2,  3,    // front
+                                            4,  5,  6,      4,  6,  7,    // back
+                                            8,  9,  10,     8,  10, 11,   // top
+                                            12, 13, 14,     12, 14, 15,   // bottom
+                                            16, 17, 18,     16, 18, 19,   // right
+                                            20, 21, 22,     20, 22, 23    // left
+                                        ]),
+                  gl.STATIC_DRAW);
+
+    var cubeVerticesTextureCoordBuffer = gl.createBuffer();
+    cubeVerticesTextureCoordBuffer.name = "cubeVerticesTextureCoordBuffer";
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    var textureCoordinates = [
+                // Front
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0,
+                // Back
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0,
+                // Top
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0,
+                // Bottom
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0,
+                // Right
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0,
+                // Left
+                1.0,  0.0,
+                0.0,  0.0,
+                0.0,  1.0,
+                1.0,  1.0
+            ];
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                  gl.STATIC_DRAW);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    var cubeVerticesNormalBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                                                              // Front
+                                                              0.0,  0.0,  1.0,
+                                                              0.0,  0.0,  1.0,
+                                                              0.0,  0.0,  1.0,
+                                                              0.0,  0.0,  1.0,
+
+                                                              // Back
+                                                              0.0,  0.0, -1.0,
+                                                              0.0,  0.0, -1.0,
+                                                              0.0,  0.0, -1.0,
+                                                              0.0,  0.0, -1.0,
+
+                                                              // Top
+                                                              0.0,  1.0,  0.0,
+                                                              0.0,  1.0,  0.0,
+                                                              0.0,  1.0,  0.0,
+                                                              0.0,  1.0,  0.0,
+
+                                                              // Bottom
+                                                              0.0, -1.0,  0.0,
+                                                              0.0, -1.0,  0.0,
+                                                              0.0, -1.0,  0.0,
+                                                              0.0, -1.0,  0.0,
+
+                                                              // Right
+                                                              1.0,  0.0,  0.0,
+                                                              1.0,  0.0,  0.0,
+                                                              1.0,  0.0,  0.0,
+                                                              1.0,  0.0,  0.0,
+
+                                                              // Left
+                                                              -1.0,  0.0,  0.0,
+                                                              -1.0,  0.0,  0.0,
+                                                              -1.0,  0.0,  0.0,
+                                                              -1.0,  0.0,  0.0
+                                                          ]), gl.STATIC_DRAW);
+    gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+}
+
+function initShaders()
+{
+    var vertexShader = getShader(gl,
+                                 "attribute highp vec3 aVertexNormal;    \
+                                  attribute highp vec3 aVertexPosition;  \
+                                  attribute highp vec2 aTextureCoord;    \
+                                                                         \
+                                  uniform highp mat4 uNormalMatrix;      \
+                                  uniform mat4 uMVMatrix;                \
+                                  uniform mat4 uPMatrix;                 \
+                                                                         \
+                                  varying mediump vec4 vColor;           \
+                                  varying highp vec2 vTextureCoord;      \
+                                  varying highp vec3 vLighting;          \
+                                                                         \
+                                  void main(void) {                      \
+                                      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); \
+                                      vTextureCoord = aTextureCoord;                                   \
+                                      highp vec3 ambientLight = vec3(0.5, 0.5, 0.5);                   \
+                                      highp vec3 directionalLightColor = vec3(0.75, 0.75, 0.75);       \
+                                      highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);            \
+                                      highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0); \
+                                      highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0); \
+                                      vLighting = ambientLight + (directionalLightColor * directional); \
+                                  }", gl.VERTEX_SHADER);
+
+    var fragmentShader = getShader(gl,
+                                   "varying highp vec2 vTextureCoord;  \
+                                    varying highp vec3 vLighting;      \
+                                                                       \
+                                    uniform sampler2D uSampler;        \
+                                                                       \
+                                    void main(void) {                  \
+                                        mediump vec3 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)).rgb; \
+                                        gl_FragColor = vec4(texelColor * vLighting, 1.0);                                      \
+                                    }", gl.FRAGMENT_SHADER);
+
+    // Create the Program3D for shader
+    var shaderProgram = gl.createProgram();
+
+    // Attach the shader sources to the shader program
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+
+    // Link the program
+    gl.linkProgram(shaderProgram);
+
+    // Check the linking status
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        console.log("Could not initialize shaders");
+        console.log(gl.getProgramInfoLog(shaderProgram));
+    }
+
+    // Take the shader program into use
+    gl.useProgram(shaderProgram);
+
+    // Look up where the vertex data needs to go
+    vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+    gl.enableVertexAttribArray(vertexPositionAttribute);
+    textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+    gl.enableVertexAttribArray(textureCoordAttribute);
+    vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
+    gl.enableVertexAttribArray(vertexNormalAttribute);
+
+    // Get the uniform locations
+    pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+    mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+    nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+
+    // Setup texture sampler uniform
+    var textureSamplerUniform = gl.getUniformLocation(shaderProgram, "uSampler")
+    gl.activeTexture(gl.TEXTURE0);
+    gl.uniform1i(textureSamplerUniform, 0);
+    gl.bindTexture(gl.TEXTURE_2D, 0);
+}
+
+function getShader(gl, str, type) {
+    var shader = gl.createShader(type);
+    gl.shaderSource(shader, str);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.log("JS:Shader compile failed");
+        console.log(gl.getShaderInfoLog(shader));
+        return null;
+    }
+
+    return shader;
+}
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.pro b/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.pro
new file mode 100644
index 0000000..bbfa099
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.pro
@@ -0,0 +1,12 @@
+!include( ../../../examples.pri ) {
+    error( "Couldn't find the examples.pri file!" )
+}
+
+SOURCES += main.cpp
+
+RESOURCES += quickitemtexture.qrc
+
+OTHER_FILES += qml/quickitemtexture/* \
+               doc/src/* \
+               doc/images/*
+
diff --git a/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.qrc b/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.qrc
new file mode 100644
index 0000000..b0e7ecb
--- /dev/null
+++ b/examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/">
+        <file alias="gl-matrix.js">../3rdparty/gl-matrix.js</file>
+        <file alias="main.qml">qml/quickitemtexture/main.qml</file>
+        <file alias="quickitemtexture.js">qml/quickitemtexture/quickitemtexture.js</file>
+    </qresource>
+</RCC>