preload textures

src/components/beams.js

@@ -30,6 +30,8 @@ AFRAME.registerComponent('beams', {
     blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
     geo = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
 
+    this.texture = materialOptions.map;
+
     for (var j = 0; j < 2; j++) {
       for (var i = 0; i < this.data.poolSize; i++) {
         beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);

src/components/gpu-preloader.js

@@ -0,0 +1,64 @@
+let i = 0;
+
+/**
+ * Preload stuff to GPU.
+ * three.js renderer by default will not upload textures from non-visible entities.
+ */
+AFRAME.registerComponent('gpu-preloader', {
+  play: function () {
+    setTimeout(() => {
+      this.preloadBeamMap();
+      this.preloadBeatEnvMap();
+      this.preloadCutParticles();
+      this.preloadMissMap();
+      this.preloadWallMap();
+      this.preloadWrongMap();
+    }, 250);
+  },
+
+  preloadBeamMap: function () {
+    const beams = document.querySelector('[beams]');
+    this.preloadTexture(beams.components.beams.texture);
+  },
+
+  preloadBeatEnvMap: function () {
+    const beat = document.querySelector('#beatContainer [mixin~="beat"]');
+    beat.object3D.traverse(node => {
+      if (!node.material) { return; }
+      if (node.material.envMap) {
+        this.preloadTexture(node.material.envMap);
+      }
+      if (node.material.map) {
+        this.preloadTexture(node.material.map);
+      }
+    });
+  },
+
+  preloadCutParticles: function () {
+    const particles = document.querySelector('#saberParticles');
+    this.preloadTexture(particles.components.particleplayer.material.map);
+  },
+
+  preloadMissMap: function () {
+    const miss = document.querySelector('#missLeft');
+    this.preloadTexture(miss.getObject3D('mesh').material.map);
+  },
+
+  preloadWallMap: function () {
+    const wall = document.querySelector('a-entity[wall]');
+    this.preloadTexture(wall.getObject3D('mesh').material.uniforms.tex.value);
+  },
+
+  preloadWrongMap: function () {
+    const wrong = document.querySelector('#wrongLeft');
+    this.preloadTexture(wrong.getObject3D('mesh').material.map);
+  },
+
+  preloadTexture: function (texture) {
+    if (!texture || !texture.image) {
+      console.warn('[gpu-preloader] Error preloading texture', texture);
+      return;
+    }
+    this.el.renderer.setTexture2D(texture, i++ % 8);
+  },
+});

src/components/preloader.js

@@ -1,38 +0,0 @@
-AFRAME.registerComponent('gpu-preloader', {
-  init: function() {
-    setTimeout(() => {
-      this.preloadFont();
-      this.preloadKeyboard();
-    }, 1000);
-
-    setTimeout(() => {
-      this.el.object3D.visible = false;
-    }, 2000);
-  },
-
-  preloadFont: function() {
-    var text;
-    text = document.querySelector('[text]');
-    if (text.components.text.texture) {
-      this.preloadTexture(text.components.text.texture);
-    } else {
-      text.addEventListener('textfontset', () => {
-        this.preloadTexture(text.components.text.texture);
-      });
-    }
-  },
-
-  preloadKeyboard: function() {
-    var kbd;
-    kbd = document.getElementById('kb');
-    kbd.object3D.traverse(node => {
-      if (node.material && node.material.map) {
-        this.preloadTexture(node.material.map);
-      }
-    });
-  },
-
-  preloadTexture: function(texture) {
-    this.el.sceneEl.renderer.setTexture2D(texture, 0);
-  },
-});

src/index.html

@@ -26,6 +26,7 @@
       console-shortcuts
       debug-controller
       effect-bloom="strength: 1"
+      gpu-preloader
       loading-screen="backgroundColor: #000;"
       overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #inGameMenu"
       pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"