webgl过场效果shader

<!DOCTYPE html>
<html lang="en">	
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>        
<title>test</title>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
background:#000;
}
#view{position:absolute;left:0;top:0}
#btn{position:absolute;width:250px;height:60px;text-align:center;line-height:60px;color:#ffffff;left:200px;top:300px;cursor:pointer;background:rgba(0,0,0,0.5)}

</style>
</head>
<body>
<div id="view"></div>
<div id="btn">点击显示切换效果</div>
<script src="http://h5.skyfish.me/comm/js/zepto.min.js"></script>
<script src="pixi.min.js"></script>
<script src="js/TweenMax.min.js"></script>
    <!-- shaders -->
    <script id="vshader" type="x-shader/x-vertex">
        attribute vec2 aVertexPosition;
        attribute vec2 aTextureCoord;

        uniform mat3 projectionMatrix;

        varying vec2 vTextureCoord;

        void main(void)
        {
            vTextureCoord = aTextureCoord;
            gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
        }
    </script>

    <script id="fshader" type="x-shader/x-fragment">
        precision highp float;

        varying vec2 vTextureCoord;
	
	uniform sampler2D uSampler;
        uniform sampler2D uHeightMap;
        uniform float uTime;

        void main(void)
        {
            float height = texture2D(uHeightMap, vTextureCoord).r;
            vec4 color = texture2D(uSampler, vTextureCoord);
            if (height < uTime) {
              discard;
            }
            if (height < (uTime + uTime * 0.1)) {
              color = vec4(1.0, 0.2, 0.0, 1.0);
            }
            gl_FragColor = color;
        }
    </script>


<script type="text/javascript">
var requestAnimFrame = (function () {
    return window.requestAnimationFrame || (window).webkitRequestAnimationFrame || (window).mozRequestAnimationFrame || (window).oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60, new Date().getTime());
    };
})();
var renderer,stage,imgCon,displacementMap,displacementMap2;
var crossfade = {
	vertexShader: document.getElementById('vshader').textContent,
	fragmentShader:  document.getElementById('fshader').textContent,
	val:0
};
var shader;
var w = $(window).width();
var h = $(window).height();
var isAni=false;
var isShow=true;
function init() {
	try {
		renderer = PIXI.autoDetectRenderer(w, h,{transparent: true});
	} catch(e) {
		renderer = new PIXI.CanvasRenderer(w, h,{transparent: true});
	}
	document.getElementById('view').appendChild(renderer.view);
	stage = new PIXI.Container();
	imgCon = new PIXI.Container();
	stage.addChild(imgCon);
	var bg = new PIXI.Sprite.fromImage('b.jpg');
	imgCon.addChild(bg);
	displacementMap = new PIXI.Texture.fromImage("displacement-map3.png");
        displacementMap2 = new PIXI.Texture.fromImage("clouds.jpg");
	var uniform = {
		uTime: {
		    type: "f",
		    value: 0
		},
		uHeightMap: {
		    type: "sampler2D",
		    value:displacementMap2
		}
	}
	var s = crossfade.vertexShader;
	var f = crossfade.fragmentShader;
	shader = new PIXI.Filter(s,f,uniform);
        imgCon.filters = [shader];
}
function animate() {
	if(isAni) {
		shader.uniforms.uTime =crossfade.val;
	}
	renderer.render(stage);
	requestAnimFrame(animate);
}
init();
animate();
$('#btn').click(function(){
	isAni=true;
	if(isShow) {
		isShow=false;
		TweenMax.to(crossfade, 2, {
			val: 1,
			ease: Sine.easeOut,
			onComplete: function() {
				crossfade.val = 1;
				isAni=false;
			}
		});
	} else {
		isShow=true;
		TweenMax.to(crossfade, 2, {
			val: 0,
			ease: Sine.easeOut,
			onComplete: function() {
				crossfade.val = 0;
				isAni=false;
			}
		});
	}
});
</script>
</body></html>