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

<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>

<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>