moved tunnel-effect to 'systems' folder.

src/components/tunnel-effect.js

-import "./shaderlib/EffectComposer";
-import "./shaderlib/RenderPass";
-import "./shaderlib/ShaderPass";
-import "./shaderlib/MaskPass";
-import "./shaderlib/CopyShader";
-import "./shaderlib/VignetteShader";
-
-AFRAME.registerComponent('tunneleffect', {
-  schema: {
-    checkThresholdMs: {type: 'number', default: 200},
-    
-  },
-  init: function () {
-    this.scene = this.el.sceneEl;
-    this.image = document.querySelector('#tunnel-effect');
-    this.isMoving = 0;
-    this.image.setAttribute('visible', false);
-    const openTunnelEffect = this._openTunnelEffect.bind(this);
-    this.scene.addEventListener('move', openTunnelEffect);
-    this.dt = 0;
-    this.t = 0;
-    this.threshold = 300;
-  },
-
-  _openTunnelEffect: function () {
-    if (!this.isMoving) {
-      this.image.setAttribute('visible', true);
-      this.isMoving = true;
-    }
-    this.t = this.scene.time;
-  },
-
-  _closeTunnelEffect: function () {
-    console.log('visible false');
-  },
-
-  tick: function (time, deltaTime) {
-    if (this.isMoving && time - this.t > this.threshold) {
-      this.isMoving = false;
-      this.image.setAttribute('visible', false);
-      this.t = time;
-    }
-
-  },
-
-  play: function () {
-    // this._closeTunnelEffect();
-
-  }
-
-});
-
-
-// AFRAME.registerComponent('post-effect', {
-//   init: function () {
-//   },
-
-//   tick: function () {
-//     console.log('component ticks');
-//     this.system.renderPass();
-//   }
-// });

src/systems/tunnel-effect.js

+import "./shaderlib/EffectComposer";
+import "./shaderlib/RenderPass";
+import "./shaderlib/ShaderPass";
+import "./shaderlib/MaskPass";
+import "./shaderlib/CopyShader";
+import "./shaderlib/VignetteShader";
+
+AFRAME.registerSystem ('tunneleffect', {
+  schema: {
+    checkThresholdMs: { type: 'number', default: 500 },
+    vignetteFadingMs: { type: 'number', default: 1200},
+    movingEvent: { type: 'string', default: 'move' },
+    radius: { type: 'number', default: 0.9, min: 0.5},
+    softness: { type: 'number', default: 0.1, min: 0.0},
+    opacity: { type: 'number', default: 0.9, min: 0.0}
+  },
+
+  init: function () {
+    console.log('init tunneleffect');
+    const data = this.data;
+    this.scene = this.el;
+    this.isMoving = false;
+    this.dt = 0;
+    this.t = 0;
+    this.thresholdMs = data.checkThresholdMs;
+    this.fadingMs = data.vignetteFadingMs;
+    this.initMs = Date.now();
+    this.radius = data.radius;
+    this.minRadius = 0.5;
+    this.softness = data.softness;
+    this.opacity = data.opacity;
+    this.movingStartTimeMs = 0;
+    this.lastMovingTimeMs = 0;
+    // original render function of the renderer
+    this.originalRenderFunc = this.scene.renderer.render;
+    // add event listener for moving event
+    this.enableTunnelEffect = this.enableTunnelEffect.bind(this);
+    this.scene.addEventListener(data.movingEvent, this.enableTunnelEffect);
+  },
+
+  update: function () {
+    // todo
+  },
+
+  play: function () {
+
+  },
+
+  pause: function () {
+    this.scene.removeEventListener(data.movingEvent, this.enableTunnelEffect);
+  },
+
+  tick: function (time, deltaTime) {
+    if (this.isMoving) {
+      if (time - this.movingStartTimeMs < this.fadingMs) {
+        console.log('fading');
+        const progress = (time - this.movingStartTimeMs) / this.fadingMs;
+        const r = this.radius - (this.radius - this.minRadius) * progress;
+        this._updateVignettePass(r, this.softness, this.opacity);
+      } else {
+        if (time - this.lastMovingTimeMs > this.thresholdMs) {
+          console.log('idle');
+          this.isMoving = false;
+          this.scene.renderer.render = this.originalRenderFunc;
+          this.lastMovingTimeMs = time;
+          this.movingStartTimeMs = time;
+        }
+      }
+    } else {
+      if (this.scene.renderer.render !== this.originalRenderFunc) {
+        this.scene.renderer.render = this.originalRenderFunc;
+      }
+    }
+  },
+
+  _updateComposer: function () {
+    if (!this.renderer) {
+      this.renderer = this.scene.renderer;
+      this.camera = this.scene.camera;
+    }
+    if (!this.composer) {
+      this.composer = new THREE.EffectComposer(this.renderer);
+    }
+    if (!this.scenePass) {
+      this.scenePass = new THREE.RenderPass(this.scene.object3D, this.camera);
+    }
+    if (!this.vignettePass) {
+      this._updateVignettePass(this.radius, this.softness, this.opacity);
+    }
+    this.composer.addPass(this.scenePass);
+    this.composer.addPass(this.vignettePass);
+  },
+
+  _updateVignettePass: function (radius, softness, opacity) {
+    if (!this.vignettePass) {
+      this.vignettePass = new THREE.ShaderPass(THREE.VignetteShader);
+    }
+    const { width, height } = this.renderer.getSize();
+    const pixelRatio = this.renderer.getPixelRatio();
+    this.vignettePass.uniforms['radius'].value = radius;
+    this.vignettePass.uniforms['softness'].value = softness;
+    this.vignettePass.uniforms['opacity'].value = opacity;
+    this.vignettePass['resolution'] = new THREE.Uniform(new THREE.Vector2(width * pixelRatio, height * pixelRatio));
+    if (!this.vignettePass.renderToScreen) {
+      this.vignettePass.renderToScreen = true;
+    }
+  },
+
+  bindRenderFunc: function () {
+    const renderer = this.scene.renderer;
+    const render = renderer.render;
+    const system = this;
+    let isDigest = false;
+
+    renderer.render = function () {
+      if (isDigest) {
+        render.apply(this, arguments);
+      } else {
+        isDigest = true;
+        system.composer.render(system.dt);
+        isDigest = false;
+      }
+    };
+  },
+
+  enableTunnelEffect: function () {
+    if (this.isMoving) {
+      this.lastMovingTimeMs = Date.now() - this.initMs;
+      return;
+    }
+    this.isMoving = true;
+    this.movingStartTimeMs = Date.now() - this.initMs;
+    this._updateComposer();
+    this.bindRenderFunc();
+  }
+});