summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorMiikka Heikkinen <miikka.heikkinen@theqtcompany.com>2015-08-06 11:09:26 +0300
committerMiikka Heikkinen <miikka.heikkinen@theqtcompany.com>2015-08-06 11:43:36 +0300
commit7dfadf60722bf34c5b6f17a6b205d143b4b072b3 (patch)
tree6388591f6ba27360c271b9d6c25db428a5f8f188 /examples
parenta45560ae54122825b91b72b31fc99580256e1506 (diff)
parent0cf70048865a1a76894c2a8a0e40a5ee90dbf608 (diff)
Merge remote-tracking branch 'origin/wip/threading' into dev
Conflicts: src/imports/qtcanvas3d/canvas3d.cpp src/imports/qtcanvas3d/canvas3d_p.h The Canvas::frameTimeMs() method had to be changed a bit to fit the new architecture. Change-Id: I34a3db1b07492bf37045376bd42690993a2d2f15
Diffstat (limited to 'examples')
-rw-r--r--examples/canvas3d/canvas3d.pro1
-rw-r--r--examples/canvas3d/canvas3d/canvas3d.pro1
-rw-r--r--examples/canvas3d/canvas3d/framebuffer/doc/src/framebuffer.qdoc4
-rw-r--r--examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js5
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/doc/src/quickitemtexture.qdoc74
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/main.cpp49
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/main.qml197
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/qml/quickitemtexture/quickitemtexture.js365
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.pro12
-rw-r--r--examples/canvas3d/canvas3d/quickitemtexture/quickitemtexture.qrc7
-rw-r--r--examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc18
-rw-r--r--examples/examples.pro1
12 files changed, 721 insertions, 13 deletions
diff --git a/examples/canvas3d/canvas3d.pro b/examples/canvas3d/canvas3d.pro
index 1b5dfcf..f384c82 100644
--- a/examples/canvas3d/canvas3d.pro
+++ b/examples/canvas3d/canvas3d.pro
@@ -1,2 +1,3 @@
TEMPLATE = subdirs
SUBDIRS += canvas3d
+
diff --git a/examples/canvas3d/canvas3d/canvas3d.pro b/examples/canvas3d/canvas3d/canvas3d.pro
index a6542ca..0f603bc 100644
--- a/examples/canvas3d/canvas3d/canvas3d.pro
+++ b/examples/canvas3d/canvas3d/canvas3d.pro
@@ -3,6 +3,7 @@ SUBDIRS += textureandlight \
framebuffer \
interaction \
jsonmodels \
+ quickitemtexture \
threejs
OTHER_FILES += 3rdparty/*
diff --git a/examples/canvas3d/canvas3d/framebuffer/doc/src/framebuffer.qdoc b/examples/canvas3d/canvas3d/framebuffer/doc/src/framebuffer.qdoc
index 6149496..74c7084 100644
--- a/examples/canvas3d/canvas3d/framebuffer/doc/src/framebuffer.qdoc
+++ b/examples/canvas3d/canvas3d/framebuffer/doc/src/framebuffer.qdoc
@@ -58,7 +58,7 @@
\snippet canvas3d/framebuffer/qml/framebuffer/framebuffer.js 0
- Then, in the \c initGL function, we create the framebuffer object:
+ Then, in the \c initializeGL function, we create the framebuffer object:
\snippet canvas3d/framebuffer/qml/framebuffer/framebuffer.js 1
@@ -75,7 +75,7 @@
\section1 Rendering into the Framebuffer
- In \c renderGL function, we first need to draw the scene into the
+ In \c paintGL function, we first need to draw the scene into the
framebuffer. We start by binding the framebuffer object and setting a
viewport:
diff --git a/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
index e48abd5..8a6dafe 100644
--- a/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
+++ b/examples/canvas3d/canvas3d/jsonmodels/qml/jsonmodels/jsonmodels.js
@@ -253,7 +253,8 @@ function paintGL(canvas) {
// Draw the model
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, modelOne.indexVBO);
- if (stateDumpExt)
+ // Getting state dump is a synchronous operation, so only do it when logging is enabled
+ if (isLogEnabled && stateDumpExt)
log("GL STATE DUMP:\n"+stateDumpExt.getGLStateDump(stateDumpExt.DUMP_FULL));
gl.drawElements(drawMode, modelOne.count, gl.UNSIGNED_SHORT, 0);
@@ -621,7 +622,7 @@ function fillModel(modelData, model) {
new Float32Array(modelData.vertices),
gl.STATIC_DRAW);
log(" "+model.normalsVBO.name);
- if (stateDumpExt)
+ if (isLogEnabled && stateDumpExt)
log("GL STATE DUMP:\n"+stateDumpExt.getGLStateDump(stateDumpExt.DUMP_VERTEX_ATTRIB_ARRAYS_BIT || stateDumpExt.DUMP_VERTEX_ATTRIB_ARRAYS_CONTENTS_BIT));
gl.bindBuffer(gl.ARRAY_BUFFER, model.normalsVBO);
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>
diff --git a/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc b/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
index ce63f97..287c3a0 100644
--- a/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
+++ b/examples/canvas3d/canvas3d/textureandlight/doc/src/textureandlight.qdoc
@@ -56,7 +56,7 @@
\snippet canvas3d/textureandlight/qml/textureandlight/main.qml 0
\dots
- Inside it, we catch the \c initGL and \c renderGL signals to forward the
+ Inside it, we catch the \c initializeGL and \c paintGL signals to forward the
initialization and rendering calls to the js object:
\snippet canvas3d/textureandlight/qml/textureandlight/main.qml 1
@@ -67,7 +67,7 @@
\snippet canvas3d/textureandlight/qml/textureandlight/main.qml 4
- In the \c initGL function of the JavaScript, we initialize the OpenGL
+ In the \c initializeGL function of the JavaScript, we initialize the OpenGL
state. We also create the TextureImage and register handlers for image
load success and fail signals. If the load succeeds, the OpenGL texture
is created and filled with pixel data from the loaded image.
@@ -83,9 +83,9 @@
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 0
- \section2 initGL Function
+ \section2 initializeGL Function
- Let's take a closer look at the \c initGL function. It is called by
+ Let's take a closer look at the \c initializeGL function. It is called by
Canvas3D once the render node is ready.
First of all, we need to get a Context3D from our Canvas3D. We want
@@ -98,7 +98,7 @@
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 2
Next, let's take a look into shader initialization in the
- \c initShaders function, which we call in \c{initGL}. First we define
+ \c initShaders function, which we call in \c{initializeGL}. First we define
the vertex shader:
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 3
@@ -125,16 +125,16 @@
Above, first we create the buffer, then bind it and finally insert the
data into it. Other buffers are all handled in a similar fashion.
- As the final step in \c{initGL}, we create a texture image from
+ As the final step in \c{initializeGL}, we create a texture image from
TextureImageFactory, and register handlers for \c imageLoaded and
\c imageLoadingFailed signals. Once the texture image is successfully
loaded, we create the actual texture:
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 8
- \section2 renderGL Function
+ \section2 paintGL Function
- \c renderGL is called by Canvas3D whenever it is ready to receive a new
+ \c paintGL is called by Canvas3D whenever it is ready to receive a new
frame. Let's go through the steps that are done in each render cycle.
First we check if canvas has been resized or if pixel ratio has changed,
@@ -142,7 +142,7 @@
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 9
- Then we clear the render area using the clear color set in \c{initGL}:
+ Then we clear the render area using the clear color set in \c{initializeGL}:
\snippet canvas3d/textureandlight/qml/textureandlight/textureandlight.js 10
diff --git a/examples/examples.pro b/examples/examples.pro
index 1b5dfcf..f384c82 100644
--- a/examples/examples.pro
+++ b/examples/examples.pro
@@ -1,2 +1,3 @@
TEMPLATE = subdirs
SUBDIRS += canvas3d
+