work on texture atlasing

package-lock.json

@@ -99,6 +99,11 @@
         "animejs": "2.2.0"
       }
     },
+    "aframe-atlas-uvs-component": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.0.0.tgz",
+      "integrity": "sha512-2Zm07u163vwzT7VLE7y9h9oL1e3RH8CNQGIUvdE+wgl2Yo6iSZwGhIpcYRFODthEdb0vHrCyFMOATZfniq7yhw=="
+    },
     "aframe-audioanalyser-component": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.1.tgz",
@@ -148,11 +153,6 @@
       "resolved": "https://registry.npmjs.org/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz",
       "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
     },
-    "aframe-state-component": {
-      "version": "5.0.0-beta6",
-      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta6.tgz",
-      "integrity": "sha512-2N4V1Atq4xHEfaiEJD+ryQPBZmCA4gZGV2bbYPWImGAuFiEthaqvXp64TI0K82JjWaIEMeUTSKF1FTeCtyLq3w=="
-    },
     "aframe-super-keyboard": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/aframe-super-keyboard/-/aframe-super-keyboard-2.0.2.tgz",

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "aframe-animation-component": "^5.1.2",
+    "aframe-atlas-uvs-component": "^2.0.0",
     "aframe-audioanalyser-component": "^4.0.1",
     "aframe-event-decorators": "^1.0.2",
     "aframe-event-set-component": "^4.0.1",

src/components/search-thumbnail-atlas.js

@@ -0,0 +1,35 @@
+AFRAME.registerComponent('search-thumbnail-atlas', {
+  dependencies: ['dynamic-texture-atlas', 'geometry', 'material'],
+
+  schema: {
+    dummyUpdater: {type: 'string'}
+  },
+
+  init: function () {
+    this.el.setAttribute('material', 'src', '#searchThumbnailImagesCanvas');
+    this.images = [];
+  },
+
+  update: function () {
+    var el = this.el;
+    var data = this.data;
+
+    const results = el.sceneEl.systems.state.state.searchResultsPage;
+    for (let i = 0; i < results.length; i++) {
+      let img = this.images[i] = this.images[i] || document.createElement('img');
+      img.crossOrigin = 'anonymous';
+      img.src = results[i].image;
+      if (img.complete) {
+        this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+      } else {
+        img.onload = (function (i) {
+          return () => {
+            this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+          };
+        })(i);
+      }
+    }
+
+    this.el.getObject3D('mesh').material.map.needsUpdate = true;
+  }
+});

src/index.js

@@ -3,6 +3,7 @@ function requireAll (req) { req.keys().forEach(req); }
 require('../vendor/BufferGeometryUtils');
 
 require('aframe-animation-component');
+require('aframe-atlas-uvs-component');
 require('aframe-audioanalyser-component');
 require('aframe-event-set-component');
 require('aframe-geometry-merger-component');

src/templates/menu.html

@@ -22,6 +22,14 @@
     position="0.181 -0.055 0.001">
   </a-entity>
 
+  <a-entity
+    id="searchThumbnailImages"
+    bind__search-thumbnail-atlas="dummyUpdater: search.songSubNameTexts"
+    geometry="primitive: plane; buffer: false; width: 0.2; height: 0.12"
+    dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6"
+    material="shader: flat"
+    position="-0.45 -0.13 0.001"></a-entity>
+
   <a-entity
     id="searchSongNameTextSelected"
     mixin="textFont"
@@ -83,13 +91,6 @@
         animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
         animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"
         visible="false"></a-entity>
-      <a-entity class="searchResultContent" position="0.125 -0.05 0">
-        <a-entity
-          class="searchResultImage"
-          bind-item__search-result-image="id: item.id"
-          geometry="primitive: plane; width: 0.2; height: 0.2"
-          material="shader: flat; color: #223"
-          position="-0.576 -0.08 0.001"></a-entity>
       </a-entity>
     </a-entity>
   </template>