diff --git a/src/assets/images/tunnel.png b/src/assets/images/tunnel.png
new file mode 100644
index 0000000000000000000000000000000000000000..05449ee3c0fe5ca9159614633d25c61d66c85ca9
Binary files /dev/null and b/src/assets/images/tunnel.png differ
diff --git a/src/assets/images/tunnel@2x.png b/src/assets/images/tunnel@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba9524eeb0747fc720f1a1556f2ebf6cb7e2638d
Binary files /dev/null and b/src/assets/images/tunnel@2x.png differ
diff --git a/src/components/shaderlib/CopyShader.js b/src/components/shaderlib/CopyShader.js
deleted file mode 100644
index 8f34f8d49098c4e9d28ad6261cb082626ea66913..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/CopyShader.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- * Full-screen textured quad shader
- */
-
-THREE.CopyShader = {
-
- uniforms: {
-
- "tDiffuse": { value: null },
- "opacity": { value: 1.0 }
-
- },
-
- vertexShader: [
-
- "varying vec2 vUv;",
-
- "void main() {",
-
- "vUv = uv;",
- "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
- "}"
-
- ].join( "\n" ),
-
- fragmentShader: [
-
- "uniform float opacity;",
-
- "uniform sampler2D tDiffuse;",
-
- "varying vec2 vUv;",
-
- "void main() {",
-
- "vec4 texel = texture2D( tDiffuse, vUv );",
- "gl_FragColor = opacity * texel;",
-
- "}"
-
- ].join( "\n" )
-
-};
\ No newline at end of file
diff --git a/src/components/shaderlib/EffectComposer.js b/src/components/shaderlib/EffectComposer.js
deleted file mode 100644
index 661c5d44a95197e3a5a20023d371e2c08431da2d..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/EffectComposer.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-/* global AFRAME, THREE */
-
-THREE.EffectComposer = function ( renderer, renderTarget ) {
-
- this.renderer = renderer;
-
- if ( renderTarget === undefined ) {
-
- var parameters = {
- minFilter: THREE.LinearFilter,
- magFilter: THREE.LinearFilter,
- format: THREE.RGBAFormat,
- stencilBuffer: false
- };
-
- var size = renderer.getDrawingBufferSize();
- renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
- renderTarget.texture.name = 'EffectComposer.rt1';
-
- }
-
- this.renderTarget1 = renderTarget;
- this.renderTarget2 = renderTarget.clone();
- this.renderTarget2.texture.name = 'EffectComposer.rt2';
-
- this.writeBuffer = this.renderTarget1;
- this.readBuffer = this.renderTarget2;
-
- this.passes = [];
-
- // dependencies
-
- if ( THREE.CopyShader === undefined ) {
-
- console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
-
- }
-
- if ( THREE.ShaderPass === undefined ) {
-
- console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
-
- }
-
- this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
-
-};
-
-Object.assign( THREE.EffectComposer.prototype, {
-
- swapBuffers: function () {
-
- var tmp = this.readBuffer;
- this.readBuffer = this.writeBuffer;
- this.writeBuffer = tmp;
-
- },
-
- addPass: function ( pass ) {
-
- this.passes.push( pass );
-
- var size = this.renderer.getDrawingBufferSize();
- pass.setSize( size.width, size.height );
-
- },
-
- insertPass: function ( pass, index ) {
-
- this.passes.splice( index, 0, pass );
-
- },
-
- render: function ( delta ) {
-
- var maskActive = false;
-
- var pass, i, il = this.passes.length;
-
- for ( i = 0; i < il; i ++ ) {
-
- pass = this.passes[ i ];
-
- if ( pass.enabled === false ) continue;
-
- pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
-
-
- if ( pass.needsSwap ) {
-
- if ( maskActive ) {
-
- var context = this.renderer.context;
-
- context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
-
- this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
-
- context.stencilFunc( context.EQUAL, 1, 0xffffffff );
-
- }
-
- this.swapBuffers();
-
- }
-
- if ( THREE.MaskPass !== undefined ) {
-
- if ( pass instanceof THREE.MaskPass ) {
-
- maskActive = true;
-
- } else if ( pass instanceof THREE.ClearMaskPass ) {
-
- maskActive = false;
-
- }
-
- }
-
- }
-
- },
-
- reset: function ( renderTarget ) {
-
- if ( renderTarget === undefined ) {
-
- var size = this.renderer.getDrawingBufferSize();
-
- renderTarget = this.renderTarget1.clone();
- renderTarget.setSize( size.width, size.height );
-
- }
-
- this.renderTarget1.dispose();
- this.renderTarget2.dispose();
- this.renderTarget1 = renderTarget;
- this.renderTarget2 = renderTarget.clone();
-
- this.writeBuffer = this.renderTarget1;
- this.readBuffer = this.renderTarget2;
-
- },
-
- setSize: function ( width, height ) {
-
- this.renderTarget1.setSize( width, height );
- this.renderTarget2.setSize( width, height );
-
- for ( var i = 0; i < this.passes.length; i ++ ) {
-
- this.passes[ i ].setSize( width, height );
-
- }
-
- }
-
-} );
-
-
-THREE.Pass = function () {
-
- // if set to true, the pass is processed by the composer
- this.enabled = true;
-
- // if set to true, the pass indicates to swap read and write buffer after rendering
- this.needsSwap = true;
-
- // if set to true, the pass clears its buffer before rendering
- this.clear = false;
-
- // if set to true, the result of the pass is rendered to screen
- this.renderToScreen = false;
-
-};
-
-Object.assign( THREE.Pass.prototype, {
-
- setSize: function ( width, height ) {},
-
- render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-
- console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
-
- }
-
-} );
\ No newline at end of file
diff --git a/src/components/shaderlib/MaskPass.js b/src/components/shaderlib/MaskPass.js
deleted file mode 100644
index a79834591d8795e21a79c4f77240865966157d58..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/MaskPass.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-THREE.MaskPass = function ( scene, camera ) {
-
- THREE.Pass.call( this );
-
- this.scene = scene;
- this.camera = camera;
-
- this.clear = true;
- this.needsSwap = false;
-
- this.inverse = false;
-
-};
-
-THREE.MaskPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
-
- constructor: THREE.MaskPass,
-
- render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-
- var context = renderer.context;
- var state = renderer.state;
-
- // don't update color or depth
-
- state.buffers.color.setMask( false );
- state.buffers.depth.setMask( false );
-
- // lock buffers
-
- state.buffers.color.setLocked( true );
- state.buffers.depth.setLocked( true );
-
- // set up stencil
-
- var writeValue, clearValue;
-
- if ( this.inverse ) {
-
- writeValue = 0;
- clearValue = 1;
-
- } else {
-
- writeValue = 1;
- clearValue = 0;
-
- }
-
- state.buffers.stencil.setTest( true );
- state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
- state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
- state.buffers.stencil.setClear( clearValue );
-
- // draw into the stencil buffer
-
- renderer.render( this.scene, this.camera, readBuffer, this.clear );
- renderer.render( this.scene, this.camera, writeBuffer, this.clear );
-
- // unlock color and depth buffer for subsequent rendering
-
- state.buffers.color.setLocked( false );
- state.buffers.depth.setLocked( false );
-
- // only render where stencil is set to 1
-
- state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
- state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
-
- }
-
-} );
-
-
-THREE.ClearMaskPass = function () {
-
- THREE.Pass.call( this );
-
- this.needsSwap = false;
-
-};
-
-THREE.ClearMaskPass.prototype = Object.create( THREE.Pass.prototype );
-
-Object.assign( THREE.ClearMaskPass.prototype, {
-
- render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-
- renderer.state.buffers.stencil.setTest( false );
-
- }
-
-} );
\ No newline at end of file
diff --git a/src/components/shaderlib/RenderPass.js b/src/components/shaderlib/RenderPass.js
deleted file mode 100644
index 94186562860d2f490ba8ad327ad93bac1e387be7..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/RenderPass.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
-
- THREE.Pass.call( this );
-
- this.scene = scene;
- this.camera = camera;
-
- this.overrideMaterial = overrideMaterial;
-
- this.clearColor = clearColor;
- this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
-
- this.clear = true;
- this.clearDepth = false;
- this.needsSwap = false;
-
-};
-
-THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
-
- constructor: THREE.RenderPass,
-
- render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-
- var oldAutoClear = renderer.autoClear;
- renderer.autoClear = false;
-
- this.scene.overrideMaterial = this.overrideMaterial;
-
- var oldClearColor, oldClearAlpha;
-
- if ( this.clearColor ) {
-
- oldClearColor = renderer.getClearColor().getHex();
- oldClearAlpha = renderer.getClearAlpha();
-
- renderer.setClearColor( this.clearColor, this.clearAlpha );
-
- }
-
- if ( this.clearDepth ) {
-
- renderer.clearDepth();
-
- }
-
- renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
-
- if ( this.clearColor ) {
-
- renderer.setClearColor( oldClearColor, oldClearAlpha );
-
- }
-
- this.scene.overrideMaterial = null;
- renderer.autoClear = oldAutoClear;
- }
-
-} );
\ No newline at end of file
diff --git a/src/components/shaderlib/ShaderPass.js b/src/components/shaderlib/ShaderPass.js
deleted file mode 100644
index 916470f409e826702fd2ef4f497147ba19372b10..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/ShaderPass.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-/* global variable: AFRAME, THREE */
-
-THREE.ShaderPass = function ( shader, textureID ) {
-
- THREE.Pass.call( this );
-
- this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
-
- if ( shader instanceof THREE.ShaderMaterial ) {
-
- this.uniforms = shader.uniforms;
-
- this.material = shader;
-
- } else if ( shader ) {
-
- this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-
- this.material = new THREE.ShaderMaterial( {
-
- defines: Object.assign( {}, shader.defines ),
- uniforms: this.uniforms,
- vertexShader: shader.vertexShader,
- fragmentShader: shader.fragmentShader
-
- } );
-
- }
-
- this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
- this.scene = new THREE.Scene();
-
- this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
- this.quad.frustumCulled = false; // Avoid getting clipped
- this.scene.add( this.quad );
-
-};
-
-THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
-
- constructor: THREE.ShaderPass,
-
- render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-
- if ( this.uniforms[ this.textureID ] ) {
-
- this.uniforms[ this.textureID ].value = readBuffer.texture;
-
- }
-
- this.quad.material = this.material;
-
- if ( this.renderToScreen ) {
-
- renderer.render( this.scene, this.camera );
-
- } else {
-
- renderer.render( this.scene, this.camera, writeBuffer, this.clear );
-
- }
-
- }
-
-} );
\ No newline at end of file
diff --git a/src/components/shaderlib/VignetteShader.js b/src/components/shaderlib/VignetteShader.js
deleted file mode 100644
index e438b8abdb3c11391b589aaf138c760eb23c8cca..0000000000000000000000000000000000000000
--- a/src/components/shaderlib/VignetteShader.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- * Vignette shader
- * based on PaintEffect postprocess from ro.me
- * http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
- */
-
-THREE.VignetteShader = {
-
- uniforms: {
-
- "tDiffuse": { value: null },
- "offset": { value: 1.5 },
- "darkness": { value: 1.6 }
-
- },
-
- vertexShader: [
-
- "varying vec2 vUv;",
-
- "void main() {",
-
- "vUv = uv;",
- "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
- "}"
-
- ].join( "\n" ),
-
- fragmentShader: [
-
- "uniform float offset;",
- "uniform float darkness;",
-
- "uniform sampler2D tDiffuse;",
-
- "varying vec2 vUv;",
-
- "void main() {",
-
- // Eskil's vignette
-
- "vec4 texel = texture2D( tDiffuse, vUv );",
- "vec2 uv = ( vUv - vec2( 0.5 ) ) * vec2( offset );",
- "gl_FragColor = vec4( mix( texel.rgb, vec3( 1.0 - darkness ), dot( uv, uv ) ), texel.a );",
-
- /*
- // alternative version from glfx.js
- // this one makes more "dusty" look (as opposed to "burned")
- "vec4 color = texture2D( tDiffuse, vUv );",
- "float dist = distance( vUv, vec2( 0.5 ) );",
- "color.rgb *= smoothstep( 0.8, offset * 0.799, dist *( darkness + offset ) );",
- "gl_FragColor = color;",
- */
-
- "}"
-
- ].join( "\n" )
-
-};
\ No newline at end of file
diff --git a/src/components/tunnel-effect.js b/src/components/tunnel-effect.js
index 4e0790592581eeacb0aeca721d814a9a8847f496..a9e0b2d322c72a3c845267e75643768affa58c33 100644
--- a/src/components/tunnel-effect.js
+++ b/src/components/tunnel-effect.js
@@ -5,72 +5,48 @@ import "./shaderlib/MaskPass";
import "./shaderlib/CopyShader";
import "./shaderlib/VignetteShader";
-AFRAME.registerComponent('tunnel-effect', {
- init: function () {
- console.log('init');
- this.obj = null;
- this.vrStarted = false;
- var self = this;
- var initVars = this._initVars.bind(self);
- this.el.addEventListener('renderstart', initVars);
+AFRAME.registerComponent('tunneleffect', {
+ schema: {
+ checkThresholdMs: {type: 'number', default: 200},
+
},
-
- _initVars: function () {
- console.log('vars');
- this.obj = this.el;
- this.scene = this.obj.object3D;
- this.camera = this.obj.camera;
- this.renderer = this.obj.renderer;
- this.composer = new THREE.EffectComposer(this.renderer);
- this.pass = new THREE.RenderPass(this.scene, this.camera);
- this.composer.addPass(this.pass);
- this._vignetteEffect();
- this.vrStarted = true;
- this.t = 0;
+ 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.bind();
- },
-
- _vignetteEffect: function () {
- this.shaderVignette = THREE.VignetteShader;
- this.effectVignette = new THREE.ShaderPass( this.shaderVignette );
- this.effectVignette.renderToScreen = true;
- this.composer.addPass(this.effectVignette);
+ this.t = 0;
+ this.threshold = 300;
},
- tick: function (t, dt) {
- // console.log('system ticks');
- this.t = t;
- this.dt = dt;
+ _openTunnelEffect: function () {
+ if (!this.isMoving) {
+ this.image.setAttribute('visible', true);
+ this.isMoving = true;
+ }
+ this.t = this.scene.time;
},
- tock: function (t, dt) {
+ _closeTunnelEffect: function () {
+ console.log('visible false');
},
- renderPass: function (t) {
- // console.log(this.composer);
- this.composer.render(t);
- },
+ tick: function (time, deltaTime) {
+ if (this.isMoving && time - this.t > this.threshold) {
+ this.isMoving = false;
+ this.image.setAttribute('visible', false);
+ this.t = time;
+ }
- registerComponent: function () {
},
- bind: function () {
- const renderer = this.obj.renderer;
- const render = renderer.render;
- const system = this;
- let isDigest = false;
+ play: function () {
+ // this._closeTunnelEffect();
- renderer.render = function () {
- if (isDigest) {
- render.apply(this, arguments);
- } else {
- isDigest = true;
- system.composer.render(system.dt);
- isDigest = false;
- }
- };
-}
+ }
});
diff --git a/src/hub.html b/src/hub.html
index 5a41374424ee13ce96b1b7e9b7b43e735fc8bf98..5553349f291a6e49a319ab7fb9ba849acb72af73 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -34,7 +34,6 @@
</audio>
<a-scene
- tunnel-effect
renderer="antialias: true"
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
physics="gravity: -6;"
@@ -268,10 +267,12 @@
id="player-camera"
class="camera"
camera
+ tunneleffect
position="0 1.6 0"
personal-space-bubble="radius: 0.4"
pitch-yaw-rotator
>
+ <a-image id="tunnel-effect" src="#tunnel" visible="false" position="0.00 0 -0.03" width="0.36" height="0.12"></a-image>
<a-entity
id="gaze-teleport"
position = "0.15 0 0"