alpha map on thumbs to hide when not full 6 results

src/components/search-thumbnail-atlas.js

@@ -5,6 +5,7 @@ var WIDTH = 64;
 
 // Apply height factor since the images don't reach the power-of-two height, need to stretch.
 var HEIGHT_FACTOR = CANVAS_HEIGHT / (HEIGHT * NUM_PER_PAGE);
+var IMAGE_HEIGHT_CANVAS = HEIGHT * HEIGHT_FACTOR;
 
 /**
  * Create thumbnail atlas for all the thumbnail images together per page.
@@ -17,16 +18,28 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
   },
 
   init: function () {
+    // Create canvas for texture atlas.
     const canvas = this.canvas = document.createElement('canvas');
+    canvas.setAttribute('id', 'thumbnailAtlasMap');
     canvas.height = CANVAS_HEIGHT;  // Power-of-two.
     canvas.width = WIDTH;
-
     this.ctx = canvas.getContext('2d');
     this.clearCanvas();
     document.body.appendChild(canvas);
 
+    // Alpha map for when search results don't contain max number of results.
+    const alphaCanvas = this.alphaCanvas = document.createElement('canvas');
+    alphaCanvas.setAttribute('id', 'thumbnailAlphaMap');
+    alphaCanvas.height = CANVAS_HEIGHT;
+    alphaCanvas.width = WIDTH;
+    this.alphaCtx = alphaCanvas.getContext('2d');
+    document.body.appendChild(alphaCanvas);
+
+    this.el.components.material.material.alphaMap = new THREE.CanvasTexture(alphaCanvas);
     this.el.setAttribute('material', 'src', canvas);
     this.images = [];
+
+    this.lastNumResults = NUM_PER_PAGE;
   },
 
   update: function () {
@@ -46,6 +59,10 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
         };
       }
     }
+
+    // Update alpha map.
+    if (results.length !== this.lastNumResults) { this.updateAlphaMap(results.length); }
+    this.lastNumResults = results.length;
   },
 
   /**
@@ -55,9 +72,9 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
     this.ctx.drawImage(
       img,
       0,
-      i * HEIGHT * HEIGHT_FACTOR,
+      i * IMAGE_HEIGHT_CANVAS,
       WIDTH,
-      HEIGHT * HEIGHT_FACTOR);
+      IMAGE_HEIGHT_CANVAS);
     this.el.getObject3D('mesh').material.map.needsUpdate = true;
   },
 
@@ -65,5 +82,20 @@ AFRAME.registerComponent('search-thumbnail-atlas', {
     const canvas = this.canvas;
     this.ctx.fillStyle = '#111';
     this.ctx.fillRect(0, 0, canvas.width, canvas.height);
+  },
+
+  updateAlphaMap: function (numResults) {
+    const canvas = this.alphaCanvas;
+    const ctx = this.alphaCtx;
+    ctx.fillStyle = '#FFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#000';
+    ctx.fillRect(
+      0,
+      numResults * IMAGE_HEIGHT_CANVAS,
+      canvas.width,
+      canvas.height - numResults * IMAGE_HEIGHT_CANVAS);
+    this.el.getObject3D('mesh').material.alphaMap.needsUpdate = true;
+    this.el.getObject3D('mesh').material.needsUpdate = true;
   }
 });

src/templates/menu.html

@@ -28,7 +28,7 @@
     bind__visible="searchResultsPage.length > 0"
     geometry="primitive: plane; buffer: false; width: 0.2; height: 1.2"
     dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6; debug: true"
-    material="shader: flat"
+    material="shader: flat; transparent: true"
     position="-0.45 0.0146 0.002"></a-entity>
 
   <a-entity