new logo

src/assets.html

@@ -4,9 +4,11 @@
 <a-asset-item id="dotblueObj" src="assets/models/dotblue.obj"></a-asset-item>
 <a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
 <a-asset-item id="beatObj" src="assets/models/beat.obj"></a-asset-item>
+<!--
 <a-asset-item id="logofrontObj" src="assets/models/logofront.obj"></a-asset-item>
 <a-asset-item id="logobackObj" src="assets/models/logoback.obj"></a-asset-item>
 <a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
+-->
 <a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
 <!--<a-asset-item id="laserNeonObj" src="assets/models/laserneon.obj"></a-asset-item>-->
 <a-asset-item id="logoSparksJSON" src="assets/models/logosparks.json"></a-asset-item>
@@ -29,6 +31,11 @@
 <a-asset-item id="audiocolumnObj" src="assets/models/audiocolumn.obj"></a-asset-item>
 <a-asset-item id="leftLaserObj" src="assets/models/leftlaser.obj"></a-asset-item>
 <a-asset-item id="rightLaserObj" src="assets/models/rightlaser.obj"></a-asset-item>
+<a-asset-item id="logoObj" src="assets/models/logo.obj"></a-asset-item>
+<a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>
+<a-asset-item id="logoGlowObj" src="assets/models/logoglow.obj"></a-asset-item>
+
+
 
 <!--<a-asset-item id="wallglowObj" src="assets/models/wallglow.obj"></a-asset-item>-->
 
@@ -72,6 +79,7 @@
 <img id="floorEnvImg" src="assets/img/floorenv.jpg">
 <img id="floorNormalsImg" src="assets/img/floornormals.png">
 <img id="atlasImg" src="assets/img/atlas.png">
+<img id="logotexImg" src="assets/img/logotex.png">
 
 <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.9; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
 <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>

src/components/logoflicker.js

@@ -33,8 +33,7 @@ AFRAME.registerComponent('logoflicker', {
       this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)],
       false);
 
-    this.timeout = setTimeout(this.setOn,
-               50 + Math.floor(Math.random() * 100));
+    this.timeout = setTimeout(this.setOn, 50);
   },
 
   setOn: function () {

src/components/materials.js

@@ -1,5 +1,6 @@
 const stageNormalShaders = require('../../assets/shaders/stageNormal.js');
 const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js');
+const flatShaders = require('../../assets/shaders/flat.js');
 const COLORS = require('../constants/colors.js');
 
 AFRAME.registerSystem('materials', {
@@ -30,6 +31,29 @@ AFRAME.registerSystem('materials', {
       fog: false,
       transparent: true
     });
+
+    this.logo = new THREE.ShaderMaterial({
+      uniforms: {
+        src: {value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)},
+      },
+      vertexShader: flatShaders.vertexShader,
+      fragmentShader: flatShaders.fragmentShader,
+      depthTest: false,
+      fog: false,
+      transparent: true
+    });
+
+    this.logoadditive = new THREE.ShaderMaterial({
+      uniforms: {
+        src: {value: new THREE.TextureLoader().load(document.getElementById('logotexImg').src)},
+      },
+      vertexShader: flatShaders.vertexShader,
+      fragmentShader: flatShaders.fragmentShader,
+      depthTest: false,
+      blending: THREE.AdditiveBlending,
+      fog: false,
+      transparent: true
+    });
   }
 });
 

src/templates/stage.html

@@ -111,19 +111,12 @@
 
   <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
 
-  <a-entity
-    id="logolight"
-    position="0 6 0"
-    rotation="0 50 0"
-    logo-light
-    animation__rotate="property: object3D.rotation.y; from: 50; to: -50; dur: 300; easing: linear; startEvents: audioanalyserbeat"></a-entity>
-
-  <a-entity id="logosparks" bind__visible="menuActive || isVictory" particleplayer="src: #logoSparksJSON; scale: 1.4; pscale: 0.35; count: 10; interpolate: true; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
   <a-entity id="logo" bind__visible="menuActive || isVictory" position="0 6 -7.5" rotation="90 0 0">
-    <a-entity id="logoBack" obj-model="obj: #logobackObj" material="color: #001b29"></a-entity>
-    <a-entity id="logoFront" obj-model="obj: #logofrontObj"  material="color: #e81e23"></a-entity>
-    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menuActive || isVictory"></a-entity>
+    <a-entity id="logoObj" obj-model="obj: #logoObj" materials="name: logo"></a-entity>
+    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" materials="name: logo" logoflicker="delay: 1200" bind__logoflicker="active: menuActive || isVictory"></a-entity>
+    <a-entity id="logoGlowObj" obj-model="obj: #logoGlowObj" materials="name: logoadditive"></a-entity>
   </a-entity>
+  <a-entity id="logosparks" bind__visible="menuActive || isVictory" particleplayer="src: #logoSparksJSON; scale: 1.4; pscale: 0.35; count: 10; interpolate: true; dur: 1000; on: logoflicker; animateScale: true; initialScale: 1.5 1.5 1.5; finalScale: 0.3 0.3 0.3" position="-2.8 5.5 -7.2"></a-entity>
 
     <!-- material="color: #030303" -->
   <a-entity

src/templates/tutorial.html

@@ -35,8 +35,8 @@
   bind__visible="menuActive">
   <a-entity
     mixin="font"
-    text="align: center; value: HOW TO PLAY; color: #aaa; wrapCount: 30; width: 3"
-    position="0 0.4 0"></a-entity>
+    text="align: center; value: HOW TO PLAY; wrapCount: 30; width: 3"
+    position="0 0.6 0"></a-entity>
 
   <a-entity mixin="slice" slice9="left: 70; width: 3.3; height: 1.6; padding: 0.12; opacity: 0.9" position="0 0 -0.01"></a-entity>