diff --git a/src/components/beams.js b/src/components/beams.js index 723d6c7..1645540 100644 --- a/src/components/beams.js +++ b/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); diff --git a/src/components/gpu-preloader.js b/src/components/gpu-preloader.js new file mode 100644 index 0000000..481d4cb --- /dev/null +++ b/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); + }, +}); diff --git a/src/components/preloader.js b/src/components/preloader.js deleted file mode 100644 index ae653bf..0000000 --- a/src/components/preloader.js +++ /dev/null @@ -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); - }, -}); diff --git a/src/index.html b/src/index.html index 741dfe6..25c982c 100644 --- a/src/index.html +++ b/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"