Bump to A-Frame 1.1.0

supermedium · Jan 31, 2021 · b244312 · b244312
1 parent 54de8b2
commit b244312
Show file tree

Hide file tree

Showing 17 changed files with 1,192 additions and 4,172 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <meta property="twitter:image" content="https://supermedium.com/moonrider/assets/img/splash.jpg">
 
     <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
-    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@44212208beaa0f2d13c9721549687455886587c3/dist/aframe-master.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@37b219d2cf43c1f7cbd7ac4fc98e8ce5d914a1f7/dist/aframe-master.min.js"></script>
     <script src="build/build.js?v=3"></script>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "aframe-orbit-controls": "^1.2.0",
     "aframe-proxy-event-component": "^2.1.0",
     "aframe-render-order-component": "^1.1.0",
-    "aframe-ring-shader": "^1.2.0",
     "aframe-slice9-component": "^1.0.0",
     "aframe-state-component": "6.7.0",
     "aframe-super-hot-html-loader": "^1.2.0",

diff --git a/src/assets.html b/src/assets.html
@@ -218,8 +218,8 @@
   id="bigMenuButton"
   geometry="primitive: plane; width: 1.15; height: 0.23"
   material="shader: panelShader; brightness: 0.5; borderWidth: 0.05; ratio: 4; borderRadius: 0.6"
-  animation__mouseenter1="property: components.material.material.uniforms.active.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 100"
-  animation__mouseleave1="property: components.material.material.uniforms.active.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 100"
+  animation__mouseenter1="property: components.material.material.uniforms.activePanel.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 100"
+  animation__mouseleave1="property: components.material.material.uniforms.activePanel.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 100"
   animation__mouseenter2="property: scale; from: 1 1 1; to: 1.04 1.04 1.04; startEvents: mouseenter; pauseEvents: mouseleave; dur: 80"
   animation__mouseleave2="property: scale; to: 1 1 1; from: 1.04 1.04 1.04; startEvents: mouseleave; pauseEvents: mouseenter; dur: 80"
   render-order="menubutton"></a-mixin>

