floor saber-intersection, clean ups

src/assets.html

@@ -28,18 +28,18 @@
 <audio id="hitSound{{ i }}right" src="assets/sounds/hit{{ i }}right.ogg"></audio>
 {% endfor %}
 
-<img id="backglowTexture" src="assets/img/stage/backglow.png">
+<img id="backglowTexture" src="assets/img/backglow.png">
 <img id="cursorMeshImg" src="assets/models/laser/laser.png">
 <img id="downIconImg" src="assets/img/downIcon.png">
 <img id="envmapTexture" src="assets/img/envMap.png">
 <img id="envmapWallTexture" src="assets/img/envmapwall.jpg">
-<img id="floorImg" src="assets/img/stage/floor.png">
+<img id="floorImg" src="assets/img/floor.png">
 <img id="gridImg" src="assets/img/grid.png">
 <img id="playImg" src="assets/img/play.png">
-<img id="skyTexture" src="assets/img/stage/sky.jpg">
+<img id="skyTexture" src="assets/img/sky.jpg">
 <img id="sliceImg" src="assets/img/slice.png">
 <img id="slicebtnImg" src="assets/img/slicebtn.png">
-<img id="smokeTexture" src="assets/img/stage/smoke.png">
+<img id="smokeTexture" src="assets/img/smoke.png">
 <img id="beamImg" src="assets/img/beam.png">
 <img id="wrongImg" src="assets/img/wrong.png">
 <img id="missImg" src="assets/img/miss.png">
@@ -50,6 +50,8 @@
 <img id="soundboxingImg" src="assets/img/soundboxing.png">
 <img id="genresImg" src="assets/img/genres.png">
 <img id="tutorialImg" src="assets/img/tutorial.png">
+<img id="floorEnvImg" src="assets/img/floorenv.jpg">
+<img id="floorNormalsImg" src="assets/img/floornormals.png">
 
 <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; 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>
@@ -80,6 +82,7 @@
   geometry
   material="shader: wall-shader; tex: #noiseTexture; env: #envmapWallTexture; repeat: 2 2; transparent: true; side: double"
   wall
+  saber-intersection
   ></a-mixin>
 
 <a-mixin

src/components/floor-shader.js

@@ -0,0 +1,54 @@
+AFRAME.registerShader('floor-shader', {
+  schema: {
+    src: {type: 'map', is: 'uniform'},
+    normalMap: {type: 'map', is: 'uniform'},
+    envMap: {type: 'map', is: 'uniform'},
+    hitRight: {type: 'vec3', is: 'uniform', default: {x: 0, y: 1, z: 0}},
+    hitLeft: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0, z: 0}}
+  },
+
+  vertexShader: `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    void main() {
+      uvs.xy = uv.xy;
+      vec4 p = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      worldPos = (modelMatrix * vec4( position, 1.0 )).xyz;
+      gl_Position = p;
+    }
+  `,
+
+  fragmentShader: `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    uniform sampler2D src;
+    uniform sampler2D normalMap;
+    uniform sampler2D envMap;
+    uniform vec3 hitRight;
+    uniform vec3 hitLeft;
+
+    vec3 drawCircle(vec3 p, vec3 center, float radius, float edgeWidth, vec3 color) {
+      return color*(1.0-smoothstep(radius, radius+edgeWidth, length(p-center)));
+    }
+
+    void main() {
+      vec2 p = uvs.xy - 0.5;
+      p*= 4.0;
+
+      vec3 col = texture2D(src, uvs).xyz;
+
+      col += drawCircle(worldPos, hitRight, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
+      col += drawCircle(worldPos, hitRight, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
+      col += drawCircle(worldPos, hitLeft, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
+      col += drawCircle(worldPos, hitLeft, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
+
+      vec3 normal = normalize(texture2D(normalMap, uvs).xyz);
+
+      // environment reflection
+      vec3 reflectVec = normalize(reflect(normalize(worldPos - cameraPosition), normal));
+      vec3 reflectView = normalize((viewMatrix * vec4(reflectVec, 0.0)).xyz + vec3(0.0, 0.0, 1.0));
+
+      gl_FragColor = vec4(texture2D(envMap, reflectView.xy * vec2(0.5, -1.0) + vec2(0.75, 1.1)).xyz * 0.08 + col, 0.9 + col.x);
+    }
+  `
+});

src/components/saber-intersection.js

