Using a picture as background

[jng4723]

Is it possible to use a picture as the background instead of a solid color? If it is, how can I do it?

[Delivator]

I've got it to work with setting config.TRANSPARENT to true and changing

const backgroundShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision highp sampler2D;
    varying vec2 vUv;
    uniform sampler2D uTexture;
    uniform float aspectRatio;
    #define SCALE 25.0
    void main () {
        vec2 uv = floor(vUv * SCALE * vec2(aspectRatio, 1.0));
        float v = mod(uv.x + uv.y, 2.0);
        v = v * 0.1 + 0.8;
        gl_FragColor = vec4(vec3(v), 1.0);
    }
`);

to

const backgroundShader = compileShader(gl.FRAGMENT_SHADER, `
    void main () {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
    }
`);

WebGL-Fluid-Simulation/script.js

Line 360 in d20a9bb

const backgroundShader = compileShader(gl.FRAGMENT_SHADER, `

Then just use css and add a background-image to the canvas ;)

[cloydlau]

It seems the 'TRANSPARENT' parameter is not real transparent but a grid picture instead, the previous reply will do the job, I optimized the parameter, for those who see this later:

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