Initial commit

.qmake.conf

+load(qt_build_config)
+CONFIG += qt_example_installs
+
+MODULE_VERSION=0.8.0
+
+CMAKE_MODULE_TESTS=-

examples/canvas3d/canvas3d.pro

+TEMPLATE = subdirs
+SUBDIRS += canvasswitch \
+           texturedcube \
+           textureandlight \
+           framebuffer \
+           plasmaeffects \
+           interaction \
+           jsonmodels
+OTHER_FILES += pureqml/* \
+               pureqml/doc/src/* \
+               pureqml/doc/images/*

examples/canvas3d/canvasswitch/canvasswitch.pro

+!include( ../examples.pri ) {
+    error( "Couldn't find the examples.pri file!" )
+}
+
+SOURCES += main.cpp
+
+OTHER_FILES += qml/canvasswitch/* \
+               doc/src/* \
+               doc/images/*
+
+RESOURCES += canvasswitch.qrc

examples/canvas3d/canvasswitch/canvasswitch.qrc

+<RCC>
+    <qresource prefix="/">
+        <file>qml/canvasswitch/glMatrix-0.9.5.min.js</file>
+        <file>qml/canvasswitch/main.qml</file>
+        <file>qml/canvasswitch/triangle.js</file>
+        <file>qml/canvasswitch/cube.js</file>
+    </qresource>
+</RCC>

examples/canvas3d/canvasswitch/doc/src/canvasswitch.qdoc

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/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 canvasswitch
+    \since QtCanvas3D 1.0
+    \title Canvas Switch Example
+    \ingroup qtcanvas3d-examples
+    \brief Switch between canvases on run-time
+
+    The Canvas Switch example shows how to create a Canvas3D dynamically and how to switch between
+    two canvases on run-time.
+
+    \image canvasswitch-example.png
+
+    \section1 Dynamic Canvas Creation
+
+    First we'll add a function call to the \c{Component.onCompleted} of the main component:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 0
+
+    The function handles the initial canvas creation:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 1
+
+    In the function we create the Canvas3D dynamically:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 2
+
+    We also need to anchor it to the layout we have added inside the function, as we'll call the
+    function again when switching canvases.
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 3
+
+    \section1 Switching Canvas
+
+    First we import the content for both canvases:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 4
+
+    Then, we have a button for switching the content we want to show:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 5
+
+    The content switching itself is done by destroying the old canvas and
+    creating a new one in the \c{Button}'s \c{onClicked}:
+
+    \snippet canvasswitch/qml/canvasswitch/main.qml 6
+ */

examples/canvas3d/canvasswitch/main.cpp

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/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 <QtCore/QDir>
+#include <QtQuick/QQuickView>
+#include <QtQml/QQmlEngine>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    QQuickView viewer;
+
+    // The following are needed to make examples run without having to install the module
+    // in desktop environments.
+#ifdef Q_OS_WIN
+    QString extraImportPath(QStringLiteral("%1/../../../../%2"));
+#else
+    QString extraImportPath(QStringLiteral("%1/../../../%2"));
+#endif
+    viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
+                                                       QString::fromLatin1("qml")));
+
+    QObject::connect(viewer.engine(), &QQmlEngine::quit, &viewer, &QWindow::close);
+    viewer.setSource(QUrl("qrc:/qml/canvasswitch/main.qml"));
+
+    viewer.setTitle(QStringLiteral("Canvas Switch"));
+    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
+    viewer.show();
+
+    return app.exec();
+}

examples/canvas3d/canvasswitch/qml/canvasswitch/cube.js