@@ -0,0 +1,51 @@
+AFRAME.registerComponent('saber-intersection', {
+  dependencies: ['raycaster__game'],
+  init: function () {
+    this.saberHit = {
+      'rightHand': {active: false, position: null, raycaster: null},
+      'leftHand': {active: false, position: null, raycaster: null}
+    };
+    this.intersecting = false;
+  },
+
+  pause: function () {
+    this.el.removeAttribute('raycastable-game');
+    this.el.removeEventListener('mouseenter', this.saberEnter);
+    this.el.removeEventListener('mouseleave', this.saberLeave);
+  },
+
+  play: function () {
+    this.el.setAttribute('raycastable-game', '');
+    this.el.addEventListener('mouseenter', this.saberEnter.bind(this));
+    this.el.addEventListener('mouseleave', this.saberLeave.bind(this));
+    this.material = this.el.object3D.children[0].material;
+    this.saberHit['rightHand'].raycaster = document.getElementById('rightHand').components['raycaster__game'];
+    this.saberHit['leftHand'].raycaster = document.getElementById('leftHand').components['raycaster__game'];
+  },
+
+  saberEnter: function (evt) {
+    this.saberHit[evt.detail.cursorEl.id].active = true;
+    this.intersecting = true;
+  },
+
+  saberLeave: function (evt) {
+    const hand = evt.detail.cursorEl.id;
+    this.saberHit[hand].active = false;
+    this.material.uniforms[hand == 'rightHand' ? 'hitRight' : 'hitLeft'].value = {x: 999, y: 0, z: 0};
+    this.intersecting = this.saberHit['rightHand'].active || this.saberHit['leftHand'].active;
+  },
+
+  tick: function (time, delta) {
+    if (this.intersecting) {
+      var int;
+      if (this.saberHit['rightHand'].active) {
+        int = this.saberHit['rightHand'].raycaster.getIntersection(this.el);
+        if (int) { this.material.uniforms.hitRight.value = int.point; }
+      }
+      if (this.saberHit['leftHand'].active) {
+        int = this.saberHit['leftHand'].raycaster.getIntersection(this.el);
+        if (int) { this.material.uniforms.hitLeft.value = int.point; }
+      }
+    }
+  }
+});

src/components/wall.js

@@ -8,63 +8,19 @@ AFRAME.registerComponent('wall', {
 
   init: function () {
     this.maxZ = 10;
-    this.saberHit = {
-      'rightHand': {
-        active: false,
-        position: null,
-        raycaster: document.getElementById('rightHand').components['raycaster__game']
-      },
-      'leftHand': {
-        active: false,
-        position: null,
-        raycaster: document.getElementById('leftHand').components['raycaster__game']
-      }
-    };
-    this.intersecting = false;
   },
 
   pause: function () {
     this.el.object3D.visible = false;
     this.el.removeAttribute('data-collidable-head');
-    this.el.removeAttribute('raycastable-game');
-    this.el.removeEventListener('mouseenter', this.saberEnter);
-    this.el.removeEventListener('mouseleave', this.saberLeave);
   },
 
   play: function () {
     this.el.object3D.visible = true;
     this.el.setAttribute('data-collidable-head', '');
-    this.el.setAttribute('raycastable-game', '');
-    this.el.addEventListener('mouseenter', this.saberEnter.bind(this));
-    this.el.addEventListener('mouseleave', this.saberLeave.bind(this));
-    this.material = this.el.object3D.children[0].material;
-  },
-
-  saberEnter: function (evt) {
-    this.saberHit[evt.detail.cursorEl.id].active = true;
-    this.intersecting = true;
-  },
-
-  saberLeave: function (evt) {
-    const hand = evt.detail.cursorEl.id;
-    this.saberHit[hand].active = false;
-    this.material.uniforms[hand == 'rightHand' ? 'hitRight' : 'hitLeft'].value = {x: 999, y: 0, z: 0};
-    this.intersecting = this.saberHit['rightHand'].active || this.saberHit['leftHand'].active;
   },
 
   tock: function (time, delta) {
-    if (this.intersecting) {
-      var int;
-      if (this.saberHit['rightHand'].active) {
-        int = this.saberHit['rightHand'].raycaster.getIntersection(this.el);
-        if (int) { this.material.uniforms.hitRight.value = int.point; }
-      }
-      if (this.saberHit['leftHand'].active) {
-        int = this.saberHit['leftHand'].raycaster.getIntersection(this.el);
-        if (int) { this.material.uniforms.hitLeft.value = int.point; }
-      }
-    }
-
     this.el.object3D.position.z += this.data.speed * (delta / 1000);
     if (this.el.object3D.position.z > this.maxZ) {
       this.returnToPool();

src/templates/stage.html

@@ -133,9 +133,11 @@
     id="floor"
     mixin="neonAnimation"
     geometry="primitive: plane; width: 3; height: 3"
-    material="color: #AAF; shader: flat; src: #floorImg"
+    material="shader: floor-shader; src: #floorImg; normalMap: #floorNormalsImg; envMap: #floorEnvImg"
     rotation="-90 0 0"
-    stepback></a-entity>
+    stepback
+    saber-intersection
+    ></a-entity>
 
   <a-entity
     id="songProgressRing"