https://x.com/ushadersbible/status/1563995253195112457
I wanted to create similar effect as shown in this twitter post. I somewhat managed to create spilled water on ground effect but strugging with water falling out of pipe effect. Are there any similar examples open sourced?
let tex = await (new THREE.TextureLoader()).loadAsync('https://cdn.glitch.global/267b22e8-a772-4f48-b05c-af32d162db68/istockphoto-118337676-612x612.jpg?v=1745397582017')
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
const swirlMaterial = new THREE.ShaderMaterial({
uniforms: {
uTime: { get value(){return performance.now()/1000} },
uTexture: { value: tex },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;
void main() {
vec2 center = vec2(0.5);
vec2 delta = vUv - center;
float r = length(delta);
float angle = atan(delta.y, delta.x) + uTime * 2.0;
float swirlR = r + uTime * -0.1;
vec2 uv = center + swirlR * vec2(cos(angle), sin(angle));
gl_FragColor = texture2D(uTexture, uv);
gl_FragColor.a = 1.-length(delta*2.);
}
`,
transparent: true
});
let pplane = new THREE.Mesh(new THREE.BoxGeometry(10000,10000,10000),swirlMaterial);
pplane.position.copy(controls.target)
scene.add(pplane)
https://marsh-principled-eggplant.glitch.me