loading ring, improve loading states
This commit is contained in:
Kevin Ngo
4636
package-lock.json
generated
4636
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -18,6 +18,7 @@
|
||||
"aframe-layout-component": "^5.3.0",
|
||||
"aframe-orbit-controls": "^1.2.0",
|
||||
"aframe-proxy-event-component": "^2.1.0",
|
||||
"aframe-ring-shader": "^1.1.0",
|
||||
"aframe-slice9-component": "^1.0.0",
|
||||
"aframe-state-component": "^6.2.0",
|
||||
"aframe-thumb-controls-component": "^1.1.0",
|
||||
|
||||
114
src/aframe-ring-shader.js
Normal file
114
src/aframe-ring-shader.js
Normal file
@@ -0,0 +1,114 @@
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define([], factory);
|
||||
else {
|
||||
var a = factory();
|
||||
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
|
||||
}
|
||||
})(typeof self !== 'undefined' ? self : this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/* global AFRAME */
|
||||
|
||||
if (typeof AFRAME === 'undefined') {
|
||||
throw new Error('Component attempted to register before AFRAME was available.');
|
||||
}
|
||||
|
||||
AFRAME.registerShader('ring', {
|
||||
schema: {
|
||||
blur: { default: 0.01, is: 'uniform' },
|
||||
color: { type: 'color', is: 'uniform' },
|
||||
progress: { default: 0, is: 'uniform' },
|
||||
radiusInner: { default: 0.85, is: 'uniform' },
|
||||
radiusOuter: { default: 1, is: 'uniform' }
|
||||
},
|
||||
|
||||
vertexShader: __webpack_require__(1),
|
||||
|
||||
fragmentShader: __webpack_require__(2)
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "varying vec2 vUv;\n\nvoid main () {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n"
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = "#define PI 3.14159265358979\nuniform float blur;\nuniform float progress;\nuniform float radiusInner;\nuniform float radiusOuter;\nuniform vec3 color;\n\nvarying vec2 vUv;\n\nvoid main () {\n vec2 uv = vec2(vUv.x * 2. - 1., vUv.y * 2. - 1.);\n float r = uv.x * uv.x + uv.y * uv.y;\n float col = (1.0 - smoothstep(radiusOuter, radiusOuter + blur, r)) * smoothstep(radiusInner, radiusInner + blur, r);\n float a = smoothstep(-PI, PI, atan(uv.y, uv.x));\n float p = 1.0 - progress - blur;\n col *= smoothstep(p, p + blur, a);\n gl_FragColor = vec4(color * col, col);\n}\n"
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
});
|
||||
@@ -86,8 +86,15 @@ AFRAME.registerComponent('song', {
|
||||
}, ONCE);
|
||||
this.analyserSetter.src = utils.getS3FileUrl(data.challengeId, 'song.ogg');
|
||||
data.analyserEl.setAttribute('audioanalyser', this.analyserSetter);
|
||||
|
||||
// Already loaded.
|
||||
if (this.audioAnalyser.xhr.response) {
|
||||
this.songLoadingIndicator.setAttribute('material', 'progress', 1);
|
||||
this.el.sceneEl.emit('songfetchfinish', null, false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.audioAnalyser.xhr.addEventListener('progress', evt => {
|
||||
// Finished fetching.
|
||||
this.onFetchProgress(evt);
|
||||
});
|
||||
});
|
||||
@@ -110,8 +117,10 @@ AFRAME.registerComponent('song', {
|
||||
|
||||
onFetchProgress: function (evt) {
|
||||
const progress = evt.loaded / evt.total;
|
||||
this.songLoadingIndicator.setAttribute('geometry', 'thetaLength', progress * 360);
|
||||
if (progress >= 1) { this.el.sceneEl.emit('songfetchfinish', null, false); }
|
||||
this.songLoadingIndicator.setAttribute('material', 'progress', progress);
|
||||
if (progress >= 1) {
|
||||
this.el.sceneEl.emit('songfetchfinish', null, false);
|
||||
}
|
||||
},
|
||||
|
||||
onGameOver: function () {
|
||||
|
||||
@@ -11,6 +11,7 @@ require('aframe-haptics-component');
|
||||
require('aframe-layout-component');
|
||||
require('aframe-orbit-controls');
|
||||
require('aframe-proxy-event-component');
|
||||
require('aframe-ring-shader');
|
||||
require('aframe-state-component');
|
||||
require('aframe-slice9-component');
|
||||
require('aframe-thumb-controls-component');
|
||||
|
||||
@@ -25,15 +25,25 @@
|
||||
bind__text="value: loadingText"
|
||||
bind__visible="isSongLoading"
|
||||
text="align: center; color: #FAFAFA; wrapCount: 18; width: 0.65"
|
||||
position="0 -0.32 0"></a-entity>
|
||||
position="0 -0.32 0.001"></a-entity>
|
||||
|
||||
<a-entity
|
||||
id="songLoadingIndicator"
|
||||
bind__visible="isSongFetching"
|
||||
geometry="primitive: ring; radiusInner: 0.025; radiusOuter: 0.04"
|
||||
material="shader: flat; color: #FAFAFA; opacity: 0.75; side: back"
|
||||
position="0 -0.38 0"
|
||||
rotation="0 180 0">
|
||||
bind__visible="isSongLoading"
|
||||
geometry="primitive: plane; height: 0.1; width: 0.1"
|
||||
material="shader: ring; color: #FAFAFA; radiusInner: 0.2; radiusOuter: 0.9; progress: 0; transparent: true"
|
||||
position="0 -0.38 0.002">
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
id="songProcessingIndicator"
|
||||
bind__animation__spin="enabled: isSongLoading && !isSongFetching"
|
||||
bind__visible="isSongLoading && !isSongFetching"
|
||||
animation__spin="property: components.material.material.uniforms.progress.value; from: 0; to: 1; easing: easeInOutCubic; dur: 2000; loop: true"
|
||||
geometry="primitive: plane; height: 0.2; width: 0.2"
|
||||
material="shader: ring; color: #ABABAB; radiusInner: 0.2; radiusOuter: 0.4; transparent: true"
|
||||
position="0 -0.38 0.004"
|
||||
visible="false">
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
|
||||
@@ -103,7 +103,8 @@
|
||||
<a-entity
|
||||
id="menu"
|
||||
bind__visible="menuActive"
|
||||
position="0 1.1 -2">
|
||||
position="0 1.1 -2"
|
||||
visible="false">
|
||||
<a-entity id="menuchallengeunselectground"
|
||||
mixin="slice"
|
||||
slice9="width: 2.5; height: 1.55"
|
||||
|
||||
Reference in New Issue
Block a user