playground-qml example cleaned up and simplified

This will be easier to test the QShaderData.

Change-Id: Ib3df6b105388295a164d7213e4db20d67294aee0
Reviewed-by: Sean Harmer <sean.harmer@kdab.com>

10 files changed, 588 insertions, 684 deletions

diff --git a/examples/playground-qml/AnimatedDiffuseMaterial.qml b/examples/playground-qml/AnimatedDiffuseMaterial.qml
new file mode 100644
index 000000000..7c91374ad
--- /dev/null
+++ b/examples/playground-qml/AnimatedDiffuseMaterial.qml
@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Klaralvdalens Datakonsult AB (KDAB).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt3D 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 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 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 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt3D 2.0
+import Qt3D.Render 2.0
+import QtQuick 2.2 as QQ2
+
+Material {
+    id: material
+
+    property color ambientColor: "#cc2200";
+    property color diffuseColor: "pink"
+    property bool enabled: true
+    property Texture2D texture;
+
+    QQ2.ParallelAnimation {
+        running: true
+        loops : QQ2.Animation.Infinite
+        QQ2.SequentialAnimation {
+            QQ2.ColorAnimation { target: material; property: "ambientColor"; to: "lightsteelblue"; duration: 1000 }
+            QQ2.ColorAnimation { target: material; property: "ambientColor"; to: "purple"; duration: 1000 }
+            QQ2.ColorAnimation { target: material; property: "ambientColor"; to: "#cc2200"; duration: 1000 }
+        }
+        QQ2.SequentialAnimation {
+            QQ2.ColorAnimation { target: material; property: "diffuseColor"; to: "yellow"; duration: 1000 }
+            QQ2.ColorAnimation { target: material; property: "diffuseColor"; to: "orange"; duration: 1000 }
+            QQ2.ColorAnimation { target: material; property: "diffuseColor"; to: "pink"; duration: 1000 }
+        }
+    }
+
+    parameters: [
+        Parameter { name: "ambient"; value: Qt.vector3d(material.ambientColor.r, material.ambientColor.g, material.ambientColor.b) },
+        Parameter { name: "lightIntensity"; value: Qt.vector3d(0.5, 0.5, 0.5)},
+        Parameter { name: "texture"; value: texture}
+    ]
+
+    effect : Effect {
+        parameters : Parameter { name: "diffuse"; value: Qt.vector3d(material.diffuseColor.r, material.diffuseColor.g, material.diffuseColor.b)}
+
+        techniques : [
+            // OpenGL 3.1 Technique
+            Technique {
+                openGLFilter {api : OpenGLFilter.Desktop; profile : OpenGLFilter.Core; minorVersion : 1; majorVersion : 3 }
+
+                annotations: [
+                    Annotation { name : "RenderingStyle"; value : "forward"},
+                    Annotation { name : "Enabled"; value: enabled }
+                ]
+
+                parameters : Parameter { name : "lightPos"; value : Qt.vector4d(10.0, 10.0, 0.0, 1.0)}
+
+                renderPasses : [
+                    // COLOR PASS
+                    RenderPass {
+                        annotations: Annotation {name: "Name"; value: "ColorMaterial"}
+
+                        bindings: [ // Add only the bindings needed for a shader
+                            ParameterMapping {parameterName: "ambient"; shaderVariableName: "ka"; bindingType: ParameterMapping.Uniform},
+                            ParameterMapping {parameterName: "diffuse"; shaderVariableName: "kd"; bindingType: ParameterMapping.Uniform},
+                            ParameterMapping {parameterName: "lightPos"; shaderVariableName: "lightPosition"; bindingType: ParameterMapping.Uniform},
+                            ParameterMapping {parameterName: "lightIntensity"; shaderVariableName: "lightIntensity"; bindingType: ParameterMapping.Uniform}
+                        ]
+
+                        shaderProgram: ShaderProgram {
+                            id: diffuseShader
+                            vertexShaderCode: loadSource("qrc:/shaders/diffuse.vert")
+                            fragmentShaderCode: loadSource("qrc:/shaders/diffuse.frag")
+                        }
+                    },
+                    // TEXTURE PASS
+                    RenderPass {
+                        annotations: Annotation {name : "Name"; value : "Texture" }
+                        bindings: ParameterMapping {parameterName: "texture"; shaderVariableName: "tex"; bindingType: ParameterMapping.Uniform}
+                        shaderProgram: ShaderProgram {
+                            vertexShaderCode : "
+                            #version 140
+                            in vec4 vertexPosition;
+                            in vec2 vertexTexCoord;
+                            out vec2 texCoord;
+
+                            uniform mat4 mvp;
+
+                            void main()
+                            {
+                                texCoord = vertexTexCoord;
+                                gl_Position = mvp * vertexPosition;
+                            }"
+
+                            fragmentShaderCode: "
+                            #version 140
+                            in vec2 texCoord;
+                            out vec4 fragColor;
+                            uniform sampler2D tex;
+
+                            void main()
+                            {
+                                fragColor = texture2D(tex, texCoord);
+                            }
+                            "
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+}
+
diff --git a/examples/playground-qml/ComplexTechnique.qml b/examples/playground-qml/ComplexTechnique.qml
new file mode 100644
index 000000000..cd57b1eba
--- /dev/null
+++ b/examples/playground-qml/ComplexTechnique.qml
@@ -0,0 +1,234 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Klaralvdalens Datakonsult AB (KDAB).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt3D 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 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 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 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt3D 2.0
+import Qt3D.Render 2.0
+
+Technique {
+    annotations : [
+        Annotation { name : "RenderingStyle"; value : "forward"},
+        Annotation { name : "Enabled"; value : true}
+    ]
+    openGLFilter {api : OpenGLFilter.Desktop; profile : OpenGLFilter.Core; minorVersion : 1; majorVersion : 3 }
+    renderPasses : [
+        RenderPass {
+            annotations : [Annotation {name : "Name"; value : "TextureLighting" }]
+            bindings : [ // Add only the bindings needed for a shader
+                ParameterMapping {parameterName: "vertexTexCoord"; shaderVariableName: "texCoord0"; bindingType: ParameterMapping.Attribute},
+                ParameterMapping {parameterName: "tex"; shaderVariableName: "texture"; bindingType: ParameterMapping.Uniform},
+                ParameterMapping {parameterName: "modelViewProjection"; shaderVariableName: "customMvp"; bindingType: ParameterMapping.StandardUniform}
+            ]
+
+            shaderProgram : ShaderProgram {
+                id : textureShaderLighting
+                vertexShaderCode: "
+                #version 140
+                in vec4 vertexPosition;
+                in vec3 vertexNormal;
+                in vec2 texCoord0;
+
+                out vec2 texCoord;
+                out vec3 worldPosition;
+                out vec3 normal;
+
+                uniform mat4 customMvp;
+                uniform mat4 modelView;
+                uniform mat3 modelViewNormal;
+
+                void main()
+                {
+                    texCoord = texCoord0;
+                    worldPosition = vec3(modelView * vertexPosition);
+                    normal = normalize(modelViewNormal * vertexNormal);
+                    gl_Position  = customMvp * vertexPosition;
+                }"
+
+                fragmentShaderCode: "
+                #version 140
+                in vec2 texCoord;
+                in vec3 worldPosition;
+                in vec3 normal;
+                out vec4 fragColor;
+
+                struct PointLight
+                {
+                    vec3 position;
+                    vec3 direction;
+                    vec4 color;
+                    float intensity;
+                };
+
+                const int lightCount = 3;
+                uniform PointLight pointLights[lightCount];
+                uniform sampler2D texture;
+
+                void main()
+                {
+                    vec4 color;
+                    for (int i = 0; i < lightCount; i++) {
+                        vec3 s = normalize(pointLights[i].position - worldPosition);
+                        color += pointLights[i].color * (pointLights[i].intensity * max(dot(s, normal), 0.0));
+                    }
+                    color /= float(lightCount);
+                    fragColor = texture2D(texture, texCoord) * color;
+                }"
+            }
+        },
+        RenderPass {
+            annotations : [Annotation {name : "Name"; value : "Texture" }]
+            shaderProgram : ShaderProgram {
+                vertexShaderCode : "
+                #version 140
+                in vec4 vertexPosition;
+                in vec2 vertexTexCoord;
+                out vec2 texCoord;
+
+                uniform mat4 mvp;
+
+                void main()
+                {
+                    texCoord = vertexTexCoord;
+                    gl_Position = mvp * vertexPosition;
+                }"
+
+                fragmentShaderCode: "
+                #version 140
+                in vec2 texCoord;
+                out vec4 fragColor;
+                uniform sampler2D tex;
+
+                void main()
+                {
+                    fragColor = texture2D(tex, texCoord);
+                }
+                "
+            }
+        },
+        RenderPass {
+            annotations : [Annotation {name : "Name"; value : "Lighting" }]
+            renderStates : [BlendState {srcRGB: BlendState.One; dstRGB : BlendState.One},
+                BlendEquation {mode: BlendEquation.FuncAdd},
+                CullFace { mode : CullFace.Back },
+                DepthTest { func : DepthTest.LessOrEqual}
+            ]
+            shaderProgram : ShaderProgram {
+                vertexShaderCode: "
+                #version 140
+                in vec4 vertexPosition;
+                in vec3 vertexNormal;
+
+                out vec3 worldPosition;
+                out vec3 normal;
+
+                uniform mat4 modelViewProjection;
+                uniform mat4 modelView;
+                uniform mat3 modelViewNormal;
+
+                void main()
+                {
+                    worldPosition = vec3(modelView * vertexPosition);
+                    normal = normalize(modelViewNormal * vertexNormal);
+                    gl_Position = modelViewProjection * vertexPosition;
+                }
+                "
+
+                fragmentShaderCode: "
+                #version 140
+                in vec3 worldPosition;
+                in vec3 normal;
+                out vec4 fragColor;
+
+                struct PointLight
+                {
+                    vec3 position;
+                    vec3 direction;
+                    vec4 color;
+                    float intensity;
+                };
+
+                const int lightCount = 3;
+                uniform PointLight pointLights[lightCount];
+
+                void main()
+                {
+                    vec4 color;
+                    for (int i = 0; i < lightCount; i++) {
+                        vec3 s = normalize(pointLights[i].position - worldPosition);
+                        color += pointLights[i].color * (pointLights[i].intensity * max(dot(s, normal), 0.0));
+                    }
+                    color /= float(lightCount);
+                    fragColor = color;
+                }"
+            }
+        },
+        RenderPass {
+            annotations : Annotation {name : "Name"; value : "Final" }
+            shaderProgram : ShaderProgram {
+                vertexShaderCode: "
+                #version 140
+                in vec4 vertexPosition;
+                in vec2 vertexTexCoord;
+                out vec2 texCoord;
+                uniform mat4 modelViewProjection;
+
+                void main()
+                {
+                    texCoord = vertexTexCoord;
+                    gl_Position = modelViewProjection * vertexPosition;
+                }
+                "
+
+                fragmentShaderCode: "
+                #version 140
+                in vec2 texCoord;
+                out vec4 fragColor;
+                uniform sampler2D gBuffer;
+
+                void main()
+                {
+                    fragColor = texture2D(gBuffer, texCoord);
+                }
+                "
+            }
+        }
+
+    ]
+}
diff --git a/examples/playground-qml/SimpleEffect.qml b/examples/playground-qml/DetailView.qml
index 00e9981a2..5e9298cfa 100644
--- a/examples/playground-qml/SimpleEffect.qml
+++ b/examples/playground-qml/DetailView.qml
@@ -42,66 +42,26 @@
 import Qt3D 2.0
 import Qt3D.Render 2.0
 
-Effect {
-    id: simpleEffect
 
-    techniques: [
-        Technique {
-            id: technique1
+Entity {
 
-            annotations : [
-                TechniqueCriterion { criterionType : TechniqueCriterion.CustomType; criterionCustomType: "useEarlyZ"; criterionValue : true},
-                TechniqueCriterion { criterionType : TechniqueCriterion.RenderingStyle; criterionValue : "forward"}
-            ]
-
-            renderPasses: [
-                RenderPass {
-                    shaderProgram: ShaderProgram {
-                        vertexSource: ":/shaders/zfill.vert"
-                        fragmentSource: ":/shaders/zfill.frag"
-                    }
-                },
-
-                RenderPass {
-                    shaderProgram: phongProgram
-                }
-            ]
-        },
-
-        Technique {
-            id: technique2
-
-            annotations : [
-                TechniqueCriterion { criterionType : TechniqueCriterion.CustomType; criterionCustomType: "useEarlyZ"; criterionValue : false},
-                TechniqueCriterion { criterionType : TechniqueCriterion.RenderingStyle; criterionValue : "forward"}
-            ]
-
-            renderPasses: [
-                RenderPass {
-                    shaderProgram: phongProgram
+    property Entity camera : Entity {
+        components : [
+            CameraLens {
+                projectionType: CameraLens.PerspectiveProjection
+                fieldOfView: 60
+                aspectRatio: 16/9
+                nearPlane: 0.001
+                farPlane: 10000.0
+            },
+            Transform {
+                LookAt {
+                    position: Qt.vector3d( 10.0, 10.0, -25.0 )
+                    upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
+                    viewCenter: Qt.vector3d( 0.0, 0.0, 10.0 )
                 }
-            ]
-        },
-
-        Technique {
-            id: technique3
-
-            annotations : [
-                TechniqueCriterion { criterionType : TechniqueCriterion.CustomType; criterionCustomType: "useEarlyZ"; criterionValue : false},
-                TechniqueCriterion { criterionType : TechniqueCriterion.RenderingStyle; criterionValue : "deferred"}
-            ]
-
-            renderPasses: [
-                RenderPass {},
-                RenderPass {},
-                RenderPass {}
-            ]
-        }
-    ]
-
-    ShaderProgram {
-        id: phongProgram
-        vertexSource: ":/shaders/phong.vert"
-        fragmentSource: ":/shaders/phong.frag"
+            }
+        ]
     }
+
 }
diff --git a/examples/playground-qml/ForwardRenderer.qml b/examples/playground-qml/ForwardRenderer.qml
index 04d074b02..087ae5897 100644
--- a/examples/playground-qml/ForwardRenderer.qml
+++ b/examples/playground-qml/ForwardRenderer.qml
@@ -54,64 +54,44 @@ TechniqueFilter {
     // Using this as a building block for a larger framegraph would
     // allow a scene to be rendered multiple times to different
     // viewports using different cameras for e.g.
-    property alias viewportRect: viewport.rect
-    property alias cameraViewportTopRight: cameraSelectorTopRight.camera
-    property alias cameraViewportBottomLeft: cameraSelectorBottomLeft.camera
-    property alias layerFilters : layerFilter.layers
-    property alias clearColor : viewport.clearColor
-    property alias colorAttachmentTexture : defaultColorAttachment.texture
+    property alias mainCameraViewport: mainCamera.camera
+    property alias detailCameraViewport: detailCamera.camera
+    property alias layerFilters: layerFilter.layers
+    property alias clearColor: viewport.clearColor
 
     requires : [
-        Annotation { name : "RenderingStyle"; value : "forward";},
-        Annotation { name : "Enabled"; value : true;}
+        Annotation { name: "RenderingStyle"; value: "forward";},
+        Annotation { name: "Enabled"; value: true;}
     ]
 
     ClearBuffer {
-        buffers : ClearBuffer.ColorDepthBuffer
+        buffers: ClearBuffer.ColorDepthBuffer
 
+        // Main Viewport
         Viewport {
             id: viewport
-            objectName : "viewport"
-            rect: Qt.rect(0.0, 0.0, 1.0, 1.0) // From Top Left
+            rect: Qt.rect(0.0, 0, 1.0, 1.0)
 
-            Viewport {
-                id : top_right_viewport
-                rect: Qt.rect(0.5, 0, 0.5, 0.5)
-                objectName : "topRightViewport"
-                CameraSelector {
-                    id : cameraSelectorTopRight
-                    objectName : "cameraSelector"
-                    LayerFilter {
-                        id : layerFilter
-                        objectName : "layerFilter"
-                        RenderPassFilter { includes : [Annotation {name : "Name"; value : "TextureLighting";}] }
-                    }
+            CameraSelector {
+                id : mainCamera
+
+                LayerFilter {
+                    id: layerFilter
+                    RenderPassFilter { includes: [
+                            Annotation {name : "Name"; value : "Texture"}
+                        ] }
                 }
             }
         }
     }
 
     Viewport {
-        id : bottom_left_viewport
-        objectName : "bottomLeftViewport"
-        rect: Qt.rect(0.0, 0.5, 0.5, 0.5)
+        id : detailViewport
+        rect: Qt.rect(0.75, 0.0, 0.25, 0.25)
+
         CameraSelector {
-            id: cameraSelectorBottomLeft
-            objectName : "cameraSelector"
-            RenderTargetSelector {
-                target : RenderTarget {
-                    attachments : [
-                        RenderAttachment {
-                            id : defaultColorAttachment
-                            type : RenderAttachment.ColorAttachment0
-                            name : "diffuse"
-                        }
-                    ]
-                }
-                RenderPassFilter { includes : [Annotation {name : "Name"; value : "Texture";}] }
-                RenderPassFilter { includes : [Annotation {name : "Name"; value : "Lighting";}] }
-            }
-            RenderPassFilter { includes : [Annotation {name : "Name"; value : "Final";}] }
+            id: detailCamera
+                RenderPassFilter { includes : [Annotation {name : "Name"; value : "ColorMaterial";}] }
         }
     }
 }
diff --git a/examples/playground-qml/MainView.qml b/examples/playground-qml/MainView.qml
new file mode 100644
index 000000000..f4f7156c3
--- /dev/null
+++ b/examples/playground-qml/MainView.qml
@@ -0,0 +1,122 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Klaralvdalens Datakonsult AB (KDAB).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt3D 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 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 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 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt3D 2.0
+import Qt3D.Render 2.0
+import QtQuick 2.0 as QQ2
+
+Entity {
+
+    property Entity camera: Camera {
+        projectionType: CameraLens.PerspectiveProjection
+        fieldOfView: 45
+        aspectRatio: 16/9
+        nearPlane: 0.01
+        farPlane: 1000.0
+        position: Qt.vector3d( 10.0, 10.0, -25.0 )
+        upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
+        viewCenter: Qt.vector3d( 0.0, 0.0, 10.0 )
+    }
+
+    // Shareable Components
+
+    Mesh {
+        id: ballMesh
+        objectName: "ballMesh"
+        source: ":/assets/ball.obj"
+    }
+
+    Mesh {
+        id: cubeMesh
+        objectName: "cubeMesh"
+        source: ":/assets/cube.obj"
+    }
+
+    AnimatedDiffuseMaterial {
+        id: animatedMaterial
+        texture: Texture2D { source : "assets/gltf/wine/Wood_Cherry_Original_.jpg" }
+    }
+
+    // Scene elements
+
+    Entity {
+        id : sceneEntity
+        components : SceneLoader {
+            id: scene
+            source: ":/assets/test_scene.dae"
+            objectName: "dae_scene"
+        }
+    }
+
+    RenderableEntity {
+        mesh: ballMesh
+        material: animatedMaterial
+        transform: Transform {
+            Translate {
+                dx: 0; dy: -10; dz : 25
+                QQ2.SequentialAnimation on dz {
+                    running : true
+                    loops: QQ2.Animation.Infinite
+                    QQ2.NumberAnimation { to : -1000; duration : 2000 }
+                    QQ2.NumberAnimation { to : 1000; duration : 1000 }
+                }
+            }
+            Scale {scale : 0.3}
+        }
+    }
+
+    RenderableEntity {
+        mesh: cubeMesh
+        material: animatedMaterial
+        transform: Transform {
+            Translate {
+                dx: 0; dy: -10; dz : 25
+                QQ2.SequentialAnimation on dx {
+                    running : true
+                    loops: QQ2.Animation.Infinite
+                    QQ2.NumberAnimation { to : -100; duration : 2000 }
+                    QQ2.NumberAnimation { to : 100; duration : 1000 }
+                }
+            }
+            Scale {scale : 0.3}
+        }
+    }
+}
diff --git a/examples/playground-qml/Renderable.qml b/examples/playground-qml/RenderableEntity.qml
index 838e801d1..e9b47820c 100644
--- a/examples/playground-qml/Renderable.qml
+++ b/examples/playground-qml/RenderableEntity.qml
@@ -40,12 +40,16 @@
 ****************************************************************************/
 
 import Qt3D 2.0
+import Qt3D.Render 2.0
 
-// This object is like Node in that it has a transformation component
-// attached. In addition it also has a Mesh property attached so it
-// can in addition be rendered
+Entity {
+    property Transform transform;
+    property Mesh mesh;
+    property Material material;
 
-Object {
-    //property Transform transform
-    property Mesh mesh
+    components: [
+        transform,
+        mesh,
+        material
+    ]
 }
diff --git a/examples/playground-qml/main.cpp b/examples/playground-qml/main.cpp
index 4c3f46a11..16872054c 100644
--- a/examples/playground-qml/main.cpp
+++ b/examples/playground-qml/main.cpp
@@ -41,6 +41,7 @@
 
 #include <Qt3DQuick/quickwindow.h>
 #include <Qt3DRenderer/qrenderaspect.h>
+#include <Qt3DInput/qinputaspect.h>
 
 #include <exampleresources.h>
 
@@ -57,6 +58,7 @@ int main(int argc, char* argv[])
     Qt3D::Quick::QQmlAspectEngine engine;
 
     engine.aspectEngine()->registerAspect(new Qt3D::QRenderAspect());
+    engine.aspectEngine()->registerAspect(new Qt3D::QInputAspect());
     QVariantMap data;
     data.insert(QStringLiteral("surface"), QVariant::fromValue(static_cast<QSurface *>(&view)));
     data.insert(QStringLiteral("window"), QVariant::fromValue(&view));
diff --git a/examples/playground-qml/main.qml b/examples/playground-qml/main.qml
index b435036dc..d61489624 100644
--- a/examples/playground-qml/main.qml
+++ b/examples/playground-qml/main.qml
@@ -41,593 +41,43 @@
 
 import Qt3D 2.0
 import Qt3D.Render 2.0
+import Qt3D.Input 2.0
 import QtQuick 2.2 as QQ2
-import QtQml 2.2
 
 Entity {
     id: root
-    objectName: "root"
 
-    QQ2.Timer
-    {
-        id : timer
-        property bool test : false;
-        interval : 2000
-        repeat : true
-        running: true
-        onTriggered:
-        {
-            console.log("Triggered <<<<<<<<<<<<<<<<<<<<< " + test);
-            camera2.transform = test ? transform_2 : transform_1
-            ball2.mesh = test ? null : ballMesh
-            ball1.mesh = test ? cubeMesh : ballMesh
-            test = !test
-            //                        instanciator.active = test
-            external_forward_renderer.activeFrameGraph.layerFilters = test ? ["balls"] : []
+    property bool detailCamera: true
+
+    FrameGraph {
+        id : external_forward_renderer
+        activeFrameGraph: ForwardRenderer {
+            mainCameraViewport: mainView.camera
+            detailCameraViewport: detailCamera ? detailView.camera : mainView.camera
+            clearColor: "black"
         }
     }
 
+    KeyboardController {id: keyboardController}
 
-    Instantiator {
-        id : instanciator
-        model : 5
+    KeyboardInput {
+        id: keyboardInput
+        controller: keyboardController
+        focus: true
+        onTabPressed: detailCamera = !detailCamera;
+    }
 
-        delegate : Entity {
-            objectName : "toto"
-            components : [TorusMesh {
-                    id: mesh
-                    objectName : "instancedMesh"
-                    radius: 5
-                    minorRadius: 1
-                    rings: 100
-                    slices: 20
-                },
-                Transform {
-                    objectName : "transformInstanciator"
+    components: [external_forward_renderer, keyboardInput]
 
-                    Translate {
-                        id : translate_inst
-                        dx : 15 * index
-                    }
-                }
-            ]
-        }
+    Configuration  {
+        controlledCamera: mainView.camera
     }
 
-    Entity {
-        components: ShaderData {
-            id: testPrototype
-            property vector3d position;
-            property int posistionTransformed: ShaderData.ModelToEye
-            property vector3d direction;
-            property color color;
-        }
+    MainView {
+        id: mainView
     }
 
-    // Scene graph
-    Entity {
-        id: sceneRoot
-        objectName: "sceneRootTest"
-
-        FrameGraph {
-            id : external_forward_renderer
-            activeFrameGraph : ForwardRenderer {
-                objectName : "externalRenderer"
-                cameraViewportBottomLeft: camera1
-                cameraViewportTopRight: camera2
-                clearColor: "black"
-                colorAttachmentTexture: colorAttachment
-            }
-        }
-
-        Texture2D {
-            id : colorAttachment
-            width : 512
-            height : 512
-            format : Texture.RGBA32F
-            generateMipMaps : false
-            magnificationFilter : Texture.Linear
-            minificationFilter : Texture.Linear
-            wrapMode {
-                x: WrapMode.ClampToEdge
-                y: WrapMode.ClampToEdge
-            }
-        }
-
-        components: [external_forward_renderer]
-
-        Transform {
-            id : transform_0
-            objectName : "transform_0"
-
-            Translate {
-                id : translate_0
-            }
-            LookAt {
-                position: Qt.vector3d( -2.0, -1.0, -18.0 )
-                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
-                viewCenter: Qt.vector3d( 0.0, 0.0, 5.0 )
-            }
-        }
-        QQ2.SequentialAnimation {
-            running : true
-            loops: QQ2.Animation.Infinite
-            QQ2.NumberAnimation { target : translate_0; property : "dz"; to : -360; duration : 2000 }
-            QQ2.NumberAnimation { target : translate_0; property : "dz"; to : -20; duration : 2000 }
-        }
-
-        Transform {
-            id : transform_1
-            objectName : "transform_1"
-
-            Rotate {
-                id : rotate
-                axis : Qt.vector3d(0, 1, 0)
-                angle: 0
-            }
-            LookAt {
-                position: Qt.vector3d( -2.0, -1.0, -18.0 )
-                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
-                viewCenter: Qt.vector3d( 0.0, 0.0, 5.0 )
-            }
-        }
-        Transform {
-            id : transform_2
-            objectName : "transform_2"
-
-            Rotate {
-                axis : Qt.vector3d(1, 0, 0)
-                angle: rotate.angle
-            }
-            LookAt {
-                position: Qt.vector3d( -2.0, -1.0, -18.0 )
-                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
-                viewCenter: Qt.vector3d( 0.0, 0.0, 5.0 )
-            }
-        }
-        QQ2.SequentialAnimation {
-            running : true
-            loops: QQ2.Animation.Infinite
-            QQ2.NumberAnimation { target : rotate; property : "angle"; to : 360; duration : 2000 }
-        }
-
-        CameraLens {
-            id : default_lens
-            objectName : "default_lens"
-            projectionType: CameraLens.PerspectiveProjection
-            fieldOfView: 45
-            aspectRatio: 16/9
-            nearPlane : 0.01
-            farPlane : 1000.0
-        }
-
-        Entity {
-            components: Transform {
-                Rotate {
-                    angle : 0
-                    axis : Qt.vector3d(0, 1, 0)
-                }
-            }
-
-            Camera {
-                id: camera1
-                objectName: "mainCamera"
-                projectionType: CameraLens.PerspectiveProjection
-                fieldOfView: 45
-                aspectRatio: 16/9
-                nearPlane : 0.01
-                farPlane : 1000.0
-                position: Qt.vector3d( 10.0, 10.0, -25.0 )
-                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
-                viewCenter: Qt.vector3d( 0.0, 0.0, 10.0 )
-            }
-        }
-
-        Entity {
-            id: camera2
-            objectName: "camera2"
-
-            property Transform transform : transform_1
-            components : [default_lens, transform]
-        }
-
-        Configuration  {
-            controlledCamera: camera1
-        }
-
-        Mesh {
-            id: ballMesh
-            objectName: "ballMesh"
-            source: ":/assets/ball.obj"
-        }
-
-        Mesh {
-            id : cubeMesh
-            objectName: "cubeMesh"
-            source : ":/assets/cube.obj"
-        }
-
-
-        Material {
-            id : ballTexturedMaterial
-
-            parameters : [Parameter { name : "tex"; value : Texture2D { source : "assets/gltf/wine/Wood_Cherry_Original_.jpg" } },
-                Parameter { name : "gBuffer"; value : colorAttachment }
-            ]
-
-            effect : Effect {
-                techniques : [
-                    Technique {
-                        annotations : [
-                            Annotation { name : "RenderingStyle"; value : "forward"},
-                            Annotation { name : "Enabled"; value : true}
-                        ]
-                        openGLFilter {api : OpenGLFilter.Desktop; profile : OpenGLFilter.Core; minorVersion : 1; majorVersion : 3 }
-                        renderPasses : [
-                            RenderPass {
-                                annotations : [Annotation {name : "Name"; value : "TextureLighting" }]
-                                bindings : [ // Add only the bindings needed for a shader
-                                    ParameterMapping {parameterName: "vertexTexCoord"; shaderVariableName: "texCoord0"; bindingType: ParameterMapping.Attribute},
-                                    ParameterMapping {parameterName: "tex"; shaderVariableName: "texture"; bindingType: ParameterMapping.Uniform},
-                                    ParameterMapping {parameterName: "modelViewProjection"; shaderVariableName: "customMvp"; bindingType: ParameterMapping.StandardUniform}
-                                ]
-
-                                shaderProgram : ShaderProgram {
-                                    id : textureShaderLighting
-                                    vertexShaderCode: "
-                                    #version 140
-                                    in vec4 vertexPosition;
-                                    in vec3 vertexNormal;
-                                    in vec2 texCoord0;
-
-                                    out vec2 texCoord;
-                                    out vec3 worldPosition;
-                                    out vec3 normal;
-
-                                    uniform mat4 customMvp;
-                                    uniform mat4 modelView;
-                                    uniform mat3 modelViewNormal;
-
-                                    void main()
-                                    {
-                                        texCoord = texCoord0;
-                                        worldPosition = vec3(modelView * vertexPosition);
-                                        normal = normalize(modelViewNormal * vertexNormal);
-                                        gl_Position  = customMvp * vertexPosition;
-                                    }"
-
-                                    fragmentShaderCode: "
-                                    #version 140
-                                    in vec2 texCoord;
-                                    in vec3 worldPosition;
-                                    in vec3 normal;
-                                    out vec4 fragColor;
-
-                                    struct PointLight
-                                    {
-                                        vec3 position;
-                                        vec3 direction;
-                                        vec4 color;
-                                        float intensity;
-                                    };
-
-                                    const int lightCount = 3;
-                                    uniform PointLight pointLights[lightCount];
-                                    uniform sampler2D texture;
-
-                                    void main()
-                                    {
-                                        vec4 color;
-                                        for (int i = 0; i < lightCount; i++) {
-                                            vec3 s = normalize(pointLights[i].position - worldPosition);
-                                            color += pointLights[i].color * (pointLights[i].intensity * max(dot(s, normal), 0.0));
-                                        }
-                                        color /= float(lightCount);
-                                        fragColor = texture2D(texture, texCoord) * color;
-                                    }"
-                                }
-                            },
-                            RenderPass {
-                                annotations : [Annotation {name : "Name"; value : "Texture" }]
-                                shaderProgram : ShaderProgram {
-                                    vertexShaderCode : "
-                                    #version 140
-                                    in vec4 vertexPosition;
-                                    in vec2 vertexTexCoord;
-                                    out vec2 texCoord;
-
-                                    uniform mat4 mvp;
-
-                                    void main()
-                                    {
-                                        texCoord = vertexTexCoord;
-                                        gl_Position = mvp * vertexPosition;
-                                    }"
-
-                                    fragmentShaderCode: "
-                                    #version 140
-                                    in vec2 texCoord;
-                                    out vec4 fragColor;
-                                    uniform sampler2D tex;
-
-                                    void main()
-                                    {
-                                        fragColor = texture2D(tex, texCoord);
-                                    }
-                                    "
-                                }
-                            },
-                            RenderPass {
-                                annotations : [Annotation {name : "Name"; value : "Lighting" }]
-                                renderStates : [BlendState {srcRGB: BlendState.One; dstRGB : BlendState.One},
-                                    BlendEquation {mode: BlendEquation.FuncAdd},
-                                    CullFace { mode : CullFace.Back },
-                                    DepthTest { func : DepthTest.LessOrEqual}
-                                ]
-                                shaderProgram : ShaderProgram {
-                                    vertexShaderCode: "
-                                    #version 140
-                                    in vec4 vertexPosition;
-                                    in vec3 vertexNormal;
-
-                                    out vec3 worldPosition;
-                                    out vec3 normal;
-
-                                    uniform mat4 modelViewProjection;
-                                    uniform mat4 modelView;
-                                    uniform mat3 modelViewNormal;
-
-                                    void main()
-                                    {
-                                        worldPosition = vec3(modelView * vertexPosition);
-                                        normal = normalize(modelViewNormal * vertexNormal);
-                                        gl_Position = modelViewProjection * vertexPosition;
-                                    }
-                                    "
-
-                                    fragmentShaderCode: "
-                                    #version 140
-                                    in vec3 worldPosition;
-                                    in vec3 normal;
-                                    out vec4 fragColor;
-
-                                    struct PointLight
-                                    {
-                                        vec3 position;
-                                        vec3 direction;
-                                        vec4 color;
-                                        float intensity;
-                                    };
-
-                                    const int lightCount = 3;
-                                    uniform PointLight pointLights[lightCount];
-
-                                    void main()
-                                    {
-                                        vec4 color;
-                                        for (int i = 0; i < lightCount; i++) {
-                                            vec3 s = normalize(pointLights[i].position - worldPosition);
-                                            color += pointLights[i].color * (pointLights[i].intensity * max(dot(s, normal), 0.0));
-                                        }
-                                        color /= float(lightCount);
-                                        fragColor = color;
-                                    }"
-                                }
-                            },
-                            RenderPass {
-                                annotations : Annotation {name : "Name"; value : "Final" }
-                                shaderProgram : ShaderProgram {
-                                    vertexShaderCode: "
-                                    #version 140
-                                    in vec4 vertexPosition;
-                                    in vec2 vertexTexCoord;
-                                    out vec2 texCoord;
-                                    uniform mat4 modelViewProjection;
-
-                                    void main()
-                                    {
-                                        texCoord = vertexTexCoord;
-                                        gl_Position = modelViewProjection * vertexPosition;
-                                    }
-                                    "
-
-                                    fragmentShaderCode: "
-                                    #version 140
-                                    in vec2 texCoord;
-                                    out vec4 fragColor;
-                                    uniform sampler2D gBuffer;
-
-                                    void main()
-                                    {
-                                        fragColor = texture2D(gBuffer, texCoord);
-                                    }
-                                    "
-                                }
-                            }
-
-                        ]
-                    }
-                ]
-            }
-        }
-
-        Material {
-            id: ballMaterial
-            objectName: "ballMaterial"
-
-            property color ambientColor : "#cc2200";
-            property color diffuseColor : "pink"
-            QQ2.ParallelAnimation {
-                running: true
-                loops : QQ2.Animation.Infinite
-                QQ2.SequentialAnimation {
-                    QQ2.ColorAnimation { target : ballMaterial; property : "ambientColor"; to: "lightsteelblue"; duration: 1000 }
-                    QQ2.ColorAnimation { target : ballMaterial; property : "ambientColor"; to: "purple"; duration: 1000 }
-                    QQ2.ColorAnimation { target : ballMaterial; property : "ambientColor"; to: "#cc2200"; duration: 1000 }
-
-                }
-                QQ2.SequentialAnimation {
-                    QQ2.ColorAnimation { target : ballMaterial; property : "diffuseColor"; to: "yellow"; duration: 1000 }
-                    QQ2.ColorAnimation { target : ballMaterial; property : "diffuseColor"; to: "orange"; duration: 1000 }
-                    QQ2.ColorAnimation { target : ballMaterial; property : "diffuseColor"; to: "pink"; duration: 1000 }
-                }
-            }
-
-            parameters : [
-                // Maybe having a AttributeParameter, StandardUniformParameter, UniformParameter would be better
-                Parameter { name : "ambient"; value : Qt.vector3d(ballMaterial.ambientColor.r, ballMaterial.ambientColor.g, ballMaterial.ambientColor.b) },
-                Parameter { name : "lightIntensity"; value : Qt.vector3d(0.5, 0.5, 0.5);}
-            ]
-            // Custom properties go here
-
-            effect : Effect {
-                parameters : [Parameter { name : "diffuse"; value : Qt.vector3d(ballMaterial.diffuseColor.r, ballMaterial.diffuseColor.g, ballMaterial.diffuseColor.b);}]
-
-                techniques : [
-                    Technique {
-                        openGLFilter {api : OpenGLFilter.Desktop; profile : OpenGLFilter.Core; minorVersion : 1; majorVersion : 3 }
-                        annotations : [
-                            Annotation { name : "RenderingStyle"; value : "forward"},
-                            Annotation { name : "Enabled"; value : timer.test; onValueChanged: console.log("VALUE " + value)}
-                        ]
-
-                        parameters : [Parameter { name : "lightPos"; value : Qt.vector4d(10.0, 10.0, 0.0, 1.0);}]
-
-                        renderPasses : [
-                            RenderPass {
-                                annotations : []
-                                bindings : [ // Add only the bindings needed for a shader
-                                    ParameterMapping {parameterName: "ambient"; shaderVariableName: "ka"; bindingType: ParameterMapping.Uniform},
-                                    ParameterMapping {parameterName: "diffuse"; shaderVariableName: "kd"; bindingType: ParameterMapping.Uniform},
-                                    ParameterMapping {parameterName: "lightPos"; shaderVariableName: "lightPosition"; bindingType: ParameterMapping.Uniform},
-                                    ParameterMapping {parameterName: "lightIntensity"; shaderVariableName: "lightIntensity"; bindingType: ParameterMapping.Uniform}
-                                ]
-                                shaderProgram : ShaderProgram {
-                                    id : diffuseShader
-                                    vertexShaderCode: loadSource("qrc:/shaders/diffuse.vert")
-                                    fragmentShaderCode: loadSource("qrc:/shaders/diffuse.frag")
-                                }
-                            }
-                        ]
-                    }
-                ]
-            }
-        }
-
-        Entity {
-
-            id : sceneEntity
-
-            components : SceneLoader {
-                id: scene
-                source: ":/assets/test_scene.dae"
-                objectName: "dae_scene"
-                property Transform scaleSceneTransform : Transform { Scale {id: sceneScale; scale : 1} }
-
-                //            QQ2.NumberAnimation {
-                //                target : sceneScale
-                //                property : "scale"
-                //                from : 1
-                //                to : 5
-                //                duration : 1000
-                //                loops : QQ2.Animation.Infinite
-                //                running: true
-                //            }
-                //            components : [scaleSceneTransform]
-            }
-
-        }
-
-        Layer { id: ballLayer; names : "balls" }
-
-        Entity {
-            id: ball
-            objectName: "ball"
-
-            property Transform transform: Transform {
-                Translate{ dx: 0; dy: -10; dz : 25 }
-                Scale {scale : 0.3}
-            }
-            property Mesh mesh: ballMesh
-
-            property PointLight light : PointLight {
-                color : "dodgerblue"
-                intensity : 1.0
-            }
-
-            components : [
-                transform,
-                ballMesh,
-                ballMaterial,
-                ballLayer,
-                light
-            ]
-        }
-
-
-        Entity {
-            id: ball1
-            objectName: "ball1"
-
-            property Transform transform: Transform {
-                Scale { scale : 0.5 }
-                Translate{ dx: 8; dy: 8; dz : 30 }
-            }
-            property Mesh mesh: ballMesh
-
-            property PointLight light : PointLight {
-                color : "red"
-                intensity : 1.0
-            }
-
-            components: [
-                transform,
-                mesh,
-                ballTexturedMaterial,
-                ballLayer
-            ]
-        }
-
-        Entity {
-            id: ball2
-            objectName: "ball2"
-
-            property Transform transform : ball2Transform;
-            property Mesh mesh: ballMesh
-            property PointLight light : PointLight {
-                color : "white"
-                intensity : 2
-            }
-            components : [mesh, ballMaterial, transform, light]
-        }
-
-        QQ2.SequentialAnimation {
-            running: true
-            loops: QQ2.Animation.Infinite
-
-            QQ2.NumberAnimation {
-                target: ball2Translation
-                property: "dx"
-                duration: 1000
-                easing.type: QQ2.Easing.InOutQuad
-                from: 0; to: 10
-            }
-            QQ2.NumberAnimation {
-                target: ball2Translation
-                property: "dx"
-                duration: 1000
-                easing.type: QQ2.Easing.InOutQuad
-                from: 10; to: 0
-            }
-        }
-
-        Transform {
-            id: ball2Transform
-            Scale { scale : 0.35 }
-            Translate {
-                id: ball2Translation
-                dx: 0; dy: 0; dz : 40
-            }
-        }
+    DetailView {
+        id: detailView
     }
 }
diff --git a/examples/playground-qml/playground-qml.pro b/examples/playground-qml/playground-qml.pro
index 7e5ede5db..2dbc803a8 100644
--- a/examples/playground-qml/playground-qml.pro
+++ b/examples/playground-qml/playground-qml.pro
@@ -1,6 +1,6 @@
 TEMPLATE = app
 
-QT += 3dcore 3drenderer 3dquick qml quick
+QT += 3dcore 3drenderer 3dquick qml quick 3dinput
 
 include("../exampleresources/exampleresources.pri")
 
@@ -12,13 +12,17 @@ SOURCES += \
 OTHER_FILES += \
     main.qml \
     AdsEffect.qml \
-    Renderable.qml \
     SimpleEffect.qml \
     elements/ViewportEntity.qml \
     elements/TechniqueFilterEntity.qml \
     elements/RenderPassFilterEntity.qml \
     elements/CameraSelectorEntity.qml \
-    ForwardRenderer.qml
+    ForwardRenderer.qml \
+    ComplexTechnique.qml \
+    RenderableEntity.qml \
+    MainView.qml \
+    DetailView.qml \
+    AnimatedDiffuseMaterial.qml
 
 RESOURCES += \
     playground-qml.qrc
diff --git a/examples/playground-qml/playground-qml.qrc b/examples/playground-qml/playground-qml.qrc
index e9e38ea79..7daa1dacf 100644
--- a/examples/playground-qml/playground-qml.qrc
+++ b/examples/playground-qml/playground-qml.qrc
@@ -1,12 +1,15 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-        <file>SimpleEffect.qml</file>
-        <file>Renderable.qml</file>
         <file>AdsEffect.qml</file>
         <file>assets/ball.obj</file>
         <file>ForwardRenderer.qml</file>
         <file>assets/test_scene.dae</file>
         <file>assets/cube.obj</file>
+        <file>ComplexTechnique.qml</file>
+        <file>MainView.qml</file>
+        <file>DetailView.qml</file>
+        <file>RenderableEntity.qml</file>
+        <file>AnimatedDiffuseMaterial.qml</file>
     </qresource>
 </RCC>