From aa824ac0a09d2a705040584645cf03a3822e478f Mon Sep 17 00:00:00 2001
From: tony056 <ytung@mozilla.com>
Date: Tue, 3 Jul 2018 13:19:39 -0700
Subject: [PATCH] moved tunnel-effect to 'systems' folder.
---
src/components/tunnel-effect.js | 62 ---------------
src/systems/tunnel-effect.js | 136 ++++++++++++++++++++++++++++++++
2 files changed, 136 insertions(+), 62 deletions(-)
delete mode 100644 src/components/tunnel-effect.js
create mode 100644 src/systems/tunnel-effect.js
diff --git a/src/components/tunnel-effect.js b/src/components/tunnel-effect.js
deleted file mode 100644
index a9e0b2d32..000000000
--- a/src/components/tunnel-effect.js
+++ /dev/null
@@ -1,62 +0,0 @@
-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();
-// }
-// });
diff --git a/src/systems/tunnel-effect.js b/src/systems/tunnel-effect.js
new file mode 100644
index 000000000..d0f996e14
--- /dev/null
+++ b/src/systems/tunnel-effect.js
@@ -0,0 +1,136 @@
+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();
+ }
+});
--
GitLab