基于WebGL的超逼真仿透明液体流动变形效果教程

简要教程


这是一款基于WebGL的超逼真液体流动变形效果。该效果使用PixiJS和GSAP来制作,以轮播图的方式来展现不同类型的液体流动变形效果。液体流动变形效果共5组,非常逼真。 使用方法


在页面中引入下面的文件。

<script src="js/demo.js"></script> 
<script src="js/pixi.min.js"></script>         
<script src="js/TweenMax.min.js"></script>         
<script src="js/main.js"></script>         
<script src="js/imagesloaded.pkgd.min.js"></script>

javascript


javascript代码

<script>
imagesLoaded(document.body, () => document.body.classList.remove('loading'));
var spriteImages         = document.querySelectorAll( '.slide-item__image' );
var spriteImagesSrc = [];
for ( var i = 0; i < spriteImages.length; i++ ) {
var img = spriteImages[i];
spriteImagesSrc.push( img.getAttribute('src' ) );
}
var initcanvasSlideshow = new CanvasSlideshow({
sprites: spriteImagesSrc,
displacementImage: 'img/dmaps/2048x2048/clouds.jpg',
autoPlay: true,
autoPlaySpeed: [10, 3],
displaceScale: [200, 70]
});
</script>

该液体流动变形效果的github地址为:https://github.com/codrops/LiquidDistortion/

阅读原文-演示/下载源码,还有更多更好玩的开源代码等你哦!

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2019-07-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券