JAVASCRIPT   74

transition.js

Guest on 22nd July 2021 10:06:12 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.