Warp a background image?

[thekevbot]

Would it be possible to add a background image that's warped by the shader? To simulate waves through an image instead of just over top of it?

I've started by modifying it as mentioned in #14 but obviously that just applies a static background-image.

[tinarwhite]

I have a version that warps the image here: https://github.com/tinarwhite/WebGL-Fluid-Simulation

Demo here: https://www.tinarwhite.com/fluids/paint/

[cloydlau]

This will do it:

css

canvas {
  width: 100vw;
  height: 100vh;
  background-image: url("back.png");
  background-size: 100% 100%;
}

js

import WebglFluid from 'webgl-fluid'

WebglFluid(document.querySelector('canvas'), {
  TRANSPARENT: true
})