<!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>
<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: ["attribute vec2 aVertexPosition;", "attribute vec2 aTextureCoord;", "varying vec2 vTextureCoord;", "uniform mat3 projectionMatrix;", "void main() {", "gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);", "vTextureCoord = aTextureCoord;", "}"].join("\n"),
fragmentShader: [
"precision highp float;",
"varying vec2 vTextureCoord;",
"uniform sampler2D uSampler;",
"uniform sampler2D displacementMap;",
"uniform sampler2D displacementMap2;",
"uniform float time;",
"uniform float elapsed;",
"uniform float width;",
"uniform vec2 resolution;",
"uniform float scale;",
"float snoise(vec2 co, float seed) {",
"return fract(sin(dot(co * seed, vec2(12.9898, 78.233))) * 43758.5453);",
"}",
"void main() {",
"vec2 repeat = vec2(scale, scale * resolution.y / resolution.x);",
"vec2 uv = gl_FragCoord.xy / vec2(resolution.x, resolution.y);",
"vec2 vCoord = fract(uv.xy * repeat.xy);",
"vec4 displacement1 = texture2D( displacementMap, vCoord);",
"vec4 displacement2 = texture2D( displacementMap2, vCoord);",
"vec4 displacement = mix(displacement1, displacement2, vec4(time));",
"vec2 mixTexture = mix(displacement.xy, vTextureCoord.xy, vec2(time));",
"vec2 testPos1 = mixTexture + (1.0 - time) * displacement.xy * 0.5;",
"vec2 testPos = mix(testPos1, vec2(1.0), vec2(1.0 - time));",
"vec2 distUv = vec2(testPos.x,vTextureCoord.y);",
"float noise = snoise(distUv, elapsed);",
"vec4 color = texture2D(uSampler, distUv);",
"gl_FragColor = vec4(mix(color, vec4(vec3(color * noise), 0.0), 0.18));",
"}"
].join("\n"),
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.DisplayObjectContainer();
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("displacement-map2.png");
var uniform = {
time: {
type: "f",
value: 1
},
elapsed: {
type: "f",
value: 1
},
scale: {
type: "f",
value: 1
},
displacementMap: {
type: "sampler2D",
value: displacementMap
},
displacementMap2: {
type: "sampler2D",
value:displacementMap2
},
resolution: {
type: "v2",
value: [w, h]
}
}
var s = crossfade.vertexShader;
var f = crossfade.fragmentShader;
shader = new PIXI.AbstractFilter(s,f,uniform);
imgCon.filters = [shader];
}
function animate() {
shader.uniforms.elapsed +=0.01;
if(isAni) {
shader.uniforms.time =1-crossfade.val;
}
renderer.render(stage);
requestAnimFrame(animate);
}
init();
animate();
$('#btn').click(function(){
isAni=true;
if(isShow) {
isShow=false;
TweenMax.to(crossfade, h <= 1056 ? 3 : 2.4, {
val: h <= 1056 ? 1 : .5,
ease: Quint.easeInOut,
onComplete: function() {
crossfade.val = 1;
isAni=false;
}
});
} else {
isShow=true;
TweenMax.to(crossfade, 2.4, {
val: 0,
ease: Quint.easeOut,
onComplete: function() {
crossfade.val = 0;
isAni=false;
}
});
}
});
</script>
</body>
</html>