webglFramework/Thirdparty/three.js-master/examples/js/crossfade/transition.js

   1 function Transition ( sceneA, sceneB ) {
   2
   3         this.scene = new THREE.Scene();
   4
   5         this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
   6
   7         this.textures = [];
   8
   9         var loader = new THREE.TextureLoader();
  10
  11         for ( var i = 0; i < 6; i ++ )
  12                 this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
  13
  14         this.quadmaterial = new THREE.ShaderMaterial( {
  15
  16                 uniforms: {
  17
  18                         tDiffuse1: {
  19                                 value: null
  20                         },
  21                         tDiffuse2: {
  22                                 value: null
  23                         },
  24                         mixRatio: {
  25                                 value: 0.0
  26                         },
  27                         threshold: {
  28                                 value: 0.1
  29                         },
  30                         useTexture: {
  31                                 value: 1
  32                         },
  33                         tMixTexture: {
  34                                 value: this.textures[ 0 ]
  35                         }
  36                 },
  37                 vertexShader: [
  38
  39                         "varying vec2 vUv;",
  40
  41                         "void main() {",
  42
  43                         "vUv = vec2( uv.x, uv.y );",
  44                         "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  45
  46                         "}"
  47
  48                 ].join( "\n" ),
  49                 fragmentShader: [
  50
  51                         "uniform float mixRatio;",
  52
  53                         "uniform sampler2D tDiffuse1;",
  54                         "uniform sampler2D tDiffuse2;",
  55                         "uniform sampler2D tMixTexture;",
  56
  57                         "uniform int useTexture;",
  58                         "uniform float threshold;",
  59
  60                         "varying vec2 vUv;",
  61
  62                         "void main() {",
  63
  64                         "vec4 texel1 = texture2D( tDiffuse1, vUv );",
  65                         "vec4 texel2 = texture2D( tDiffuse2, vUv );",
  66
  67                         "if (useTexture==1) {",
  68
  69                                 "vec4 transitionTexel = texture2D( tMixTexture, vUv );",
  70                                 "float r = mixRatio * (1.0 + threshold * 2.0) - threshold;",
  71                                 "float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);",
  72
  73                                 "gl_FragColor = mix( texel1, texel2, mixf );",
  74                         "} else {",
  75
  76                                 "gl_FragColor = mix( texel2, texel1, mixRatio );",
  77
  78                         "}",
  79                 "}"
  80
  81                 ].join( "\n" )
  82
  83         } );
  84
  85         var quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
  86
  87         this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
  88         this.scene.add( this.quad );
  89
  90         // Link both scenes and their FBOs
  91         this.sceneA = sceneA;
  92         this.sceneB = sceneB;
  93
  94         this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo.texture;
  95         this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo.texture;
  96
  97         this.needChange = false;
  98
  99         this.setTextureThreshold = function ( value ) {
 100
 101                 this.quadmaterial.uniforms.threshold.value = value;
 102
 103         };
 104
 105         this.useTexture = function ( value ) {
 106
 107                 this.quadmaterial.uniforms.useTexture.value = value ? 1 : 0;
 108
 109         };
 110
 111         this.setTexture = function ( i ) {
 112
 113                 this.quadmaterial.uniforms.tMixTexture.value = this.textures[ i ];
 114
 115         };
 116
 117         this.render = function( delta ) {
 118
 119                 // Transition animation
 120                 if ( transitionParams.animateTransition ) {
 121
 122                         var t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
 123                         transitionParams.transition = THREE.Math.smoothstep( t, 0.3, 0.7 );
 124
 125                         // Change the current alpha texture after each transition
 126                         if ( transitionParams.loopTexture && ( transitionParams.transition == 0 || transitionParams.transition == 1 ) ) {
 127
 128                                 if ( this.needChange ) {
 129
 130                                         transitionParams.texture = ( transitionParams.texture + 1 ) % this.textures.length;
 131                                         this.quadmaterial.uniforms.tMixTexture.value = this.textures[ transitionParams.texture ];
 132                                         this.needChange = false;
 133
 134                                 }
 135
 136                         } else
 137                                 this.needChange = true;
 138
 139                 }
 140
 141                 this.quadmaterial.uniforms.mixRatio.value = transitionParams.transition;
 142
 143                 // Prevent render both scenes when it's not necessary
 144                 if ( transitionParams.transition == 0 ) {
 145
 146                         this.sceneB.render( delta, false );
 147
 148                 } else if ( transitionParams.transition == 1 ) {
 149
 150                         this.sceneA.render( delta, false );
 151
 152                 } else {
 153
 154                         // When 0<transition<1 render transition between two scenes
 155
 156                         this.sceneA.render( delta, true );
 157                         this.sceneB.render( delta, true );
 158                         renderer.render( this.scene, this.cameraOrtho, null, true );
 159
 160                 }
 161
 162         }
 163
 164 }