From 5996d9a1908f292f371d0f2ef4733ecb3e852e33 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Sat, 6 Oct 2018 22:11:51 -0700 Subject: [PATCH] successful merge menu thumbs --- package-lock.json | 5 +++ package.json | 3 +- src/components/search-thumbnail-atlas.js | 55 ++++++++++++++++++++---- src/components/search.js | 25 ----------- src/templates/menu.html | 8 ++-- 5 files changed, 56 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index e2f1a30..635d6b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -153,6 +153,11 @@ "resolved": "https://registry.npmjs.org/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz", "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E=" }, + "aframe-state-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-6.1.0.tgz", + "integrity": "sha512-14lqMspSp5mZmbQLeRmJ70fd8G+xiYBBjm0vWl4di2nAcz1anxmuK/huKuup1h6qgs/hz69np71bSnsYSSKUgw==" + }, "aframe-super-keyboard": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/aframe-super-keyboard/-/aframe-super-keyboard-2.0.2.tgz", diff --git a/package.json b/package.json index 146b01a..e3592d1 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ }, "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", @@ -17,7 +16,7 @@ "aframe-orbit-controls": "^1.2.0", "aframe-proxy-event-component": "^2.1.0", "aframe-slice9-component": "^1.0.0", - "aframe-state-component": "6.1.0", + "aframe-state-component": "^6.1.0", "aframe-super-keyboard": "2.0.2", "aframe-thumb-controls-component": "^1.1.0", "algoliasearch": "^3.29.0", diff --git a/src/components/search-thumbnail-atlas.js b/src/components/search-thumbnail-atlas.js index c523b0b..cdb957a 100644 --- a/src/components/search-thumbnail-atlas.js +++ b/src/components/search-thumbnail-atlas.js @@ -1,12 +1,32 @@ +var CANVAS_HEIGHT = 512; // Power-of-two. +var HEIGHT = 64; +var NUM_PER_PAGE = 6; +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); + +/** + * Create thumbnail atlas for all the thumbnail images together per page. + */ AFRAME.registerComponent('search-thumbnail-atlas', { - dependencies: ['dynamic-texture-atlas', 'geometry', 'material'], + dependencies: ['geometry', 'material'], schema: { dummyUpdater: {type: 'string'} }, init: function () { - this.el.setAttribute('material', 'src', '#searchThumbnailImagesCanvas'); + const canvas = this.canvas = document.createElement('canvas'); + canvas.height = CANVAS_HEIGHT; // Power-of-two. + canvas.width = WIDTH; + + this.ctx = canvas.getContext('2d'); + this.clearCanvas(); + + document.body.appendChild(canvas); + this.el.setAttribute('material', 'src', canvas); + this.images = []; }, @@ -14,22 +34,39 @@ AFRAME.registerComponent('search-thumbnail-atlas', { var el = this.el; var data = this.data; + this.clearCanvas(); + 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; + img.src = `https://s3-us-west-2.amazonaws.com/supersaber/${results[i].id}-image.jpg`; if (img.complete) { - this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1); + this.draw(img, i); } else { - img.onload = (function (i) { - return () => { - this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1); - }; - })(i); + img.onload = () => { + this.draw(img, i); + }; } } + }, + /** + * Draw thumbnail on canvas at row i. + */ + draw: function (img, i) { + this.ctx.drawImage( + img, + 0, + i * HEIGHT * HEIGHT_FACTOR, + WIDTH, + HEIGHT * HEIGHT_FACTOR); this.el.getObject3D('mesh').material.map.needsUpdate = true; + }, + + clearCanvas: function () { + const canvas = this.canvas; + this.ctx.fillStyle = '#111'; + this.ctx.fillRect(0, 0, canvas.width, canvas.height); } }); diff --git a/src/components/search.js b/src/components/search.js index 2947c48..243d144 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -54,31 +54,6 @@ AFRAME.registerComponent('search-result-list', { }), }); -AFRAME.registerComponent('search-result-image', { - dependencies: ['material'], - - schema: { - id: {type: 'string'} - }, - - init: function () { - this.materialUpdateObj = {color: '#223'}; - - this.el.addEventListener('materialtextureloaded', () => { - this.el.setAttribute('material', 'color', '#FFF'); - }); - }, - - update: function () { - this.el.components.material.material.map = null; - this.el.components.material.material.needsUpdate = true; - - this.materialUpdateObj.src = - `https://s3-us-west-2.amazonaws.com/supersaber/${this.data.id}-image.jpg` - this.el.setAttribute('material', this.materialUpdateObj); - }, -}); - AFRAME.registerComponent('search-song-name-selected', { schema: { anchor: {default: 0}, diff --git a/src/templates/menu.html b/src/templates/menu.html index fe3361b..932fac2 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -25,10 +25,10 @@ + position="-0.45 0.015 0.001">