diff --git a/src/components/panel-shader.js b/src/components/panel-shader.js
@@ -2,7 +2,7 @@ import COLORS from '../constants/colors';
 
 AFRAME.registerShader('panelShader', {
   schema: {
-    active: {type: 'number', is: 'uniform', default: 0},
+    activePanel: {type: 'number', is: 'uniform', default: 0},
     brightness: {type: 'number', is: 'uniform', default: 0.3},
     borderWidth: {type: 'number', is: 'uniform', default: 0.004},
     borderRadius: {type: 'number', is: 'uniform', default: 0.15},

diff --git a/src/components/ring.js b/src/components/ring.js
@@ -0,0 +1,13 @@
+AFRAME.registerShader('ring', {
+  schema: {
+    blur: {default: 0.01, is: 'uniform'},
+    color: {type: 'color', is: 'uniform'},
+    progress: {default: 0, is: 'uniform'},
+    radiusInner: {default: 0.6, is: 'uniform'},
+    radiusOuter: {default: 1, is: 'uniform'}
+  },
+
+  vertexShader: require('./shaders/ring.vert.glsl'),
+
+  fragmentShader: require('./shaders/ring.frag.glsl')
+});
diff --git a/src/components/shaders/panel.frag.glsl b/src/components/shaders/panel.frag.glsl
@@ -1,4 +1,6 @@
-#extension GL_OES_standard_derivatives : enable
+#if __VERSION__ == 100
+  #extension GL_OES_standard_derivatives : enable
+#endif
 
 uniform vec3 colorPrimary;
 uniform vec3 colorSecondary;
@@ -12,7 +14,7 @@ uniform float brightness;
 uniform float ratio;
 uniform float midSection;
 uniform float opacity;
-uniform float active;
+uniform float activePanel;
 
 varying vec2 uvs;
 
@@ -28,7 +30,7 @@ void main()
   vec2 uv2 = uv * 2.0 - 1.0; // from -1 to 1
   uv2.x *= ratio;
 
-  vec3 col = mix(colorSecondary * uv.y, colorPrimary * uv.y, uv.x) * (brightness + active * 0.4);
+  vec3 col = mix(colorSecondary * uv.y, colorPrimary * uv.y, uv.x) * (brightness + activePanel * 0.4);
   vec3 borderCol = mix(colorSecondary, colorPrimary, uv.y);
 
   vec2 size = vec2(0.83 * ratio, 0.86) - borderRadius;

diff --git a/src/components/shaders/ring.frag.glsl b/src/components/shaders/ring.frag.glsl
@@ -0,0 +1,30 @@
+#if __VERSION__ == 100
+  #extension GL_OES_standard_derivatives : enable
+#endif
+#define PI 3.14159265358979
+uniform float blur;
+uniform float progress;
+uniform float radiusInner;
+uniform float radiusOuter;
+uniform vec3 color;
+
+varying vec2 vUv;
+
+void main () {
+  // make uvs go from -1 to 1
+  vec2 uv = vec2(vUv.x * 2.0 - 1.0, vUv.y * 2.0 - 1.0);
+  // calculate distance of fragment to center
+  float r = uv.x * uv.x + uv.y * uv.y;
+  // calculate antialias
+  float aa = fwidth(r);
+  // make full circle (radiusOuter - radiusInner)
+  float col = (1.0 - smoothstep(radiusOuter - aa, radiusOuter + blur + aa, r)) * smoothstep(radiusInner - aa, radiusInner + blur + aa, r);
+  // radial gradient
+  float a = smoothstep(-PI-aa, PI+aa, atan(uv.y, uv.x));
+  // progress angle
+  float p = 1.0 - progress - blur;
+  // apply progress to full circle (1 for done part, 0 for part to go)
+  col *= smoothstep(p, p + blur, a);
+  // multiply by user color
+  gl_FragColor = vec4(color * col, col);
+}
diff --git a/src/components/shaders/ring.vert.glsl b/src/components/shaders/ring.vert.glsl
@@ -0,0 +1,6 @@
+varying vec2 vUv;
+
+void main () {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
diff --git a/src/components/stars.js b/src/components/stars.js
@@ -15,7 +15,7 @@ AFRAME.registerComponent('stars', {
     for (let i = 0; i < this.data.count; i++) {
       positions.push(rand(), rand(), rand() * 4);
     }
-    geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
     geometry.computeBoundingSphere();
     const points = new THREE.Points(geometry, this.material);
     this.el.setObject3D('stars', points);

diff --git a/src/components/tail.js b/src/components/tail.js
@@ -14,7 +14,7 @@ AFRAME.registerComponent('tail', {
 
     const geometry = this.geometry = new THREE.PlaneBufferGeometry(
       data.width, data.height, data.segments, 1);
-    geometry.removeAttribute('normal');
+    geometry.deleteAttribute('normal');
     geometry.translate(data.width / 2, 0, 0);
 
     const material = this.el.sceneEl.systems.materials.handStarTrail;

diff --git a/src/components/trail.js b/src/components/trail.js
@@ -43,8 +43,8 @@ AFRAME.registerComponent('trail', {
 
     this.newSample = null;
 
-    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3).setDynamic(true));
-    geometry.addAttribute('vertexColor', new THREE.BufferAttribute(colors, 4).setDynamic(true));
+    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3).setUsage(THREE.DynamicDrawUsage));
+    geometry.setAttribute('vertexColor', new THREE.BufferAttribute(colors, 4).setUsage(THREE.DynamicDrawUsage));
 
     const material = new THREE.ShaderMaterial({
       side: THREE.DoubleSide,

diff --git a/src/components/vertex-colors-buffer.js b/src/components/vertex-colors-buffer.js
@@ -39,7 +39,7 @@ AFRAME.registerComponent('vertex-colors-buffer', {
     }
 
     if (!geometry.attributes.color) {
-      geometry.addAttribute('color',
+      geometry.setAttribute('color',
         new THREE.BufferAttribute(
           new Float32Array(geometry.attributes.position.array.length), 3
         )

diff --git a/src/index.js b/src/index.js
@@ -20,7 +20,6 @@ if (process.env.DEBUG_LOG) {
 require('aframe-orbit-controls');
 require('aframe-proxy-event-component');
 require('aframe-render-order-component');
-require('aframe-ring-shader');
 require('aframe-state-component');
 require('aframe-slice9-component');
 require('aframe-thumb-controls-component');

diff --git a/src/state/index.js b/src/state/index.js
@@ -135,7 +135,7 @@ AFRAME.registerState({
       accuracy: 100,  // Out of 100.
       accuracyScore: 0,  // Raw number.
       accuracyInt: 100,  // Out of 100.
-      active: false,
+      activePanel: false,
       beatsHit: 0,
       beatsMissed: 0,
       beatsText: '',
@@ -146,7 +146,7 @@ AFRAME.registerState({
       score: 0
     },
     search: {
-      active: true,
+      activePanel: true,
       page: 0,
       hasError: false,
       hasNext: false,

diff --git a/src/templates/gameMenu.html b/src/templates/gameMenu.html
@@ -1,8 +1,8 @@
 <a-mixin
   id="gameMenuButton"
   mixin="bigMenuButton"
-  animation__mouseenter="property: components.material.material.uniforms.active.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 70"
-  animation__mouseleave="property: components.material.material.uniforms.active.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 70"
+  animation__mouseenter="property: components.material.material.uniforms.activePanel.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 70"
+  animation__mouseleave="property: components.material.material.uniforms.activePanel.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 70"
   geometry="height: 0.28"></a-mixin>
 
 <a-mixin

diff --git a/src/templates/menu.html b/src/templates/menu.html
@@ -226,8 +226,8 @@
         proxy-event="event: click; to: a-scene; as: playbuttonclick"
         material="shader: panelShader; brightness: 0.7; transparent: true; midSection: 0; ratio: 2.8; borderRadius: 0.6; borderWidth: 0.08"
         render-order="menubutton"
-        animation__mouseenter1="property: components.material.material.uniforms.active.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 100"
-        animation__mouseleave1="property: components.material.material.uniforms.active.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 100"
+        animation__mouseenter1="property: components.material.material.uniforms.activePanel.value; from: 0; to: 1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 100"
+        animation__mouseleave1="property: components.material.material.uniforms.activePanel.value; from: 1; to: 0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 100"
         animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 100"
         animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 100">
           <a-entity mixin="font" text="align: center; color: #FFF; wrapCount: 15; value: PLAY" position="0 -0.085 0.01"></a-entity>