Search code examples
three.jscross-fade

Cross-fade using quadmaterial - ThreeJS syntax


When coding a fade transition, what does the following code mean? I'm looking to achieve the same effect as http://jsfiddle.net/DW9q4/85/ but I have 2 scenes with 2 different map cubes rendered through a PerspectiveCamera. I'm having trouble understanding what is going on, what is code doing?

uniforms: {

        tDiffuse1: {
            type: "t",
            value: rtTexture1                                
        },
        tDiffuse2: {
            type: "t",
            value: rtTexture2                                
        },
        mixRatio: {
            type: "f",
            value: 0.5
        },
        opacity: {
            type: "f",
            value: 1.0
        }

    },
    vertexShader: [

        "varying vec2 vUv;",

        "void main() {",

        "vUv = vec2( uv.x, 1.0 - uv.y );",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n"),
    fragmentShader: [

        "uniform float opacity;",
        "uniform float mixRatio;",

        "uniform sampler2D tDiffuse1;",
        "uniform sampler2D tDiffuse2;",

        "varying vec2 vUv;",

        "void main() {",

        "vec4 texel1 = texture2D( tDiffuse1, vUv );",
        "vec4 texel2 = texture2D( tDiffuse2, vUv );",
        "gl_FragColor = opacity * mix( texel1, texel2, mixRatio );",

        "}"

    ].join("\n")

All help is greatly appreciated!


Solution

  • If you googled 'vertexShader' or 'fragmentShader' you'd get tons of hits. These shaders are core to WebGL. If you want to understand shaders and WebGl there are many online resources. Three.js generates the shader calls for you. For most normal work you can ignore shaders and work entirely with three.js.