+Qt.include("glMatrix-0.9.5.min.js")
+
+//
+// Draws a cube that has different colors assigned to the vertices.
+// Each face of the cube has the linear interpolation of the corner colors.
+//
+
+var gl;
+var vertexPositionAttrLoc;
+var shaderProgram;
+var cubeVertexPositionBuffer;
+var cubeVertexIndexBuffer;
+var cubeVertexColorBuffer;
+var vertexShader;
+var fragmentShader;
+var vertexColorAttrLoc;
+var mvMatrix = mat4.create();
+var pMatrix = mat4.create();
+var pMatrixUniformLoc;
+var mvMatrixUniformLoc;
+
+var canvas3d;
+
+function log(message) {
+    if (canvas3d.logAllCalls)
+        console.log(message)
+}
+
+function initGL(canvas) {
+    canvas3d = canvas
+    try {
+        // Get the context object that represents the 3D API
+        gl = canvas.getContext("canvas3d", {depth:true});
+
+        // Setup the OpenGL state
+        gl.enable(gl.DEPTH_TEST);
+        gl.enable(gl.DEPTH_WRITE);
+        gl.depthMask(true);
+        gl.enable(gl.CULL_FACE);
+        gl.cullFace(gl.BACK);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+        // Set viewport
+        log("canvas width:"+canvas.width+" height:"+canvas.height+" devicePixelRatio:"+canvas.devicePixelRatio);
+        gl.viewport(0, 0, canvas.width * canvas.devicePixelRatio, canvas.height * canvas.devicePixelRatio);
+
+        // Initialize vertex and color buffers
+        initBuffers();
+
+        // Initialize the shader program
+        initShaders();
+    } catch(e) {
+        console.log("initGL FAILURE!");
+        console.log(""+e);
+        console.log(""+e.message);
+    }
+}
+
+function textureLoadError(textureImage) {
+}
+
+function textureLoaded(textureImage) {
+    log("textureLoaded IGNORED");
+}
+
+function degToRad(degrees) {
+    return degrees * Math.PI / 180;
+}
+
+function renderGL(canvas) {
+    log("Render Enter *******")
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    mat4.perspective(pMatrix, degToRad(45), canvas.width / canvas.height, 0.1, 100.0);
+    mat4.identity(mvMatrix);
+    mat4.translate(mvMatrix, mvMatrix, [0.0, 0.0, -20.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.useProgram(shaderProgram);
+
+    gl.uniformMatrix4fva(pMatrixUniformLoc, false, pMatrix);
+    gl.uniformMatrix4fva(mvMatrixUniformLoc, false, mvMatrix);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+    gl.enableVertexAttribArray(vertexPositionAttrLoc);
+    gl.vertexAttribPointer(vertexPositionAttrLoc, 3, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
+    gl.enableVertexAttribArray(vertexColorAttrLoc);
+    gl.vertexAttribPointer(vertexColorAttrLoc, 4, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+    log("Render Exit *******")
+}
+
+function initBuffers() {
+    // Create a cubeVertexPositionBuffer and put a single clipspace rectangle in
+    // it (2 triangles)
+    cubeVertexPositionBuffer = gl.createBuffer();
+    cubeVertexPositionBuffer.name = "cubeVertexPositionBuffer";
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+    gl.bufferData(
+                gl.ARRAY_BUFFER,
+                Arrays.newFloat32Array([ // front
+                                        -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
+                                        -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);
+
+    cubeVertexIndexBuffer = gl.createBuffer();
+    cubeVertexIndexBuffer.name = "cubeVertexIndexBuffer";
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+                  Arrays.newUint16Array([// front
+                                         0, 1, 2,
+                                         2, 3, 0,
+                                         // top
+                                         3, 2, 6,
+                                         6, 7, 3,
+                                         // back
+                                         7, 6, 5,
+                                         5, 4, 7,
+                                         // bottom
+                                         4, 5, 1,
+                                         1, 0, 4,
+                                         // left
+                                         4, 0, 3,
+                                         3, 7, 4,
+                                         // right
+                                         1, 5, 6,
+                                         6, 2, 1
+                                        ]),
+                  gl.STATIC_DRAW);
+
+    cubeVertexColorBuffer = gl.createBuffer();
+    cubeVertexColorBuffer.name = "cubeVertexColorBuffer";
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, Arrays.newFloat32Array([// front
+                                                           0.000,  1.000,  0.000,
+                                                           1.000,  0.000,  1.000,
+                                                           1.000,  1.000,  0.000,
+                                                           1.000,  0.000,  0.000,
+                                                           // back
+                                                           0.435,  0.602,  0.223,
+                                                           0.310,  0.747,  0.185,
+                                                           1.000,  1.000,  1.000,
+                                                           0.000,  0.000,  1.000
+                                                          ]), gl.STATIC_DRAW);
+}
+
+function initShaders() {
+    log("    Initializing shaders...");
+
+    vertexShader = getShader(gl, "attribute highp vec3 aVertexPosition; \
+                                  attribute highp vec4 aVertexColor; \
+                                  uniform highp mat4 uMVMatrix; \
+                                  uniform highp mat4 uPMatrix; \
+                                  varying highp vec4 vColor; \
+                                  void main(void) { \
+                                      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); \
+                                      vColor = aVertexColor; \
+                                  }", gl.VERTEX_SHADER);
+    fragmentShader = getShader(gl, "varying highp vec4 vColor; \
+                                    void main(void) { \
+                                        gl_FragColor = vColor; \
+                                    }", gl.FRAGMENT_SHADER);
+
+    shaderProgram = gl.createProgram();
+    shaderProgram.name = "shaderProgram";
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        console.log("Could not initialise shaders");
+        console.log(gl.getProgramInfoLog(shaderProgram));
+    }
+
+    gl.useProgram(shaderProgram);
+
+    // look up where the vertex data needs to go.
+    vertexPositionAttrLoc = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+    gl.enableVertexAttribArray(vertexPositionAttrLoc);
+    vertexColorAttrLoc = gl.getAttribLocation(shaderProgram, "aVertexColor");
+    gl.enableVertexAttribArray(vertexColorAttrLoc);
+
+    pMatrixUniformLoc  = gl.getUniformLocation(shaderProgram, "uPMatrix");
+    pMatrixUniformLoc.name = "pMatrixUniformLoc";
+    mvMatrixUniformLoc = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+    mvMatrixUniformLoc.name = "mvMatrixUniformLoc";
+    log("    ...done")
+}
+
+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;
+}

examples/canvas3d/canvasswitch/qml/canvasswitch/main.qml

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/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.0
+import QtQuick.Controls 1.1
+import QtQuick.Layouts 1.1
+
+//! [4]
+import "triangle.js" as GLCodeTriangle
+import "cube.js" as GLCodeCube
+//! [4]
+
+Item {
+    id: mainview
+    width: 1280
+    height: 768
+    visible: true
+
+    property var activeObject: GLCodeTriangle
+    property var canvas3d
+    property double xRotAnim: 0
+    property double yRotAnim: 0
+    property double zRotAnim: 0
+
+    //! [0]
+    Component.onCompleted: {
+        createCanvas()
+    }
+    //! [0]
+
+    SequentialAnimation {
+        id: objAnimationX
+        loops: Animation.Infinite
+        running: true
+        NumberAnimation {
+            target: mainview
+            property: "xRotAnim"
+            from: 0.0
+            to: 120.0
+            duration: 7000
+            easing.type: Easing.InOutQuad
+        }
+        NumberAnimation {
+            target: mainview
+            property: "xRotAnim"
+            from: 120.0
+            to: 0.0
+            duration: 7000
+            easing.type: Easing.InOutQuad
+        }
+    }
+
+    SequentialAnimation {
+        id: objAnimationY
+        loops: Animation.Infinite
+        running: true
+        NumberAnimation {
+            target: mainview
+            property: "yRotAnim"
+            from: 0.0
+            to: 240.0
+            duration: 5000
+            easing.type: Easing.InOutCubic
+        }
+        NumberAnimation {
+            target: mainview
+            property: "yRotAnim"
+            from: 240.0
+            to: 0.0
+            duration: 5000
+            easing.type: Easing.InOutCubic
+        }
+    }
+
+    SequentialAnimation {
+        id: objAnimationZ
+        loops: Animation.Infinite
+        running: true
+        NumberAnimation {
+            target: mainview
+            property: "zRotAnim"
+            from: -100.0
+            to: 100.0
+            duration: 3000
+            easing.type: Easing.InOutSine
+        }
+        NumberAnimation {
+            target: mainview
+            property: "zRotAnim"
+            from: 100.0
+            to: -100.0
+            duration: 3000
+            easing.type: Easing.InOutSine
+        }
+    }
+
+    ColumnLayout {
+        id: layout
+        anchors.fill: parent
+        RowLayout {
+            id: buttonrow
+            anchors.margins: 10
+            anchors.bottom: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            //! [5]
+            Button {
+                id: toggleButton
+                text: "Toggle Canvas"
+                property bool firstObject: true
+                //! [5]
+                //! [6]
+                onClicked: {
+                    canvas3d.destroy()
+                    firstObject = !firstObject
+                    if (firstObject)
+                        activeObject = GLCodeTriangle
+                    else
+                        activeObject = GLCodeCube
+                    createCanvas()
+                }
+                //! [6]
+            }
+            Button {
+                id: quitButton
+                text: "Quit"
+                onClicked: {
+                    canvas3d.destroy()
+                    Qt.quit()
+                }
+            }
+        }
+    }
+
+    //! [1]
+    function createCanvas() {
+        //! [2]
+        // Create canvas dynamically to allow changing js objects on the fly
+        canvas3d = Qt.createQmlObject("
+        import QtQuick 2.2
+        import QtCanvas3D 1.0
+        Canvas3D {
+            property double xRotAnim: mainview.xRotAnim
+            property double yRotAnim: mainview.yRotAnim
+            property double zRotAnim: mainview.zRotAnim
+            function initGL() { activeObject.initGL(canvas3d) }
+            function renderGL() { activeObject.renderGL(canvas3d) }
+        }", layout)
+        //! [2]
+        //! [3]
+        canvas3d.anchors.margins = 10
+        canvas3d.anchors.top = layout.top
+        canvas3d.anchors.left = layout.left
+        canvas3d.anchors.right = layout.right
+        canvas3d.anchors.bottom = buttonrow.top
+        //! [3]
+    }
+    //! [1]
+}

examples/canvas3d/canvasswitch/qml/canvasswitch/triangle.js

+Qt.include("glMatrix-0.9.5.min.js")
+
+//
+// Draws a single blue triangle on black background in clipspace.
+//
+
+var gl;
+var positionLocation;
+var shaderProgram;
+var buffer;
+var vertexShader;
+var fragmentShader;
+
+var canvas3d;
+
+function log(message) {
+    if (canvas3d.logAllCalls)
+        console.log(message)
+}
+
+function initGL(canvas) {
+    canvas3d = canvas
+    log("initGL("+canvas+") BEGIN");
+    try {
+        gl = canvas.getContext("3d");
+
+        // Create a buffer and put a single clipspace rectangle in
+        // it (2 triangles)
+        buffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(
+                    gl.ARRAY_BUFFER, Arrays.newFloat32Array(
+                        [-1.0, -1.0,
+                         1.0, -1.0,
+                         -1.0,  1.0
+                        ]),
+                    gl.STATIC_DRAW);
+
+
+        if (!initShaders()) {
+            console.log("initGL(): FAILURE!");
+            return;
+        }
+
+        gl.useProgram(shaderProgram);
+
+        // look up where the vertex data needs to go.
+        positionLocation = gl.getAttribLocation(shaderProgram, "a_position");
+        gl.enableVertexAttribArray(positionLocation);
+        gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+        gl.viewport(0, 0, canvas.width * canvas.devicePixelRatio, canvas.height * canvas.devicePixelRatio);
+    } catch(e) {
+        console.log("initGL(): FAILURE!");
+        console.log(""+e);
+        console.log(""+e.message);
+    }
+    log("initGL("+canvas+") END");
+}
+
+function renderGL(canvas) {
+    log("renderGL("+canvas+") BEGIN");
+    // Clear background
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    // Draw single green triangle
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    log("renderGL("+canvas+") END");
+}
+
+function initShaders()
+{
+    // setup a GLSL program
+    vertexShader = compileShader("attribute vec2 a_position; \
+                                  void main() { \
+                                      gl_Position = vec4(a_position, 0.0, 1.0); \
+                                 }", gl.VERTEX_SHADER);
+    fragmentShader = compileShader("void main() { \
+                                        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); \
+                                   }", gl.FRAGMENT_SHADER);
+
+    shaderProgram = gl.createProgram();
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+
+    // Check linking status
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        console.log("Could not initialise shaders");
+        console.log(gl.getProgramInfoLog(shaderProgram));
+        return false;
+    }
+
+    return true;
+}
+
+function compileShader(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;
+}

examples/canvas3d/examples.pri

+INCLUDEPATH += ../../../include
+
+LIBS += -L$$OUT_PWD/../../../lib
+
+TEMPLATE = app
+
+QT += qml quick
+
+target.path = $$[QT_INSTALL_EXAMPLES]/canvas3d/$$TARGET
+INSTALLS += target

examples/canvas3d/framebuffer/doc/src/framebuffer.qdoc

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtCanvas3D module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** 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 Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/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 framebuffer
+    \since QtCanvas3D 1.0
+    \title Framebuffer Example
+    \ingroup qtcanvas3d-examples
+    \brief Render into a framebuffer and use it as a texture
+
+    The Framebuffer Example shows how to render into a framebuffer, create a texture of it, and
+    apply the texture to an object in normal on-screen rendering.
+
+    The example has a moving and rotating cube, which has another textured cube drawn into it via
+    the framebuffer object. The cube in the frambuffer can be rotated using the Qt Quick sliders.
+
+    \image framebuffer-example.png
+
+    \section1 Preparing the Framebuffer
+
+    We'll first define the variables we need for the render-to-texture framebuffer:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 0
+
+    Then, in the \c initGL function, we create the framebuffer object:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 1
+
+    \section1 Creating the Texture
+
+    After the creation of the framebuffer, we create the texture:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 2
+
+    Then we'll need to bind the texture as a color attachment, create and bind a render buffer, and
+    bind the depth attachment:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 3
+
+    \section1 Rendering into the Framebuffer
+
+    In \c renderGL function, we'll first need to draw the scene into the framebuffer. We'll start
+    by binding the framebuffer object and setting a viewport:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 4
+
+    Then, we'll need to bind the loaded texture we want to use in rendering into the framebuffer
+    object:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 5
+
+    And then we can draw the textured cube into the framebuffer:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 6
+
+    \section1 Using the Framebuffer as a Texture
+
+    First we'll bind the render-to-texture right after drawing, and generate mipmaps:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 7
+
+    Then we need to bind the default framebuffer (= screen), and set up viewport:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 8
+
+    And finally draw the on-screen view:
+
+    \snippet framebuffer/qml/framebuffer/framebuffer.js 9
+
+ */

examples/canvas3d/framebuffer/framebuffer.pro

+!include( ../examples.pri ) {
+    error( "Couldn't find the examples.pri file!" )
+}
+
+SOURCES += main.cpp
+
+OTHER_FILES += qml/framebuffer/* \
+               doc/src/* \
+               doc/images/*
+
+RESOURCES += framebuffer.qrc

examples/canvas3d/framebuffer/framebuffer.qrc

+<RCC>
+    <qresource prefix="/">
+        <file>qml/framebuffer/glMatrix-0.9.5.min.js</file>
+        <file>qml/framebuffer/main.qml</file>
+        <file>qml/framebuffer/qtlogo.png</file>
+        <file>qml/framebuffer/framebuffer.js</file>
+    </qresource>
+</RCC>