Update index.html

completed picking (object will change colour when the mouse moves over)

index.html

@@ -134,8 +134,9 @@ <h4>My Projects</h4>
     <script id="fragment-shader-3d" type="x-shader/x-fragment">
     precision highp float;
 
+    uniform vec4 u_colorMult;
     void main() {
-      gl_FragColor = vec4(0.05, 0.3,0.8, 0.55);
+      gl_FragColor = u_colorMult;//vec4(0.05, 0.3,0.8, 0.55);
     }
 </script>
     <script id="pick-vertex-shader-3d" type="x-shader/x-vertex">
@@ -187,9 +188,11 @@ <h4>My Projects</h4>
       let objects = [];
       const uniformsThatAreComputedForEachObject = {
         u_worldViewProjection: m4.identity(),
+        //u_colorMult: [0.5,1,1,1],
       };
 
       let initialAnimation = true;
+      let objectPicked = 1;
 
       //create frame buffer
       const targetTexture = gl.createTexture();
@@ -276,13 +279,13 @@ <h4>My Projects</h4>
 
             // Set the uniforms we just computed
             webglUtils.setUniforms(programInfo, uniformsThatAreComputedForEachObject);
+            webglUtils.setUniforms(programInfo, object.colorUniforms);
 
             // Draw the geometry.
             gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
 
           });
 
-
           if (initialAnimation) {
             requestAnimationFrame(shrink);
           }
@@ -374,48 +377,28 @@ <h4>My Projects</h4>
           const pixels = new Uint8Array(4);
           gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
 
-
           if (pixels[0] > 0) {
-            console.log('picked');
-
-            resizeCanvasToDisplaySize(canvas);
-
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-            gl.clearColor(0, 0, 1, 0.1);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-            const projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, 1, 2000);
-            const viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
+            //console.log(pixels);
 
-            gl.useProgram(programInfo.program);
+            objectPicked = (pixels[0]-1) * rowNum + pixels[1]; 
 
-            // Setup all the needed buffers and attributes.
-            webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo);
+            objects[(objectPicked-1) * 4].colorUniforms.u_colorMult = [0.5, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 1].colorUniforms.u_colorMult = [0.5, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 2].colorUniforms.u_colorMult = [0.5, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 3].colorUniforms.u_colorMult = [0.5, 0.3, 0.8, 0.55];
 
-            gl.disable(gl.DEPTH_TEST);
-            gl.enable(gl.BLEND);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
-            objects.forEach(function (object) {
+          } else {
 
-              let worldMatrix = m4.xRotation(0);
-              worldMatrix = m4.translate(worldMatrix, object.xTranslation, object.yTranslation +5, object.zTranslation);
-              worldMatrix = m4.yRotate(worldMatrix, object.yRotation);
+            objects[(objectPicked-1) * 4].colorUniforms.u_colorMult = [0.05, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 1].colorUniforms.u_colorMult = [0.05, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 2].colorUniforms.u_colorMult = [0.05, 0.3, 0.8, 0.55];
+            objects[(objectPicked-1) * 4 + 3].colorUniforms.u_colorMult = [0.05, 0.3, 0.8, 0.55];
 
-              // Multiply the matrices.
-              m4.multiply(viewProjectionMatrix, worldMatrix, uniformsThatAreComputedForEachObject.u_worldViewProjection);
+          }
 
-              // Set the uniforms we just computed
-              webglUtils.setUniforms(programInfo, uniformsThatAreComputedForEachObject);
 
-              // Draw the geometry.
-              gl.drawElements(gl.TRIANGLES, bufferInfo.numElements, gl.UNSIGNED_SHORT, 0);
 
-            });
-          } else {
-            drawScene();
-          }
+          drawScene();
         }
 
 
@@ -433,7 +416,11 @@ <h4>My Projects</h4>
                 zTranslation: (j - columnNum / 2) * (width + gapH) + gapH / 2,
 
                 pickIDUniform: {
-                  u_id: [(i + 1) / 255, (j + i) / 255, 0, 1],
+                  u_id: [(i + 1) / 255, (j + 1) / 255, 0, 1],
+                },
+
+                colorUniforms: {
+                  u_colorMult: [0.05, 0.3, 0.8, 0.55],
                 }
 
               });
@@ -447,7 +434,11 @@ <h4>My Projects</h4>
                 zTranslation: (j - columnNum / 2) * (width + gapH) + width + gapH / 2,
 
                 pickIDUniform: {
-                  u_id: [(i + 1) / 255, (j + i) / 255, 0, 1],
+                  u_id: [(i + 1) / 255, (j + 1) / 255, 0, 1],
+                },
+
+                colorUniforms: {
+                  u_colorMult: [0.05, 0.3, 0.8, 0.55],
                 }
 
               });
@@ -460,7 +451,11 @@ <h4>My Projects</h4>
                 zTranslation: (j - columnNum / 2) * (width + gapH) + width / 2 + gapH / 2,
 
                 pickIDUniform: {
-                  u_id: [(i + 1) / 255, (j + i) / 255, 0, 1],
+                  u_id: [(i + 1) / 255, (j + 1) / 255, 0, 1],
+                },
+
+                colorUniforms: {
+                  u_colorMult: [0.05, 0.3, 0.8, 0.55],
                 }
 
               });
@@ -473,7 +468,11 @@ <h4>My Projects</h4>
                 zTranslation: (j - columnNum / 2) * (width + gapH) + width / 2 + gapH / 2,
 
                 pickIDUniform: {
-                  u_id: [(i + 1) / 255, (j + i) / 255, 0, 1],
+                  u_id: [(i + 1) / 255, (j + 1) / 255, 0, 1],
+                },
+
+                colorUniforms: {
+                  u_colorMult: [0.05, 0.3, 0.8, 0.55],
                 }
 
               });