Update Canvas3D project wizard templates

Added new version of three.js that supports Quick items as textures,
and unified how three.js and non-three.js examples generated by the
wizard look like. Both now display just a plain green cube.

Change-Id: Iedc2498853aa078fe072083ab06a27d1ed04d982
Task-number: QTCREATORBUG-14824
Task-number: QTCREATORBUG-14825
Task-number: QTBUG-47961
Reviewed-by: Tomi Korpipää <tomi.korpipaa@theqtcompany.com>
Reviewed-by: Pasi Keränen <pasi.keranen@digia.com>
Reviewed-by: Alessandro Portale <alessandro.portale@theqtcompany.com>

share/qtcreator/templates/wizards/projects/qmake/qtcanvas3dapplication/plaincanvas3d/glcode.js

@@ -1,6 +1,5 @@
 //
-// Draws a cube that has different colors assigned to the vertices.
+// Draws a plain green cube.
-// Each face of the cube has the linear interpolation of the corner colors.
 //
 
 var gl;
@@ -8,10 +7,8 @@ var vertexPositionAttrLoc;
 var shaderProgram;
 var cubeVertexPositionBuffer;
 var cubeVertexIndexBuffer;
-var cubeVertexColorBuffer;
 var vertexShader;
 var fragmentShader;
-var vertexColorAttrLoc;
 var pMatrixUniformLoc;
 var mvMatrixUniformLoc;
 
@@ -26,7 +23,6 @@ function initializeGL(canvas) {
 
         // 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);
@@ -35,7 +31,7 @@ function initializeGL(canvas) {
         // Set viewport
         gl.viewport(0, 0, canvas.width * canvas.devicePixelRatio, canvas.height * canvas.devicePixelRatio);
 
-        // Initialize vertex and color buffers
+        // Initialize vertex and element array buffers
         initBuffers();
 
         // Initialize the shader program
@@ -78,17 +74,13 @@ function paintGL(canvas) {
     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);
 }
 
 function initBuffers() {
-    // Create a cubeVertexPositionBuffer and put a single clipspace rectangle in
+    // Create a buffer for cube vertices. Since we are not using textures, we don't need unique
-    // it (2 triangles)
+    // vertices for each face. We can define the cube using 8 vertices.
     cubeVertexPositionBuffer = gl.createBuffer();
     cubeVertexPositionBuffer.name = "cubeVertexPositionBuffer";
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
@@ -107,6 +99,8 @@ function initBuffers() {
                                  ]),
                 gl.STATIC_DRAW);
 
+    // Create buffer for element array indices. We define six sides, each composed of two
+    // triangles, using the vertices defined above.
     cubeVertexIndexBuffer = gl.createBuffer();
     cubeVertexIndexBuffer.name = "cubeVertexIndexBuffer";
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
@@ -131,36 +125,17 @@ function initBuffers() {
                                    6, 2, 1
                                   ]),
                   gl.STATIC_DRAW);
-
-    cubeVertexColorBuffer = gl.createBuffer();
-    cubeVertexColorBuffer.name = "cubeVertexColorBuffer";
-    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([// 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() {
     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;  \
+    fragmentShader = getShader(gl, "void main(void) {           \
-                                    void main(void) {           \
+                                        gl_FragColor = vec4(0.5, 0.76, 0.26, 1.0);  \
-                                        gl_FragColor = vColor;  \
                                     }", gl.FRAGMENT_SHADER);
 
     shaderProgram = gl.createProgram();
@@ -179,8 +154,6 @@ function initShaders() {
     // 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";

share/qtcreator/templates/wizards/projects/qmake/qtcanvas3dapplication/threejs/glcode.js

@@ -13,6 +13,7 @@ function initializeGL(canvas) {
                                                  shading: THREE.SmoothShading });
     var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
     cube = new THREE.Mesh(cubeGeometry, material);
+    cube.rotation.set(0.785, 0.785, 0.0);
     scene.add(cube);
 
     renderer = new THREE.Canvas3DRenderer(
@@ -29,8 +30,5 @@ function resizeGL(canvas) {
 }
 
 function paintGL(canvas) {
-    cube.rotation.x += 0.01;
-    cube.rotation.y += 0.01;
-
     renderer.render(scene, camera);
 }